Un design web compatible avec tous les navigateurs.

Bienvenue! N'oubliez pas de vous abonner au flux RSS ou de suivre Geekly News sur Twitter. Bonne visite!

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.

Insérez le code suivant entre les balises <head></head> de votre code Html :

< ?php
//$_SERVER["HTTP_USER_AGENT"] : variable donnant le navigateur
if (ereg("MSIE", $_SERVER["HTTP_USER_AGENT"])) {
    //Internet explorer
    echo "
";
} else if (ereg("^Mozilla/", $_SERVER["HTTP_USER_AGENT"])) {
    //Mozilla - Firefox
    echo "
";
} else if (ereg("^Opera/", $_SERVER["HTTP_USER_AGENT"])) {
    //Opera
    echo "
";
} else {
    //Les autres
    echo "
";
}
?>

Créez les différentes feuilles de style à utiliser, puis téléchargez-les sur votre serveur.
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!

À propos de l'auteur: Benoit

Cette zone est en train d'être peaufinée... Et donc il faut inséreer un texte suffisemment long pour juger de son apparence. C'est intéressant n'est-ce pas?

2 commentaires

Christophe Lefevre dit :
15 mars 2008 à 22 h 12 min

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

Bienvenu dans la blogosphère.

PS: Ya de la place comme rédacteur sur Smashingcoding…
Ben dit :
16 mars 2008 à 15 h 17 min

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!