blog sur le développement web, jquery,css3, Magento, Symphony, php et bien d'autres choses

feuille de style CSS en fonction du navigateur

Je connaissais le problème de compatibilité des « feuille de style CSS » qui n’allaient pas avec certains navigateurs web et j’en avais peur, car c’est là la cause principale de la calvitie chez les web développeurs😀. J’ai donc écris cet article pour expliquer comment charger et sélectionner la bonne feuille de style CSS en fonction du navigateur web et de sa version pour éviter justement tout problème de compatibilité. Pour cela il est important de détecter la version du navigateur web du client pour charger la bonne feuille de style CSS. cela évitera bien des problèmes d’affichage.

Aujourd’hui je m’aperçois qu’un de mes sites passe nickel sous internet explorer 8 = ie8 et Mozilla :fiou sauvé….non pas sauvé car sous internet explorer 7 alias ie7 mon site avait l’apparence d’un dessin d’enfant de cp. (bien que certains enfants de cp ont plus de gout que moi c’est sur :D) pour éviter tout problème d’affichage voici donc le code pour que la bonne feuille de style CSS soit prise en compte avec le bon navigateur web.

détection de la version du navigateur web du client et adapter la bonne feuille de style CSS

ces quelques ligne de code vont vous permettre de mettre en place un système de détection du navigateur. cette détection va récupérer la version du navigateur du client et il ne vous reste plus qu’a inclure la bonne feuille de style CSS.

//on pose la feuille de style css globale

<link rel= »stylesheet » href= »style.css » type= »text/css » />

// puis on test la version de ie dans le cas ou le client visite le site avec ie

<!–[if IE 7]>
<link rel= »stylesheet » href= »ie7.css » type= »text/css » />
<![endif]–>
<!–[if IE 8]>
<link rel= »stylesheet » href= »style.css » type= »text/css » />
<![endif]–>

autre méthode qui marche très bien, je l’ai testé ce matin même:

version PHP

<link rel= »stylesheet » href= »style.css » media= »screen » type= »text/css » />

<?php
if (ereg(« MSIE 7 », $_SERVER[« HTTP_USER_AGENT »]))
{

echo ‘<link rel= »stylesheet » href= »ie7.css » media= »screen » type= »text/css » />’;

}

?>

et pour aller plus loin dans la prise de tête avec internet explorer et les feuilles de style je vous conseil de télécharger et d’installer
IETester.

IEtester, la fin des problèmes de feuille de style CSS sous internet explorer

IETester est un emulateur de navigateur internet explorer de la version 5 au futures…..

parfait pour tester vos site et vous donner une idée du rendu. Il vous aidera à voir quelles feuille de style css charger en fonction de la version d’internet explorer

Commentaires sur: "Feuille de style, Navigateur web et problèmes de compatibilité" (3)

  1. Bonjour je me trouve face à un problème de ce genre… Disons que je fais un site avec wordpress et que ce site fonctionne sous firefox mais subit quelques petites modifications sous ie8 (pas testé avec ie7).

    Je voudrais juste savoir si la méthode était la même et de quelle façon nous pouvions identifier les balises css à modifier…

    En espérant ne pas trop vous déranger… Merci

  2. […] n°7: Feuille de style, Navigateur web et problèmes de compatibilité […]

  3. […] la même série je vous propose cette article sur la gestion des feuilles de style en fonction des navigateurs […]

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s