Le Livre d'Argent

Note : l'ancienne version de cet article a été archivée (ainsi que les commentaires associés), mais les informations qu'elle contenait étaient incorrectes, incomplètes ou mal présentées, m'ayant conduit à le réviser entièrement. Divers moteurs d'indexation vous en fourniront peut-être une version de son état d'origine, mais je ne souhaite plus diffuser celui-ci moi-même, la version révisée ci-dessous le remplaçant.

Le Web, ai-je expliqué dans un autre article, est à peu de choses près la partie d'Internet que l'on affiche dans un navigateur. Cela nécessite que votre navigateur soit susceptible de comprendre comment est censé fonctionner ce Web, afin qu'il affiche ce qu'il faut d'une manière à peu près correcte. Malheureusement, tous les navigateurs ne le font pas parfaitement, aussi cet article a-t-il pour but de vous donner quelques explications sur la façon dont c'est censé fonctionner, et dont ça fonctionne réellement.

La notion de base est celle de langage. Visuellement, une page Web en contient au moins deux : le « langage naturel » dans lequel sont rédigés les propos tenus par l'auteur (le français, en ce qui concerne mon blog) ; et la disposition de la page, vous indiquant quels sont les éléments importants et comment ils s'enchaînent (par exemple, le fait que les colonnes latérales, si vous les affichez, soient situées dans des blocs à part, et avec une écriture de plus petite taille), que l'on pourrait qualifier de « langage visuel ».

En pratique, d'autres langages sont utilisés, qui servent aux différentes machines à comprendre ce qu'elles sont censées faire. Si cette notion de langue à destination des machines ne vous est pas familière, vous pouvez jeter un œil à cet autre article. Je passe pour cette fois sur les protocoles réellement utilisés pour le transfert des données, pour me concentrer sur la partie que le navigateur gère lui-même : les langages de mise en forme.

Le HTML (HyperText Markup Language) est un langage à balises(1) servant à décrire un document et ses métadonnées (au minimum titre et encodage ; éventuellement auteur, mots-clefs, etc.). Il ne sert qu'à fournir l'information pure, le style d'affichage étant déterminé par un autre langage utilisé conjointement, le CSS (Cascading StyleSheet). Il est techniquement possible d'insérer des directives CSS directement dans le document HTML ; mais cette pratique est plutôt déconseillée, et on préfère utiliser plusieurs fichiers séparés, ce qui permet notamment de changer grandement l'apparence du site en sélectionnant un fichier CSS plutôt qu'un autre.

Vous pouvez avoir un aperçu de ce genre de choses en changeant le thème de ce blog, par le menu « Style de la page » dans votre navigateur si celui-ci fournit cette fonctionnalité (ou en allant sur ma page de réglages conçue dans ce but). Pour des démonstrations plus impressionnantes, le site CSS Zen Garden est assez réputé comme exemple de ce genre de possibilités.

Le principe est donc que votre navigateur récupère le fichier HTML se trouvant à l'adresse que vous lui demandez, lit ce dernier, et suit les instructions qu'il contient. Parmi ces instructions se trouvent les adresses d'autres fichiers requis pour afficher complètement la page, dont notamment les fichiers CSS, ainsi que d'éventuelles images, qu'il va donc également récupérer en tâche de fond(2).

Pour ce qui concerne le texte lui-même, la plupart des instructions sont des informations sémantiques, indiquant à quoi servent les différentes parties du texte. À chacun d'entre eux est associé un style de base servant à le mettre en valeur, en fonction de sa nature, que le navigateur utilisera si les CSS récupérées ne lui donnent pas d'informations plus précises.

Par exemple, la balise <q> sert à indiquer une courte citation, insérée dans une phrase : le navigateur va donc l'entourer automatiquement de guillemets. La balise <strong> sert à renforcer un élément du texte, pour qu'il attire l'attention au premier coup d'œil : le navigateur va donc généralement l'afficher en gras.

