La class Brozeur !
Face aux problèmes de webdesign que posent certains navigateurs selon leurs versions, je vous ai déjà proposé plusieurs "solutions" : les hacks que tout le monde connaît, charger une feuille de style spécifique au navigateur et détecter les supports mobiles...
Aujourd'hui, je vous propose une autre possibilité, que j'ai utilisée à maintes reprises pour cibler un navigateur ou une page spécifique dans les CSS.
Pour cibler simplement un certain contexte via les css, il suffit d'ajouter une classe au <body> qui spécifie ce contexte; ainsi, j'ai utilisé une classe .page_accueil, .page_config etc afin d'introduire des spécificités au règles générales (plus une règle css est spécifiquement et précisément ciblée, plus elle est prioritaire sur les autres).
par exemple:
body { width:900px;background-color:grey;color:white;}
a{text-decoration:none;color:green;}
/* variante pour la page config */
body.config{width:500px;background-color:red;color:pink;}
body.config a{color:violet}
Pourquoi ne pas utiliser cette même technique pour ajouter dynamiquement à la balise body , via php, une classe spécifiant le navigateur ?
Je vous propose donc la fonction suivante, à inclure dans le header, par exemple:
function BrowserClass(){
$regex='#(msie)[/ ]([0-9])+|(firefox)/([0-9])+|(chrome)/([0-9])+|(opera)/([0-9]+)|(safari)/([0-9]+)|(android)|(iphone)|(ipad)|(blackberry)|(Windows Phone)|(symbian)|(mobile)|(bada])#i';
preg_match($regex,$_SERVER['HTTP_USER_AGENT'],$resultat);
echo ' class="'.preg_replace('#([a-zA-Z ]+)[ /]([0-9]+)#','$1 $1$2',$resultat[0]).'" ';
}
Lorsqu'on l'appellera depuis la balise body
<body <?php echo BrowserClass();?> >
elle ajoutera
<body class="Firefox Firefox16" >
Dans la feuille de style, il n'y aura plus qu'à cibler la classe générale (ici .firefox) ou celle qui précise le numéro de version en prime (ici .firefox16 ) pour effectuer les éventuelles corrections browser specifics 
Voilà quelques résultats selon les navigateurs:
-
class="MSIE MSIE6" (berk)
-
class="MSIE MSIE7"
-
class="MSIE MSIE8"
-
class="Chrome Chrome24"
-
class="Opera Opera9"
❝ 1 commentaire ❞
Fil RSS des commentaires de cet article
✍ Écrire un commentaire
les commentaires relevant du SPAM seront filtrés et dégagés direct...