Il selettore CSS per attributi ha veramente mille usi inaspettati. Avete mai considerato la possibilita' di usarlo come ad blocker? NO?! E' uno dei suoi usi migliori. Se avete la pazienza di leggere sino in fondo, forse riuscirete anche a farlo con il vostro Safari. Proviamo a vedere come.

Per chi non lo sapesse, l'attributo selettore di CSS permette di applicare effetti e stili ad un elemento basandosi sull'esistenza, valore o valore parziale di uno specifico attributo.

Nel suo caso pi semplice, puo' essere utilizzato per modificare un elemento con un particolare attributo, ad esempio title.

<p title="variazione"> questa una variazione </p>



In quest'esempio vogliamo individuare tutti gli elementi <p> e modificarli con un colore di background cyan. Vogliamo, inoltre, aggiungre un bordo puntato che cambi al passaggio del mouse. Infine, per aggiungere un tocco di responsivita' all'interfaccia, proveremo a cambiare il cursore con un punto interrogativo quando ci troviamo nella zona attiva dell'elemento.


p[title] {
color: #666;
border-bottom: 1px dotted #666;
}

p[title]:hover {
border-bottom-style: solid;
cursor: help;
}



Quello sopra e' un modo elegante per mostrare agli utenti della pagina che gli elementi <p> con attributo title possiedono dei contenuti speciali visualizzabili al passaggio del mouse.

Molti browsers moderni come Safari, Firefox ed Opera supportano l'attributo selettore. Sfortunatamente Internet Explorer 6 sembra non supportare correttamente questa funzionalita'.

Modificare un elemento basandosi sull'esistenza di un attributo e' una pratica ottima ed al tempo stesso efficiente, anche se limitata. Quello che rende l'attributo selettore uno strumento unico e' la possibilita' di utilizzare come selettere il valore stesso dell'attributo. E' possibile utilizzare questa proprieta' in una varieta' infinita di modi. Uno di questi include un blocker per banner pubblicitari molto esclusivo.

Blocker...cosa?!
Tutti i moderni browser incorporano la possibilita' di includere uno stylesheet di default diverso da quello incorporato nel browser stesso. Safari, ad esempio, ha una voce a riguardo sotto Preferenze->Avanzate. Selezionando opportunamente la voce StyleSheet e' possibile includere un proprio foglio di stile personalizzato da usare come default values.



In questo contesta trova spazio il nostro attributo selettore di CSS. La maggior parte dei banner pubblicitari hanno delle forse standard ampiamente rispettate. Il motivo e' dovuto alle forme di retribuzione basate sulla dimensione dei banner in pixel. Visto che le dimensioni sono una variabile nota, e' possibile utilizzare quest'ultima come filtro per il nostro browser aggiungendo una porzione di codice simile alla seguente al proprio browser:


img[width="468"][height="60"], img[width="468px"][height="60px"] {
display: none !important;
}



In questo modo e' possibile bloccare la visualizzazione di tutti i blocchi di immagine che rispettano le dimensioni specificate.

Per nascondere qualunque forma di banner, inclusi FLASH ed iFrames, e' possibile utilizzare il selettore universale:



*[width="468"][height="60"], *[width="468px"][height="60px"] {
display: none !important;
}



Ovviamente, questa tecnica non e' ERROR-FREE CERTIFIED: tutte le immagini o i blocchi di dimensione specificata verranno esclusi dalla visualizzazione; questo può includere anche falsi positivi. E' qui' che entra in gioco javascript, ma questa e' un'altra storia.

--
happy hack!
valv0