Ces balises sémantiques servent également à d'autres supports que l'affichage par les navigateurs, notamment aux outils de lecture vocale utilisés par les personnes mal- ou non-voyantes (une balise <strong> sera par exemple traduite par une élévation de la voix). Leur usage à bon escient est donc nécessaire pour garantir que l'information présentée soit accessible à tous, ce qui est l'un des aspects essentiels à prendre en compte.

Il existe d'ailleurs plusieurs navigateurs « en mode texte », se lançant dans un terminal, qui sont incapables d'afficher les images ou de gérer le style CSS, mais qui prennent en compte les différentes balises sémantiques, et donc de les mettre en valeur par rapport au reste. Être utilisable par l'un de ces navigateurs est l'une des caractéristique d'un site bien conçu.

Pour s'assurer que tous les navigateurs comprennent de la même façon ces balises et les instructions CSS qui peuvent éventuellement les accompagner, il est nécessaire qu'existe une signification de référence. Un peu comme un dictionnaire pour une langue humaine, à la différence prêt qu'un dictionnaire est généralement description (« les gens utilisent ce mot pour vouloir dire ça »), tandis que le « dictionnaire » du Web doit plutôt être prescriptif (« cette balise doit avoir telle signification »).

On parle donc de normes, qui sont les règles à suivre pour garantir que les documents seront bien lisibles correctement, quel que soit le support utilisé (ou presque, j'y reviens un peu plus bas). L'organisme en charge d'établir ces normes est le W3C (World Wide Web Consortium), constitué d'entreprises et d'universitaires (il y a des gens de mon labo qui participent aux groupes de réflexion).

Par le passé, le W3C décidait de ces normes par tir groupé. Il y a eu, par exemple, les normes « HTML 4 », « XHTML 1.1 » et « CSS 2.1 ». Ce fonctionnement n'est cependant pas forcément toujours pratique, et la politique a changé ces dernières années : il n'y a plus une version unique portant sur tous les aspects, mais la norme est désormais constituée de plusieurs éléments qui évoluent chacun de leur côté et sont validés séparément.

Ainsi, de nombreux aspects de ce que l'on appelle encore communément « HTML 5 », même si le numéro de version est désormais de trop, ont dores et déjà été validés et font partie de la norme actuelle, tandis que d'autres sont encore en cours de discussion et ne sont pas encore prêts pour être réellement utilisés.

Il y a donc, naturellement, des différences entre les navigateurs, selon l'avance qu'ils prennent sur l'officialisation de certains éléments (mettre en place la reconnaissance d'une instruction avant qu'elle ne fasse partie de la norme permet de la tester et de l'améliorer). Moins naturellement, il y a également certains retards sur les éléments déjà officiellement normés, ce qui est parfois plus problématique.

De gros progrès ont été réalisés depuis, mais jusqu'à sa version huit incluse(3), le navigateur Microsoft Internet Explorer, navigateur par défaut dans Windows, avait par exemple un retard particulièrement important, notamment au niveau de la gestion du CSS. Dans le même temps, il proposait certaines instructions qui, si elles n'étaient pas toutes inintéressantes, ne ressemblaient à rien de connu et ne fonctionnaient donc qu'avec ce navigateur, ce qui rendait les sites qui les utilisaient assez difficilement lisibles(4).

L'ancienne version de cet article, qui datait de cette époque, conseillait donc d'éviter autant que possible ce navigateur, ainsi que ses dérivés. Je sais que d'énormes progrès ont été faits depuis ; mais je ne sais pas trop jusqu'à quel point ; je m'abstiendrai donc de faire des conseils à ce niveau. Je ne peut tout de même que conseiller d'utiliser des navigateurs libres et respectueux de la vie privée, mais c'est un autre point, distinct de celui du respect des normes.

Faisons néanmoins davantage connaissance avec les différents navigateurs. Il y en a à la fois beaucoup et très peu, selon le point par lequel on regarde : plein d'interfaces différentes, offrant de nombreuses possibilités ; mais finalement assez peu de différences à l'affichage. Cet affichage est géré par ce que l'on appelle un « moteur de rendu », qui est la partie qui effectue véritablement le travail que je vous ai décrit ci-dessus ; le reste (gestion des onglets, des marque-pages, etc.) était fait ailleurs.

