Browser differenti, CSS differenti con JavaScript
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:
<script src="css_browser_selector.js" type="text/javascript"></script>
tra i tag <head></head> e successivamente abbinare le proprietà CSS con una classe che richiama il browser a cui è riferita la soluzione
html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac .ie .mylink { font-weight: bold; }
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
beh, a più di un anno dalla pubblicazione leggo qs articolo e ti devo troppo ringraziare!!
E’ davvero una figata, poi penserò a fare penitenza x aver usato l’hack, ma intanto mi hai risolto un problema
THX
Grazie a te! Per quanto riguarda gli hack, io penso che possano essere utilizzati, ma penso anche che se nel 2010 un browser si comporta in maniera non standard, a differenza degli altri, è meglio non prenderlo più in considerazione.
Ogni riferimento a browser ‘datati’ é puramente casuale
Grazie,
molto utile,… Adesso lo proverò!
@Lorenzo Fammi sapere come ti trovi
Provato, stupito, risolto un bel problema.
Grazie!
Ciao sai dirmi come si fa a scegliere un foglio css e caricarlo tramite javascript?
Esempio: ho 3 fogli css: “abc.css”, “123.css” e “hhh.css”. E dentro lo SCRIPT della mia pagina metto 3 if, in ognuno vorrei far caricare un diverso css.
@Deniss Puoi trovare qualcosa d’interessante qui: http://www.thesitewizard.com/javascripts/change-style-sheets.shtml