Breve manuale di convivenza tra CSS e Internet Explorer

Che Internet Explorer sia uno dei browser più buggati della storia del world wide web è una cosa nota, meno nota è il suo totale menefreghismo per gli standard W3C. Questo ultimo aspetto, fondamentale nella programmazione web, è causa di malanni psicofisici di ogni programmatore che almeno una volta nella vita ha dovuto lottare con tutte le sue forze per rendere compatibile con Internet Explorer con le proprie direttive.

La mia esperienza con la programmazione web, ed in particolar modo con l’aspetto grafico di un sito o di un applicazione web, mi ha portato spesso a dover trovare soluzioni, spesso folli, per la convivenza di regole css standard con il motore di Internet Explorer, ho così voluto condivedere questi trucchetti, veri e propri hack in alcuni casi, in un brebe manuale di convivenza tra CSS e Internet Explorer.

Conditional Stylesheet
Come dice il nome stesso, possiamo condizionare lo stylesheet a seconda del browser che usiamo. Questa tecnica è quella che dovrebbe essere usata nella stragrande maggioranza dei casi, sia perchè aiuta in qualche modo la leggibilità del codice, sia perchè cosi possiamo avere un foglio stile ad-hoc per ogni versione del nostro nemico di Mountain View:

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Come si può vedere il codice è molto semplice, e solo Internet Explorer è in grado di interpretare quello che quello che c’è scritto nel pezzo di codice commentato, è indirizzato a lui.
Da notare anche che la condizione è molto banale, e facile da personalizzare. Per esempio se volessimo dare come targhet, una versione specifica di IE, basterà specificarla

<!--[if IE7]>
	<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Questa tecnica comprende anche le espressione di esclusione, quindi [if !IE6], piuttosto che le espressioni di comparazione "lower than", "lower than equals", "greater than", "greater than equals" (minore di, minore o uguale di, maggiore di, maggiore o uguale di).
Attenzione però che questa tecnica non è applicabile dalla versione 10 di Internet Explorer in poi. Per questi ci sono tecniche più “umane” per il targhetting del codice.

Hacks CSS
Qui entriamo nel mondo dell’illegalità. Sebbene brutto da vedere nel codice, resta comunque pulito e leggibile e sopratutto abbastanza legale rispetto gli standard W3C, sopratutto, il metodo precedente, sfrutta una specifica feature del browser. Questi che vedremo di seguito, sono veri e propri hack che sfruttano veri bug di IE, non solo nella lettura del CSS (“capisci a me”).
Vediamoli in dettaglio:

body {
    color: red; /* tutti i browser */
    color : green\9; /* IE10 e precedenti*/
}

Queto \9 messo tra la regola ed il punto e virgola permette di rendere quella regola leggibile a IE10 e precedenti.

body {
    color: red;     /* tutti i browser */
    color: green\9; /* IE10 e precedenti */
    *color: yellow; /* IE7 e precedenti */
}

Analogamente a prima, con l’asterisco possiamo dare un targhet alla regola, per IE7 e precedenti

body {
    color: red;     /* tutti i browser */
    color: green\9; /* IE10 e precedenti */
    *color: yellow; /* IE7 e precedenti */
    _color: blue;   /* Solo IE6 */
}

Qui invece, l’underscore ci permette di andare solo su IE6.

Conclusioni
Entrambi i metodi sono validi, funzionanti, e rapidi. Tuttavia, è sempre preferibile usare il primo metodo, ove non è possibile “giocare” con il CSS per ottenere lo stesso risultato in modi diversi. Il secondo deve sempre essere l’ultima scialuppa di salvataggio, o quanto meno quando non è necessario che tutto il CSS sia adattato a Internet Explorer. Entrambi i sistemi non dovrebbero esistere in un  mondo perfetto, tuttavia…

Vi segnalo qui di seguito alcuni altri link utili e dettagliati, in inglese, per approfondire l’argomento.

Ulteriori Hacks
Perchè non usare gli Hack in favore dei Commenti Condizionali
Alcuni dei Fix più comuni ai problemi noti dei vari Internet Explorer

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *