Compatibilité des navigateurs, Intro
Vous créez un site, vous le testez sous firefox, et tout est beau! Vous êtes fiers de votre site et envoyez vos amis à l’adresse. Mais l’un d’eux vous dit que ça affiche mal. Les sections sont toutes de travers, les .png s’affichent mal, des boîtes sont au mauvais endroit, la taille des objet n’est pas celle que vous souhaitiez. Oups, il est sur Internet Explorer 6. Bien sur, vous avez oublié de tester sur tous les navigateurs.
J’ai exagéré l’exemple, mais pas tant que ça à bien y penser. La compatibilité navigateurs est un problème bien répandu et un aspect majeur à prendre en considération pendant tout le processus de développement. Et pour les moins habitués et pour les plus expérimentés, je vais vous donner des astuces, des “cheats” et des conseils pour améliorer votre travail.
Fichiers .PNG (Partie 1)
Quand on découvre les images png, on est rapidement tentés de l’utiliser partout dans nos projets web. Elle offre la gestion de la transparence, par une couche alpha, (qui permet la semi-transparence et le dégradé) contrairement au format .gif. La qualité d’image est aussi largement supprérieure, car les couleurs ne sont pas limités à 256, mais à 24 bits de couleur. Cependant, il y a une ombre au tableau : quelques navigateurs ne supportent pas ou que partiellement l’affichage des png. On parle principalement d’Internet Explorer 5 et 6. Il y en a d’autres, mais leur pourcentage d’utilisation en en deçà de 0.1% chacun.
Si vous insérez une image PNG sur votre site, elle sera quand même affichée sous IE5 et IE6, mais la transparence ne sera pas gérée. C’est suffisant pour gâcher une belle mise en forme du site. On ne doit plus s’empêcher d’utiliser ce format d’images pour cette raison, car c’est si facile de régler le problème. Je vous montrerai quelques façons simples, avec leurs avantages et inconvénients.
Fichiers .PNG (Partie 2)
J’ai failli commencer à écrire en anglais tellement j’ai lu de trucs en anglais aujourd’hui
Alors voilà pour le premier truc pour permettre un affichage adequat des fichiers .png dans vos projets web. Ce truc a été tiré à l’adresse suivante : http://homepage.ntlworld.com/bobosola/index.htm. Il consiste simplement, grace à un fichier javascript, d’appliquer la gestion de la transparence des fichiers. C’est une solution très simple et facile à utiliser.
Vous avez besoin de :
- Votre site
- Le code décrit plus bas.
Fichiers .png (partie 3)
Voilà, maintenant vous voulez des images png en background. Sans que IE fasse des siennes. Précédemment, on a vu un fix qui permet simplement de bien gérer les png quand elles sont appelées par une balise <img>. Quand elles sont en fond, c’est aussi possible, par cet autre fix. (more…)