CSS específics per a cada navegador
Fa temps, l’única forma que hi havia per poder fer dissenys web visibles per a tots els navegadors era mitjançant “hacks” en css. El problema era que navegadors antiquats com l’ie6 tractaven elements com els margins o paddings de forma diferent. Per exemple, duplicant les mides (10px de padding es podien convertir en 20px), no acceptant la propietat :hover excepte per les etiquetes d’enllaç <a>, o fins i tot tractant les mides amb la seva pròpia interpretació dels píxels.
La solució a aquest handicap era la d’utilitzar hacks (faltes d’ortografia) que només els navegadors d’Internet Explorer vells detectaven i acceptaven com a preferents. Així, si posàvem un asterisc (*) davant d’un element (ja fos un tag html o una id/classe creada per nosaltres) l’ie7 el detectava i aplicava, mentre que els altres navegadors el saltaven veient-lo com un error de codi. En canvi, si volíem especificar algun valor només per a l’ie6, utilitzàvem un guió baix (_). El problema d’aquestes faltes ortogràfiques és que no obtenen la validació del codi, pel que si el que busquem és una pàgina validable i un codi net, aquesta no és una bona opció. Clar que també servia realitzar fulles d’estils úniques per a aquests dos navegadors mitjançant <!--[if ...]> <![endif]-->, si bé resultava una tasca més laboriosa.
Fa cosa d’un mes, vaig caure en una solució a l’etern problema del maquetador i els navegadors que ja s’estava utilitzant en un gestor de continguts i que també podria ser aplicable per a una web estàtica i/o dinàmica. Per què no utilitzar un script que detectés el navegador visitant i que, alhora, el classifiqués amb una classe concreta inscrita a l’etiqueta <body>? Així, sempre es podria incidir sobre el comportament del navegador sense haver de recórrer a cap tipus de hack no validable. La resposta era un JQuery molt senzill i perfectament configurable.
Tot i que cada cop més s’està restringint més la validació per a l’ie6 d’ençà que Google i YouTube es van negar a continuar donant-li suport, aquesta solució no només pot estalviar hacks i canvis d’estructures, sinó que a més ens pot permetre la personalització de dissenys segons navegador i versió i, fins i tot, Sistemes Operatius.
// Observa quin navegador és i li afegeix la classe que li definim al body
$(document).ready(function(){
var userAgent = navigator.userAgent.toLowerCase();
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
// És una versió d'IE?
if($.browser.msie){
$('body').addClass('ie');
// Afegim el número de la versió
$('body').addClass('ie' + $.browser.version.substring(0,1));
}
// És una versió de Chrome?
if($.browser.chrome){
$('body').addClass('chrome');
// Afegim el número de la versió
userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
userAgent = userAgent.substring(0,1);
$('body').addClass('chrome' + userAgent);
// Si és Chrome, JQuery pensa que és Safari, així que li hem de dir que no l'és
$.browser.safari = false;
}
// És una versió de Safari?
if($.browser.safari){
$('body').addClass('safari');
// Afegim el número de la versió
userAgent = userAgent.substring(userAgent.indexOf('version/') +8);
userAgent = userAgent.substring(0,1);
$('body').addClass('safari' + userAgent);
}
// És una versió de Mozilla?
if($.browser.mozilla){
// És Firefox?
if(navigator.userAgent.toLowerCase().indexOf('firefox') != -1){
$('body').addClass('firefox');
// Afegim el número de la versió
userAgent = userAgent.substring(userAgent.indexOf('firefox/') +8);
userAgent = userAgent.substring(0,1);
$('body').addClass('firefox' + userAgent);
}
// Si no, ha de ser una altra versió de Mozilla
else{
$('body').addClass('mozilla');
}
}
// És una versió d'Opera?
if($.browser.opera){
$('body').addClass('opera');
}
});
Amb això només caldrà que afegim el canvi que vulguem a la fulla d’estils i ens ho aplicarà de forma preferent pel navegador especificat. Per exemple:
.nom-de-la-classe { width:200px; }
.ie6 .nom-de-la-classe { width:250px; }
S’ha acabat duplicar fulles d’estils i escriure hacks!
Fragment extret de l’e-book 
Comentaris recents