Tous ceux qui ont déjà cherché à coder une page en HTML CSS savent à quel point faire une page qui s’affiche correctement pour tous les différents navigateurs est indispensable mais peut-être un casse-tête. Certains de ces navigateurs (Internet Explorer pour ne pas le citer) sont même carrément chiant pour ça. Il peut donc être nécessaire de modifier le code de la page en fonction de ce navigateur. Voici donc un bout de code qui permet cela.
Je vais essayer de vous montrer rapidement comment détecter le navigateur d’un visiteur. L’astuce provient de l’excellent blog de Nathan Rice. Elle requière des connaissances de PHP, mais sans être trop bête vous devriez pouvoir la copier-coller et l’utiliser pour votre blog.
Avant tout, vous devez ne pas être effrayé de modifier les fichiers de votre thème Wordpress. Pour cela, vous pouvez les extraire grâce à votre client FTP (FileZilla par exemple) puis les ouvrir avec un éditeur de texte (Notepad++ est redoutable dans le genre). Sinon, vous pouvez tout aussi bien les modifier depuis votre panel d’administration Wordpress, dans apparence -> éditeur — notez tout de même qu’il faut avoir auparavant modifié les permissions des fichier que vous vous appretez à modifier pour le CHMOD 755.
La modification que vous vous êtes sur le point de faire concerne le fichier functions.php de votre thème Wordpress. La plupart des thèmes Wordpress digne de ce nom en ont un, si ce n’est pas votre cas alors créez-en un.
Maintenant, entrez le code suivant :
<?php
add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';
if($is_iphone) $classes[] = 'iphone';
return $classes;
}
?>
Une fois que vous avez enregistré votre fichier, cela va automatiquement rajouter une classe CSS à la balise <body> du genre :
<body class="home blog logged-in safari">
A vous maintenant de rajouter dans votre feuille de style des class spéficiques à chaque navigateur !
Laissez votre commentaire