Hack per IE7

[Dj`LoRdZ`]

Hack per IE7

Internet Explorer 7 è stato rilasciato in versione definitiva a ottobre del 2006, ma ad oggi non non sono ancora presenti in rete risorse valide con documentati bug e difetti di resa significativi, facilmente identificabili e soprattuto riproducibili. Ciò può significare due cose: Internet Explorer 7 è un browser robusto e presenta pochi bug e diffetti di resa... oppure sviluppatori,blogger e articolisti non sono ancora stati in grado di individuare tali bug.

Quale che sia la ragione, è bene poter disporre di strumenti per poter aggirare eventuali difetti di resa di IE7 senza dover compromettere la resa sugli altri browser. Una classe di soluzioni nota con diversi nomi: hack, workaround e filtri.

La differenza di classificazione è piuttosto sottile: per come li intendo i workaround si fondano su carenze del supporto dei CSS di un dato browser; hack e filtri si basano invece su difetti e carenze del parser, tipicamente a una sequenza di caratteri piuttosto che keyword e selettori non supportati come nel caso dei workaround.

L'ho espresso diverse volte negli articoli qui su HTML.it e sul blog: hack e filtri andrebbero usati il meno possibile. I motivi sono sostanzialmente due. Il primo è che molto spesso si può aggirare il problema in maniera indolore e a prova di futuro, riconsiderando la soluzione adottata: se non si dovesse riuscire, c'è una classe di workaround potenzialmente meno dannosa che si potrà usare. Il secondo motivo per non usare hack e filtri è che se proprio non si riesce a sistemare, Internet Explorer dispone del commento condizionale nel quale è possibile relegare le regole necessarie senza intaccare la resa negli altri browser, garantendo allo stesso tempo un buon controllo della soluzione adottata e confinata alla sola risoluzione del problema.

Ma se da una parte il commento condizionale potrà rivelarsi pratico per certi versi, è pur vero che implica la modifica del codice HTML delle pagine coinvolte e frammenta il foglio di stile in due o più file. In certe situazioni queste due condizioni si possono rivelare poco pratiche se non addirittura impossibili da adottare. In tali casi si potrà quindi ricorrere ad hack, filtri e workaround, con un'accortezza indispensabile: accertarsi del comportamento di tali soluzioni sui browser futuri.

Soluzioni simili introducono infatti intrinsecamente un'instabilità nel foglio di stile, il cui comportamento è imprevedibile nei browser futuri. In quanto a Internet Explorer 7, c'è da evidenziare comunque che il più delle volte questa instabilità si potrà al massimo ripercuotere solo nelle versioni future del browser di case Microsoft, e in particolare IE8.

Concludo questa lunga premessa con una precisazione: conoscere hack e workaround è importante per poter risolvere bug e difetti di resa dei browser, ma la vera perfezione sta nel riuscire a non utilizzarli. Siamo pronti per procedere.



Soluzione 1. Workaround per escludere IE con commento vuoto


Il primo workaround che vedremo è basato su un bug del parser di IE7 e il child selector per creare una regola vista solo dai browser moderni (ovvero le ultime versioni di Firefox, Opera e Safari) escludendo quindi tutte le versioni di IE fino alla versione 7 compresa. Ecco il codice:

div.test{background: yellow} /*per IE fino alla versione 7 inclusa */
html>/**/body div.test{background: lime} /*per gli altri browser*/

La seconda regola usa il child selector (non supportato da IE fino alla v.6) e usa nel selettore un commento prima del body, che nasconderà il blocco dichiarativo anche a IE7. Ecco la pagina di esempio.


Soluzione 2. Specificare una regola solo per
IE7


Il secondo workaround è in grado di creare una regola specifica vista solo da IE7. Vediamo il codice CSS:

div.test{background: green} /*per gli altri browser */
*:first-child+html div.test{background: yellow} /*per IE7 */

Ecco il relativo esempio. Questo approccio è particolarmente indicato quando vorremo quindi creare regole indirizzate esclusivamente a IE7 o, per differenza, a tutti gli altri browser, incluse le precedenti versioni di IE.


Soluzione 3. Usare lo pseudo-selettore :lang

