La maggior parte dei browser in circolazione non recepisce correttamente tutte le istruzioni CSS. E' quindi spesso necessario ricorrere a degli "hack", dei trucchi, per impedire a questo o quel browser di eseguire una determinata istruzione CSS.
Ci sono diversi tipi di hack possibili, ne esamineremo alcuni in questo articolo.
Commenti condizionali / Conditional commentsVengono usati per Internet Explorer. La sintassi di un commento condizionale è la seguente:
<!--[if condizione]> HTML o CSS <![endif]-->dove la condizione può essere:
IE
lt IE versionVersioni precedenti alla versione indicata
lte IE versionVersioni precedenti o uguali alla versione indicataIE versionSolo la versione indicatagte IE versionVersioni successive o uguali alla versione indicatagt IE versionVersioni successive alla versione indicata Le versioni di Internet Explorer possono essere 5, 5.5, 6 o 7
I commenti condizionali possono essere utilizzati per includere parti di CSS o collegamenti a fogli di stile visibili solo dalla categoria prescelta.
Ad esempio, volendo collegare un foglio di stile visibile solo da IE 6 e versioni precedenti, useremo il codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="tutti_i_browser.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]> <link href="ie_6_e_precedenti.css" rel="stylesheet" type="text/css"> <![endif]-->
</head>
</html>SelettoriMolti degli hack per CSS hanno a che vedere con i bugs relativi ai selettori. Ovvero, non tutti i browser riconoscono determinati selettori, e quindi è possibile mostrare o nascondere certe regole a determinati browser. Attenzione, i risultati sono testati sui browser più diffusi, e potrebbe esserci qualche discordanza sui browser meno conosciuti. Tutte le soluzioni proposte sono validabili.
- IE 6 e precedenti
* html {}- Solo IE 7
*:first-child+html {}- IE 7 e browser moderni
html>body {}- Solo browser moderni (non IE 7)
html>body {}- Opera 9 e precedenti
html:first-child {}
Alcuni di questi selettori funzionano solo se il documento ha un doctype ma nessuna istruzione di processo (inclusa la dichiarazione XML).
Ad esempio, per applicare una particolare larghezza ad un div solo se visualizzato su Internet Explorer 7, dovremmo scrivere:
*:first-child+html #miodiv{width:500px;}
!important
Internet Explorer 6 e precedenti non riconoscono la dicitura
!important, e la ignorano se nello stesso foglio di stile appare un'altra dichiarazione della stessa proprietà. Questa caratteristica può essere utilizzata per nascondere alcune proprietà a IE 6 e ai suoi predecessori.
Ecco un esempio:
p {
background: green !important;
background: red; /* IE 6 e precedenti usano questo valore */
}
@import
Internet Explorer 7 e precedenti non supportano la regola @import , e la ignorano completamente. Quindi possiamo creare un foglio di stile esclusivamente per i browser non-IE, e importarla nel nostro documento scrivendo: @import "non-ie.css" all;.
Le future versioni di IE però potrebbero correggere questo bug, quindi prestate attenzione nel suo utilizzo.
Nascondere comandi ad Internet Explorer 5Nella scrittura di un foglio di stile, è - purtroppo - spesso necessario impostare parametri differenti per IE 6 e il suo predecessore IE 5.
Internet Explorer 5 infatti non interpreta correttamente la larghezza di un elemento, qualora siano presenti margini (margin) o spaziature (padding). Anzichè considerare a parte questi valori, come fanno tutti gli altri browser, li considera inclusi nella larghezza, cosicchè l'elemento risulta più stretto (lo stesso vale per l'altezza).
Sarà quindi necessario scrivere una regola interpretata da tutti i browser e di seguito una regola valida solo per IE 5. Ci viene in aiuto l' invenzione di Tantek Celik, conosciuta come box model hack, e consiste nell'aggiungere al codice 'standard' le due voci voice-family: "\"}\""; voice-family:inherit;:
#header {padding: 10px; border: 1px; width: 150px; voice-family: "\"}\""; voice-family:inherit; width: 100px;}
Con questa sintassi IE5 interpreta tutte le regole elencate prima delle due voci
voice-family: "\"}\""; voice-family:inherit;, e ignora tutto ciò che viene dopo.
Oggigiorno, tuttavia, è consigliato sostituire questo hack solo ben più semplice star-html hack, in questo modo:
#header {padding: 10px; border: 1px; width: 100px;}
*html #header {width: 150px; w\idth: 100px;}
Così facendo, IE 6 e IE 5 leggono la regola contenuta all'interno del selettore
*html , ma, aggiungendo alla nostra regola
w\idth:, facciamo in modo che IE 6 tenga per buona quest'ultima. Il carattere di escape (\) infatti dovrebbe essere ingnorato, ma quando si trova all'interno del nome della proprietà
non è ignorato da IE5 e IE5.5 per Windows. Invece fa in modo che questi browser ignorino il carattere successivo, rendendo così illeggibile per loro il nome della proprietà.
Importante: il carattere di escape non deve venire direttamente prima di ciascuno dei primi sei caratteri alfabetici, perchè essi hanno significati speciali quando vengono preceduti da un escape. Nello specifico, i caratteri proibiti sono a, b, c, d, e, f. Inoltre, il carattere di escape non deve venire prima della prima lettera, perchè IE5.5 in qualche modo è in grado di ignorare l'escape quando viene per primo.
Nascondere comandi ad Internet Explorer per MacSono pochi ormai gli utenti di Internet Explorer per Mac, in seguito alla decisione di Microsoft di non portare più avanti lo sviluppo di tale versione. Può comunque capitare che un programmatore voglia considerare anche questi utenti, e desideri nascondere alcune regole a tale browser.
La soluzione è piuttosto semplice. E' infatti sufficiente inserire una serie di caratteri prima e dopo il codice. Ecco un esempio:
/* Hack per IE-Mac \*/
#header {height:60px;}
#footer {height:40px;}
/* Fine hack */
IE-Mac ignorerà questi comandi a causa della presenza del backslash (\) prima della fine del commento.
Nascondere comandi a Netscape 4
Netscape 4 presenta una interpretazione delle regole CSS spesso insufficiente. Creare un sito compatibile con questo browser può essere difficile se non impossibile in siti web di una certa complessità. E' quindi possibile, e a volte consigliabile, nascondere completamente il CSS a Netscape, usando la regola
@import per collegare il foglio di stile al documento:
<style type="text/css">@import url(stile.css);</style>
In questo modo, Netscape 4 mostrerà una versione del sito priva di stile grafico.
Per un elenco completo degli hacks per CSS, validi e non, vi consiglio una visita al sito Webdevout.
Un articolo sugli hacks e IE 7: http://gabrieleromanato.altervista.org/css/css-hack-ed-ie7/index.html
