CSS  »  Articoli  »  CSS 3 

In alcuni articoli precedenti ci siamo occupati di analizzare tutti i tipi di selettori presenti nella specifica del CSS3 fornendone per ognuno la compatibilità con le varie versioni dei vari browser. Abbiamo quindi suddiviso i selettori in quattro categorie:

1. I selettori di attributo nei CSS3
2. Le pseudo-classi strutturali
3. Altre pseudo-classi
4. I selettori combinatori nei CSS3

Il problema principale dell'utilizzo di queste nuove proprietà è la compatibilità stessa che ne impedisce l'utilizzo per progetti che richiedono il pieno supporto anche per versioni di browser datate. Internet Explorer nella versione 6 non è compatibile con nessuno dei selettori avanzati analizzati negli articoli e, considerata la sua larga diffusione, questo può risultare un grosso problema nella progettazione di applicazioni cross-browser. Molti dei nuovi selettori, poi, non risultano essere compatibili neppure con le ultime versioni dei browser di casa Microsoft e con le versioni 2 e 3 di Firefox.

Vedremo in questo articolo come ovviare alle incompatibilità di tali browser ed estendere il supporto ai selettori CSS3 affidandoci a Javascript, e più precisamente, ad uno dei framework più popolari, jQuery. Per chi non conoscesse le potenzialità del noto framework, si può fare riferimento alla guida di Marco Solazzi pubblicata su HTML.it.

I selettori di attributo

Figura 1 - Tabella di compatibilità Selettori di Attributo

Come possiamo notare dalla tabella di compatibilità, per questo genere di selettori il problema si presenta solo con la versione 6 di Internet Explorer. La soluzione alla compatibilità è piuttosto semplice e richiede davvero pochissime righe di codice. Tale soluzione, inoltre, è uguale per ogni selettore appartenente a questa categoria.

La soluzione consiste nel creare una classe CSS che contiene gli stessi attributi assegnati al selettore e assegnarla tramite Javascript al caricamento della pagina.

Prendiamo uno degli esempi utilizzati nell'articolo sui selettori di attributo e rendiamolo compatibile anche per IE6 utilizzando jQuery.

Dato il seguente codice HTML

<a title="Lorem Ipsum" href="#">Lorem Ipsum</a>

avevamo utilizzato la seguente regola CSS per assegnare uno stile a tutti i link che contenevano l'attributo title al loro interno:

a[title] { color: blue; text-decoration: underline; }

Per rendere cross-browser la precedente regola è sufficiente creare una classe che contiene le stesse proprietà del selettore precedente ed assegnarla dinamicamente con jQuery.

Il codice CSS diviene, quindi, il seguente:

a[title] { color: blue; text-decoration: underline; }
.selector { color: blue; text-decoration: underline; }

Facciamo attenzione a mettere in righe diverse le due regole altrimenti IE6 non la interpreterà.

Il codice Javascript di cui abbiamo bisogno, invece, è il seguente:

$(document).ready(function(){
  $('a[title]').addClass('selector');
});

Dato che è il primo esempio dell'articolo, analizziamo un attimo il codice Javascript per coloro che non sono molto esperti di jQuery. La prima e la terza riga servono semplicemente a "catturare" l'evento ready del documento, ovvero il momento in cui la pagina è caricata. Tutto il codice contenuto tra queste righe viene eseguito nel momento in cui la pagina viene caricata. La riga 2 dell'esempio, invece, assegna la classe selector al selettore a[title]. jQuery garantisce il funzionamento dei suoi selettori con tutte le versioni dei browser quindi abbiamo la garanzia che il nostro selettore verrà identificato dal Javascript, a questo punto non ci resta che assegnare la classe creata precedentemente nel CSS.

Altri articoli

Altre guide

Altre newsletter