Recentment he estat involucrat en la creació de pàgines web amb
crossbrowsing per a Internet Explorer 6,7,8 i FireFox 3,3.6 i 4.
Per crossbrowsing s'entén la creació de pàgines web que es vegin igual amb tots els navegadors.
És, doncs, l'art d'eliminar les diferències de visualització que hi han entre dieferents navegadors, entre versions d'un mateix navegador o entre un mateix navegador a diferents sistemes operatius.
Per exemple: les diferències de visualització entre Internet Explorer, FireFox i Chrome; les diferències de visualització entre Internet Explorer 6, 7,8 i 9; o les diferències de visualització entre Windows i Unix.
Un dels aspectes que dificulten el crossbrowsing és el model de caixes del CSS.
El model de caixes aplica a les capes i a un munt d'etiquetes. El model de caixes especifica els marges, el padding o espai entre els límits de la caixa i l'espai útil de la caixa, especifica la forma i mida de les vores de la caixa...
El model de caixes està definit en una especificació del WWW Consortium i l'honoren tots els navegadors importants, si més no en les seves versions actuals. És l'standard model. Ara bé, les versions antigues de l'Internet Explorer feien servir un model de caixes propi. I les versions modernes han optat per mantenir aquest model per a totes aquelles pàgines HTML que no tinguin DOCTYPE, o que el DOCTYPE defineixi la pàgina com HTML 3, com HTML 4 Transitional, o es tracti d'un document de framesets. El que es coneix com
Quirqs mode.
Això ens parla de la importància de donar un DOCTYPE adequat a les pàgines que tinguem que crear.
A Internet n'hi han un munt de pàgines que provoquen que l'Internet Explorer les visualitzi en quirks mode.
Per això, cal tenir present les diferències entre el model de caixes del quirks mode i el model de caixes estàndar.
La següent imatge, agafada de
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/, il·lustra aquestes diferències. Aquesta és una imatge clau que cal tenir present a l'hora de desenvolupar
La tècnica de desenvolupament tenint el cross-browsing en ment seguiria els següents principis:
1. desenvolupar per a un navegador base, per exemple Firefox.
2. separar tots els estils en un document css.
3. examinar el resultat en els navegadors per als que es vol garantir el crossbrowsing, per exemple Internet Explorer
4. fent us de condicionals. En el cas de Internet Explorer es disposa de les etiquetes <!--[IF IE nn ]> ..... <![END IF] --> (amb nn versió de IE).
Un bon motiu per a desenvolupar primer amb FireFox és que després és molt senzill associar uns CSS específics per al cross browsing amb IE fent servir les
etiquetes condicionals de l'IE. En canvi, si es pren IE com navegador base, aleshores cal utilitzar condicionals amb javascript per a associar CSS a Firefox.
El codi dels condicionals amb FireFox quedaria així
<link rel="stylesheet" type="text/css" href="/css/ff_css.css"/>
<!--[IF IE 7 ]>
<link rel="stylesheet" type="text/css" href="/css/ie7_css.css"/>
<![END IF] -->
<!--[IF IE 8 ]>
<link rel="stylesheet" type="text/css" href="/css/ie8_css.css"/>
<![END IF] -->
