I CSS3 sono già da tempo disponibili con le loro nuove regole, l’unico problema come sempre è il supporto dei browser, sempre scarso soprattutto considerando Internet Explorer.
Mentre Firefox ed Opera già da alcune versioni permettono di utilizzare nuovi selettori dei CSS3, la Microsoft solo con IE7 ha iniziato a supportarli. E’ giunto quindi il momento di approfondire la questione: ci saranno sempre degli utenti che continueranno ad utilizzare Internet Explorer 6, ma poichè i nuovi browser ce lo permettono, perchè non osare nella scrittura dei fogli di stile?
Ho realizzato una semplice pagina di esempio con alcuni selettori, in particolare quelli che consentono di controllare un elemento dall’attributo e dal valore dell’attributo stesso.
Ecco un breve elenco.
- elem[att]: permette di selezionare tutti gli elementi di tipo “elem” con attributo “att”, ad esempio a[title] cattura tutti gli elementi a che hanno un title.
- elem[att=val]: seleziona tutti gli elementi con attributo “att” di valore esattamente uguale a “val”
- elem[att~=val]: seleziona gli elementi con attributo “att” il cui valore sono più parole separate da spazi bianchi, di cui una è esattamente uguale a “val”
- elem[att^=val]: seleziona gli elementi con attributo “att” il cui valore inizia con “val”
- elem[att$=val]: seleziona gli elementi con attributo “att” il cui valore termina con “val”
- elem[att*=val]: seleziona gli elementi con attributo “att” il cui valore contiene almeno una stringa con valore “val”
Queste sono solo alcune delle novità, ma è già un buon punto di partenza per giocare con il codice senza dover usare troppi div contenitori, classi e id. Consiglio di guardare l’esempio ed il relativo codice, più chiaro di molte parole.
E’ buona norma comunque ricordare di controllare anche la resa su IE6, fornendo un’alternativa per chi ancora utilizza questo browser.
Per chi volesse approfondire, ecco la pagina ufficiale del W3C sui selettori dei CSS3.
Volevo chiederti un’informazione sul selettore elem[att=val], se puoi rispondermi.
Nella prospettiva di rimuovere da un sito in vecchio HTML gli allineamenti delle immagini nel body tramite align=”right” e simili, pensi si possa utilizzare appunto questo selettore elem[att=val]?
In tal caso, tenendo fermo il discorso sulla compatibilità dei browser, potrei dare al css un’istruzione di questo tipo:
.img[align=right] {img-align: right; }
(non mi ricordo se l’istruzione è esatta, ma mi pare di si).
Nel caso risolverei di colpo, anche se in maniera un po’ artificiosa, un bel problema che mi cruccia da un po’.
ecco, mi ha tagliato il commento… (@Tom puoi cancellare quello sopra)
Dicevo se c’è qualche soluzione al problema di compatibilità con le versioni precedenti di internet explorer 7.0
E’ sufficiente raggirare il problema con i tag condizionali oppure bisogna ricorrere ai javascript?
Per le versioni precedenti di Explorer non ci sono molte soluzioni, a meno che non si voglia sporcare il codice della pagina.
Bisogna scendere a compromessi, offrendo una versione base (ma con piene funzionalità) a chi usa IE6 e dare qualcosa in più a chi invece ha un browser aggiornato.