Mi stavo domandando se esistesse una maniera semplice e immediata per riuscire a smistare i vari browser su dei documenti CSS appositamente creati e che corrispondano alla esigenze di ogni singolo browser.

Mi sono imbattuto in questo interessante articolo di Richard Livsey pubblicato su 37signals che affrontava proprio l’argomento da me richiesto e con interessante curiosità ho scoperto che dove non arrivava CSS poteva JavaScript! Infatti grazie a 37signals sono arrivato ad uno script veramente carino.

Rafael Lima si era posto il mio stesso problema e lo ha risolto con interessante originalità; ha creato un JavaScript che permette di applicare proprietà distinte in base al browser che si utilizza. Ecco qui un esempio.

Questo sistema può essere impiegato per risolvere facilmente i vari problemi di hacks che si presentano durante una fase di sviluppo di un sito web. Infatti come spesso capita non tutti i browser interpretano identicamente le stesse proprietà riferite ad un qualsiasi elemento; per questo motivo si sono sviluppati moltissimi hacks e soluzioni.

L’impiego è facilissimo, infatti basta posizionare la stringa:

[code lang=”html”]<script src="css_browser_selector.js" type="text/javascript"></script>[/code]

tra i tag <head></head> e successivamente abbinare le proprietà CSS con una classe che richiama il browser a cui è riferita la soluzione

[code lang=”css”]
html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac .ie .mylink { font-weight: bold; }
[/code]

A questo punto la questione èmorale: bisogna scegliere se utilizzare oppure no gli hacks CSS!

Come per ogni cosa, anche per questa vi sono i sostenitori ed i detrattori all’impiego degli hack sui CSS: per i primi gli hack sono una necessità alla maggiore compatibilità tra browser, mentre per i secondi risultano come una macchia alla pulizia del codice.

Ai posteri l’ardua sentenza.

P.S. Il titolo l’ha scelto Elia