Il n'existe en fait actuellement que trois moteurs de rendus, dont un particulièrement répandu. Commençons donc par les autres : le moteur de rendu d'Internet Explorer se nomme Trident, et il est également utilisé par d'autres navigateurs pour Windows(5), comme Avant Browser. N'étant pas porté sous d'autres systèmes, il n'est pas celui qui s'est le plus imposé en dehors de son navigateur de base.

Fut une époque, le moteur de rendu gecko, développé pour le célèbre navigateur Mozilla Firefox(6), était assez populaire, et utilisé par plusieurs autres navigateurs. Cependant, depuis le changement du cycle de développement et à l'abandon du support par la Fondation Mozilla, la plupart de ces navigateurs n'ont pas réussi à suivre et ont été, me semble-t-il, plus ou moins abandonné, ou bien ont changé de moteur. À ma connaissance, Firefox est le seul(7) navigateur à l'utiliser encore.

Celui qui nous reste est donc Webkit, utilisé dans la plupart des autres navigateurs. Ce moteur est principalement développé par Apple, qui l'a conçu pour leur navigateur Safari (en reprenant et en corrigeant le moteur KHTML, de l'environnement KDE, qui avait bien besoin de ce dépoussiérage). Toutefois, on peut tout de même considérer qu'il y a, en quelque sorte, plusieurs Webkit différents, dans la mesure où il existe plusieurs implémentation, utilisant des bibliothèques graphiques différentes, et ayant donc parfois quelques petites différences de comportement entre les versions.

Parmi les navigateurs l'utilisant, on peut citer notamment Midori et QupZilla, tous deux libres (comme l'est également Webkit) ; ainsi que d'autres navigateurs plus problématiques, comme les Chromium et Chrome de Google (lisez les articles sus-mentionnés si vous ne voyez pas en quoi ils sont problématiques). Cependant, à leur sujet, il me semble avoir lu que Google était en train de séparer son développement de celui du Webkit de base (ce que l'on appelle, dans le jargon informatique, un fork), ce qui fait qu'un quatrième moteur de rendu, distinct des autres, est en train de voir le jour, sous le nom de Blink.

Ceci compense une disparition récente : jusqu'à il y a peu, le navigateur Opera utilisait son propre moteur de rendu, Presto ; mais l'équipe en charge de son développement a récemment décidé de l'abandonner au profit de ce nouveau venu, Blink. Comme Presto n'était pas placé sous licence libre, il a malheureusement toutes les chances de disparaître.

Bon, ceci étant dit, et pour éviter de m'avancer dans davantage de considérations de cet ordre (Si vous désirez davantage de détails sur l'historique et l'évolution des différents navigateurs, que j'évoquais je crois plus longuement dans l'ancienne version de cet article, je vous renvoie à cette page de Wikipédia), parlons maintenant en quelques mots de ce blog.

Depuis sa dernière mouture, j'ai décidé d'y intégrer pleinement toutes les nouveautés me semblant utile dans les normes HTML et CSS, après avoir un peu trop traîné à les mettre en place. Ça commence à faire un moment, et tous les éléments que j'ai intégré jusque là sont normalement fonctionnels sur plus ou moins tous les navigateurs. Je suis donc pour ma part assez satisfait d'avoir un site à la fois présentable, valide et utilisant la valeur sémantique des balises à bon escient, ce qui n'est malheureusement pas le cas de tous les autres sites.

Cependant, je ne l'ai testé que sur des navigateurs libres, respectueux, et compatible avec le système que j'utilise : je ne peux donc pas garantir une compatibilité parfaite. D'autant que je prévois, peut-être, quand j'aurai le temps (chose qui, bizarrement, a plutôt tendance à manquer quand on travaille sur une thèse en ayant une vie associative pas trop mal remplie), d'en reprendre certains aspects pour proposer quelques nouveautés. N'hésitez donc pas à signaler les éventuels problèmes ; ainsi je pourrai faire de mon mieux pour les arranger.