Appliquer des attributs CSS seulement à un navigateur et/ou une version
- 04-10-2010
- Écrire un commentaire
Il existe de nombreuses possibilités pour cibler un navigateur avec CSS :
HTML
<!--[if IE 5.0]> pour IE 5.0 <![endif]-->
<!--[if IE 5.5000]> pour IE 5.5 <![endif]-->
<!--[if IE 6]> pour IE 6.0 <![endif]-->
<!--[if IE 7]> pour IE 7.0 <![endif]-->
<!--[if IE 8]> pour IE 8.0 <![endif]-->
<!--[if gte IE 7]> pour IE 7 et supérieur <![endif]-->
<!--[if lt IE 7]> pour IE inférieur à IE 7 <![endif]-->
<!--[if lte IE 6]> pour IE 5.0, IE 5.5 et IE 6.0 mais pas IE7.0 <![endif]-->
On peut alors charger un fichier CSS dans une de ces conditions.
Mais ça ne fonctionne que pour Internet Explorer.
Javascript
Avec jQuery, la fonction jQuery.browser permet de cibler un navigateur et une version.
Par exemple, on peut l'utiliser ainsi :
if (jQuery.browser.msie && parseInt(jQuery.browser.version) < 7) $('body').addClass('msieLte6');
Mais jQuery.browser est voué à disparaitre dans quelques années.
PHP
C'est la solution la plus sûre et qui marche avec tous les navigateurs.
Voici le code que je met pour la balise <body> :
<body class="<?php
class Browser
{
private $props = array("Version" => "unknown",
"Name" => "unknown",
"Agent" => "unknown") ;
public function __Construct()
{
$browsers = array("firefox", "msie", "opera", "chrome", "safari",
"mozilla", "seamonkey", "konqueror", "netscape",
"gecko", "navigator", "mosaic", "lynx", "amaya",
"omniweb", "avant", "camino", "flock", "aol");
$this->Agent = strtolower($_SERVER['HTTP_USER_AGENT']);
foreach($browsers as $browser)
{
if (preg_match("#($browser)[/ ]?([0-9.]*)#", $this->Agent, $match))
{
$this->Name = $match[1] ;
$this->Version = $match[2] ;
break ;
}
}
}
public function __Get($name)
{
return $this->props[$name] ;
}
}
$browser = new Browser ;
echo 'browserName-'.$browser->Name.' browserVersion-'.intval($browser->Version) ;
?>">
Ensuite, en CSS, je cible de cette manière :
.browserName-msie.browserVersion-6 #elementId {
attribut: 'valeur';
}
