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"
etc
 
A noter que vous pouvez faire la même chose avec la balise <html> de la page au lieu du body... ça fonctionne sur tous les navigateurs que j'ai testés.

❝ 1 commentaire ❞

1  jerrywham le

C'est la classe à Dallas ! Merci.

 

Fil RSS des commentaires de cet article

✍ Écrire un commentaire

les commentaires relevant du SPAM seront filtrés et dégagés direct...

Quelle est le troisième caractère du mot cxnkd ?