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

Articles tagués ‘navigateurs’

Feuille de style, Navigateur web et problèmes de compatibilité

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 :D. 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

Free the foxes

Free The Foxes  est un plug-in sympa qui permet de signaler à l’utilisateur que son navigateur n’est pas adapté au site qu’il visite.Un bon outil pour contourner les problèmes de compatibilité entre certains site et certains navigateurs( ie6 hum hum ie tout court hum hum)  Une pop-up s’ouvre et lui suggère de télécharger un vrai navigateur( Firefox par exemple ^^).

free the foxes est tres simple d’utilisation:

on include le code suivant juste avant la balise fermante </body>:
<script src= »http://freethefoxes.googlecode.com/svn/trunk/latest.v2.js &raquo; type= »text/javascript » charset= »ISO-8859-1″></script>
<script type= »text/javascript » charset= »ISO-8859-1″>
var ftf = new ftf();
ftf.init();
</script>

Suivre

Recevez les nouvelles publications par mail.

Rejoignez 295 autres abonnés