mar 0804

Un design web compatible avec tous les navigateurs.
2:50 | Catégorie : Astuces | Réagir à ce billet »

En créant le thème de Geekly News, je me suis heurté à de nombreux problèmes de compatibilité entre navigateurs, et pour éviter tout problème d’affichage j’en suis venu à utiliser ce petit script Php pour appeler une feuille de style par navigateur.

Je rappellerai que contrairement à Firefox, Internet Explorer, la “bête noire” des web designers, ne respecte pas les standards établis par le W3C. Malgré tout, environ 55% des internautes utilisent quotidiennement le navigateur de Windows, contre 38% pour Firefox (source: W3Schools). Il faut donc couper la poire en deux et faire en sorte que tout le monde puisse profiter de la beauté de votre site!

La solution : appeler une feuille de style CSS par navigateur internet.

  1. Insérez le code suivant entre les balises <head></head> de votre code Html : 
    &lt; ?php
//$_SERVER["HTTP_USER_AGENT"] : variable donnant le navigateur
if (ereg("MSIE", $_SERVER["HTTP_USER_AGENT"])) {
    //Internet explorer
    echo "
<link href="%5C%22http://www.domaine.com/ieStyle.css%5C%22" rel="\" type="\" />";
} else if (ereg("^Mozilla/", $_SERVER["HTTP_USER_AGENT"])) {
    //Mozilla - Firefox
    echo "
<link href="%5C%22http://www.domaine.com/firefoxStyle.css%5C%22" rel="\" type="\" />";
} else if (ereg("^Opera/", $_SERVER["HTTP_USER_AGENT"])) {
    //Opera
    echo "
<link href="%5C%22http://www.domaine.com/operaStyle.css%5C%22" rel="\" type="\" />";
} else {
    //Les autres
    echo "
<link href="%5C%22http://www.domaine.com/autreStyle.css%5C%22" rel="\" type="\" />";
}
?&gt;
  2. Créez les différentes feuilles de style à utiliser, puis téléchargez-les sur votre serveur.
  3. Le tour est joué, il n’y a plus qu’à ajuster les différentes feuilles CSS pour que votre magnifique mise en page soit restituée quelle que soit la machine!

J’espère vous avoir aidé. Si jamais vous avez des questions ou des remarques, n’hésitez pas à laisser un commentaire!



Cet article a été publié le Mardi 4 mars 2008 à 2:50 et est classé dans Astuces. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.

2 commentaires pour le billet “Un design web compatible avec tous les navigateurs.”

  1. Christophe Lefevre dit :
    15 mars 2008 à 22:12

    hum pas sur que ce soit l’idéal, je préfère les hacks . Par exemple, là sur ton blog, j’ai une barre de défilement horizontal en 1280!!! Tu vas donc devoir modifier 4 feuilles de CSS afin de corriger ça :D

    Bienvenu dans la blogosphère.

    PS: Ya de la place comme rédacteur sur Smashingcoding…

  2. Ben dit :
    16 mars 2008 à 15:17

    Merci pour ta remarque Christophe. Je me suis empressé de corriger ce défaut que j’avais oublié! J’avoue que l’utilisation de quatre feuilles de style, c’est laborieux. En fait, c’est surtout pour le positionnement que cette technique m’a aidé.

    Merci pour ton accueil dans la blogosphère!

Laisser un commentaire