Appliquer des attributs CSS seulement à un navigateur et/ou une version
- 04-10-2010
- Posté dans css . php
- É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';
}

Bonjour,
J'ai toujours été mauvais en script… mais encore pire en javascript (si cela est possible). Donc, je n'ai pas réussi à coller le code et à le modifier pour détecter Safari et modifier la CSS en fonction (Safari affiche nettement un plus petit caractère que tous les autres!).
Comment faire pour pointer l'utilisateur de Safari sur une CSS qui lui serait réservée?
Merci de toute aide.