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!

  • Twitter
  • del.icio.us
  • Facebook
  • Technorati
  • LinkedIn

4 respostes a “CSS específics per a cada navegador”

  1. Lluís  on April 1st, 2010

    Molt interessant. Ho has pogut aplicar en alguna maqueta?

  2. Samuel  on April 1st, 2010

    Chapó aquest recurs per seleccionar navegador, sobretot ho podrem utilitzar per aplicar CSS3 sense cap problema :)

  3. Anna  on April 1st, 2010

    @Lluís
    Sip, Farmaquímica i el DVD TIC ho tenen. En realitat penso fer-ho servir a partir d’ara i mentre no surti una altra solució (tot i que crec que abans els navegadors vells acabaran per morir)

  4. Lluís  on April 1st, 2010

    Estupendo Anna, m’ho apunto jo també per la següent maqueta. A més a més, com diu en Samuel, tindrem molta flexibilitat per aplicar CSS3.


Deixa un comentari