Come sicuramente saprete, i diversi browser in circolazione non interpretano il codice CSS allo stesso modo. Questo significa che in alcuni casi le pagine web vengono mostrate in modo differente se visualizzate nei differenti browser.
La soluzione è creare delle regole CSS condizionali, ovvero creare delle definizioni valide solo per un browser (o un gruppo) ma non per altri.
Segue un esempio di CSS condizionale:

In questo caso solo Internet Explorer 6 imposterà la larghezza a 600px, mentre gli altri browser a 400px.

La sintassi:

Eseguo se il browser corrisponde a quello indicato (es. [if IE])

Eseguo se il browser NON corrisponde a quello indicato (es. [if ! IE])

Eseguo se la versione del browser corrisponde a quella indicato (es. [if IE 6])

Eseguo se la versione del browser NON corrisponde a quella indicato (es. [if ! IE 6])

Browser

IE – Internet Explorer
Gecko – Gecko based browsers (Firefox, Camino etc)
Webkit – Webkit based browsers (Safari, Shiira etc)
Opera – Opera’s browser
IEMac – Internet Explorer for the Mac
Konq – Konqueror
IEmob – IE mobile
PSP – Playstation Portable
NetF – Net Front

E’ infine possibile dichiarare delle condizioni. La sintassi è:

Eseguo se la condizione è verificata (es. [if lt IE 6])

Eseguo se la condizione NON è verificata (es. [if ! lt IE 6])

Condizioni

lt – Minore di
lte – Minore di o Uguale a
eq – Uguale a
gte – Maggiore di o Uguale a
gt – Maggiore di

Oggi voglio pubblicare una cosa che differisce dagli argomenti degli altri post, ma dato che l’html è comunque legato in qualche modo al mio mondo, volevo scrivere due righe su come bypassare un annoso problema di compatibilità di visualizzazione tra i browser.

Immaginiamo di aver definito uno stile CSS come segue:

#search_box {
  float: right;
  clear: right;
  width: 200px;
}

Ci accorgiamo però che mentre Firefox visualizza correttamente il div, Internet Explorer ha un posizionamento differente dello stesso. Non mi dilungo a spiegare il motivo per cui questo succede (usando un motore di ricerca troverete molta documentazione a proposito), ma voglio indicare un modo semplice per ovviare a questa anomalia. Ipotizziamo che per Firefox vada bene una larghezza di 200px mentre per explorer ne serva una da 230px, possiamo modificare la definizione CSS come segue:

#search_box {
  float: right;
  clear: right;
  width: 200px !important; /*firefox*/
  width: 230px; /*explorer*/
}

In pratica mentre Firefox considera la riga dove trova !important come più importante di altre eventuali successive, Explorer ignora tale direttiva e quindi prende in considerazione l’ultima dichiarazione di width.

Un altro sistema è il seguente:

#search_box  {
    width: 200px;   /* per tutti i browser */
   *width: 230px;  /* per tutti gli IE */
}

* html #search_box  {
  width: 230px; /* per IE6 e IE5 */
}

Chiaramente il sistema migliore è l’uso dei CSS condizionali, ma di questo parleremo un’altra volta