Nel terzo esempio si è usato lo pseudo selettore :lang per nascondere una regola intera a tutte le versioni di IE fino alla 7 inclusa. Da notare che in questo caso, per poter adottare la tecnica, sarà necessario quindi specificare il linguaggio del documento (es ).

Una soluzione simile si può rivelare quindi poco pratica rispetto alle due precedenti dato che, su pagine già esistenti, implica la modifica del codice html. Ecco le due regole dell'esempio:

div.test{background: yellow} /*per IE fino alla versione 7 */
html:lang(it) div.test{background: lime} /*per gli altri browser */

Soluzione 4. Usare il selettore di tipo con namespace

Nel quarto esempio viene usato il selettore di tipo con namespace per creare una regola vista solo su Opera, Firefox e Safari, escludendo quindi le versioni di IE fino alla 7. Tale selettore appartiene ai CSS di livello 3, e seppur sia definito e lecito nelle specifiche W3C in proposito, al momento non passa la prova del validatore CSS. Visto che con una soluzione simile si dovrebbe validare con CSS di livello 3, ma che comunque l'esito della validazione è negativo, una soluzione simile è altamente sconsigliata, a favore delle tre precedenti. Ecco comunque le due regole dell'esempio:

div.test{background: yellow} /*per IE fino alla versione 7 */
*|html div.test{background: lime} /*per gli altri browser */

La tabella di compatibilità

Ho preparato una tabella di compatibilità, che include le quattro soluzioni qui viste più alcune presentate negli articoli Risoluzione dei problemi di CSS e Box Model e workaround. Si tratta di una pratica mini-reference, che potrà essere tenuta a portata di mano nei casi (rari spero) in cui vi troverete in difficoltà con le varie versioni di Internet Explorer.

Esempio pratico

In conclusione di articolo ho preparato un esempio che, al di là del suo scopo (praticamente nullo) mostra facilmente come sia possibile creare dichiarazioni e/o regole per un dato browser, distinguendo attraverso hack e workaround tra IE5.x, IE6, IE7 e gli altri browser moderni (Opera, Firefox e Safari). L'esempio mostrerà quindi l'icona corrispondente al browser in uso, come nel seguente screenshot:



In sostanza l'esempio fa uso di alcuni workaround e filtri per creare dichiarazioni specifiche sul background. Ecco il CSS chiave:

div#tellme{
    background: #FFF url(ie6.png) no-repeat center bottom; /*IE6*/
    background /**/: #FFF url(ie5.png) no-repeat center bottom; /*IE5.x*/}

html>body div#tellme{
    background: #FFF url(ofs.png) no-repeat center bottom; /*Opera, Firefox e Safari*/}

*:first-child+html div#tellme{
    background: #FFF url(ie7.png) no-repeat center bottom; /*IE7*/}

Nonostante l'esempio abbia poca utilità pratica, spero sia chiaro l'approccio, attraverso il quale è possibile creare dichiarazioni e/o regole specificatamente indirizzate alle diverse versioni di IE. Si tratta di un set di 4 soluzioni che comprendono selettori, commenti e dichiarazioni e che potranno essere un buon punto di partenza per i vostri workaround e hack.
Approfondimenti e conclusioni

Termina qui l'articolo dedicato ad hack, filtri e workaround, in cui abbiamo visto diverse soluzioni pratiche per creare dichiarazioni e/o regole specifiche per le varie versioni di Internet Explorer. Vorrei ribadire che il fatto che esistano soluzioni di questo tipo non implica che si debbano adottare, ma senza dubbio conoscerle è importante per poterne disporre all'occorrenza. Una raccomandazione: qualora utilizzerete le soluzioni qui presentate, è indispensabile aggiungere un commento nei vostri fogli di stile così da individuarle facilmente anche in seguito.

In conclusione, ecco alcuni approfondimenti. I seguenti link sono tabelle di compatibilità di selettori e proprietà CSS nei diversi browser:

* CSS Hacks
* Web browser CSS support
* Comparison of layout engines
* CSS filters
* Hacks - CSS-discuss
* Chart of Support for CSS Filters/Hacks

Qui di seguito vengono riportati articoli, risorse e hack specifiche per Internet Explorer 7:

* IE7 - CSS-discuss
* The Triple-X hack
* Star pipe HTML hack
* IE7 CSS hacks
* Targetting IE7

Questo è tutto per ora... alla prossima!