Gestione Crossbrowser semplificata

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:

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:

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:

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