Télécharger le PDF du cours
La compatibilité intra-navigateur, inter-navigateurs et relatives aux différents appareils du code
Le problème de compatibilité et de consistance du code n’est pas nouveau : il y a quelques années seulement de cela, le web était beaucoup plus décousu qu’aujourd’hui et les règles n’étaient pas encore fixées.
Jusqu’au début des années 2000, Microsoft n’avait pas de concurrent sérieux et utilisait de sa puissance économique afin que son navigateur Internet Explorer (aujourd’hui appelé Edge) soit installé par défaut sur toutes les machines.
Cela permettait à Microsoft de s’offrir des libertés et notamment celle de développer de nouveaux standards de code ou d’implémenter des codes d’une façon différentes des autres.
Ensuite, dans les années 2000, de nouveaux acteurs sérieux ont fait apparition et ont commencé à se livrer une guerre économique. A cette époque, il était courant que différents navigateurs implémentent de manière totalement différente certains codes et utilisent leurs propres normes.
Ainsi, certains éléments ou attributs HTML par exemple n’étaient pas supportés par certains navigateurs et on devait donc créer des codes différents afin que chaque navigateur affiche le résultat voulu.
Depuis quelques années cependant, et grâce à l’impulsion du W3C qui n’a cessé de pousser des standards de développement, on assiste à une homogénéisation et une uniformisation de la prise en charge des codes sur la plupart des navigateurs sérieux. Cela est une excellente nouvelle pour nous, développeurs.
Cependant, tout n’est pas encore parfait comme on a pu le voir avec la prise en charge de l’attribut download par exemple dans les leçons précédentes.
Aujourd’hui, cependant, il nous faut faire face à de nouveaux défis tout aussi importants qui sont des défis liés aux différents appareils utilisés par nos visiteurs et à l’ergonomie.
En effet, les langages informatiques ont évolué au cours de ces dernières années pour proposer toujours davantage de fonctionnalités pour répondre notamment aux technologies émergentes et aux nouveaux besoins des utilisateurs.
L’apparition de l’internet mobile et sur tablette a notamment considérablement complexifié les questions liées à l’ergonomie des sites web puisqu’il était hors de question d’afficher autant d’information ou d’avoir des pages aussi lourdes sur mobile que sur un ordinateur de bureau classique par exemple.
Il faudra donc toujours garder ces questions en tête lorsque nous développerons nos propres projets et bien réfléchir en amont pour produire le résultat le plus conforme à nos attentes possibles.
Les entités HTML
Le HTML possède des caractères réservés. Par exemple, vous ne pouvez pas écrire les signes « < » et « > » tels quels dans vos pages web, tout simplement car le navigateur pensera que vous venez d’ouvrir une balise d’élément.
Pour remédier à ce problème, nous allons devoir « échapper » ces caractères réservés en utilisant ce qu’on appelle des entités HTML. Les entités vont être des suites de caractères représentant un caractère réservé en HTML.
Voici quelques-unes des entités les plus courantes et leur signification :
| Nom de l’entité | Résultat visuel |
|---|---|
| < | < (chevron ouvrant) |
| > | > (chevron fermant) |
| & | & (esperluette) |
| | (espace insécable) |
Nous connaissons déjà certaines de ces entités comme l’entité   (pour « non-breaking space ») qui sert à créer une espace insécable en HTML.
Voyons immédiatement un exemple d’utilisation de ces entités :
See the Pen Cours HTML CSS 2.12 by Pierre (@pierregiraud) on CodePen.
Tester la validité de son code
Vous devez toujours vous efforcer d’écrire un code valide. Cela évitera des bugs potentiels et votre site sera au final mieux référencé sur les moteurs de recherche.
Pour vérifier la validité d’un code HTML ou CSS, le w3c (World Wide Web Consortium), c’est-à-dire l’organisme qui gère l’évolution des langages lus par les navigateurs comme le HTML et le CSS entre autres, a mis à disposition des validateurs de code qui sont gratuits.
Vous pouvez trouver les validateurs HTML et CSS aux adresses suivantes :
Bonsoir Pierre Giraud,
Il s’agit ici d’une erreur que je veux partager avec vous.
2e En-tête: C’est compatibilité ou comptabilité ?
Si c’est donc compatibilité veuillez corriger svp, sinon merci pour vos cours j’adore ça depuis que je vous suis sur l’ancien site
Bonjour,
Merci c’est corrigé !