Je teste mon navigateur sous Acid2, c’est grave, docteur ?

C’est une bonne nouvelle pour tous les webdesigners et autres intégrateurs HTML et CSS : la prochaine mouture d’Internet Explorer (IE8) devrait passer le test Acid2. Enfin, c’est ce qu’on peut lire un peu partout (disons que c’est notre Laure Manaudou à nous, les webeux). Mais qu’est-ce donc que ce test ? Ne risque-t-on pas d’abimer notre navigateur à le passer ainsi à l’Acid ? Pour le savoir, je me suis lancé dans une petite « craduction » de la première partie de l’article Acid2: The Guided Tour paru sur The Web Standards Project qui se bat depuis longtemps pour l’adoption des standards du web par tous pour permettre l’accès du web pour tous.

Acid2 : la visite guidée

Acid2 est une page web créée par The Web Standards Project (WaSP) pour tester les navigateurs afin d’aider les éditeurs de logiciels de navigation à sortir des produits compatibles avec les fonctionnalités demandées par les designers web.

Ces fonctionnalités font partie des standards existants mais n’ont pas pour autant été correctement implantés dans les principaux navigateurs du marché. Acid2 tente de changer la donne en permettant aux navigateurs de se mesurer au test avant d’être diffusés.

Acid2 est une page web complexe pleine de fonctionnalités sous-utilisées car peu ou mal implémentées. Il a été conçu pour que tout le monde puissent vérifier facilement que son navigateur préféré « roxorise » ou pas. Dans le premier cas, un petit smiley apparait ; sinon le smiley sera déformé et/ou s’affichera partiellement en rouge.

Le but de ce document est d’expliquer le fonctionnement d’Acid2. Le balisage utilisé par la page de test est particulier dans la mesure où, sur une simple page, il doit tester de nombreuses fonctionnalités. Nous n’envisageons ni recommandons de concevoir une page web normale de cette manière, mais celà convient parfaitement pour ce test.

Si au premier coup d’oeil le code source est ardu, cette visite guidée vous en expliquera certains détails. La lecture de ce guide demande des connaissances techniques sur la façon dont le HTML, les CSS et le format PNG fonctionnent.

Note : Acid2 fait un usage intensif des datas URLs. Pour permettre aux clients web qui n’incluent pas encore cette fonctionnalité de passer le test, une version sans datas URLs est disponible.

Note : lors du test, assurez-vous d’utiliser les réglages par défaut de votre navigateur. La modification du niveau de zoom, de la taille minimum du texte, l’application d’un algorithme pour adapter la largeur du document à la taille de la zone de visualisation ou tout autre changement peut altérer le rendu de la page sous Acid2, sans pour autant être considéré comme un échec de compatibilité (ajouté le 21 juillet 2006).

Que sommes-nous donc en train de tester, au juste ?

Acid2 a été conçu si les fonctionnalités réclamées depuis longtemps par les designers web sont bien implémentées dans les navigateurs. Tout en restant dans le périmètre des standards du web, Acid2 n’inclut pas l’ensemble des spéfications et ne peut donc garantir aucune conformité vis-à-vis d’aucune d’entre elles.

Après ces précautions d’usage, nous avons sélectionné et testé les fonctionnalités que nous considérons comme les plus importantes pour le futur du web. Bien que ce test a été inspiré par l’annonce d’IE7 par Microsoft, il n’a pas été conçu pour un navigateur en particulier. Nous pensons qu’Acid2 mettra en lumière les problèmes dans tous les navigateurs courants.

Acid2 part du principe que les navigateurs sont compatibles avec HTML4, CSS1, PNG et Data URLs. les trois premiers éléments de la liste sont présents pour des raisons évidentes : ils forment la colonne vertébrale de tout contenu web. Les Datas URLs sont décrit dans HTML4 mais sont peu implantés. Nous pensons que les Datas URLs sont pratiques et utiles pour les webdesigners et faciles à implanter dans les navigateurs.

De plus, Acid2 considère que le navigateur utilise une résolution de 96 ppp, conformément au dernier appel du document de travail pour les CSS 2.1. Concernant les agents utilisateurs qui autorisent l’agrandissement des polices de caractère, le taux de 100% est retenu. Voici un aperçu des fonctionnalités les plus importantes testées par Acid2 :

• Transparence des images au format PNG — les yeux sont des PNG transparents.
• Elément object — les yeux sont attachés à une balise object. Pouvoir utiliser object (qui peut avoir un contenu alternatif) est l’une des plus anciennes demandes des webdesigners,
• Positionnement absolu, relatif et fixe — indispensable pour les mises en page avancées,
• Modèle de boite — le test Acid d’origine était axé sur le modèle de boite CSS. Acid2 continue le combat en testant les valeurs height, width, max-width, min-width, max-height et min-height.
• Tableaux CSS — il n’y a rien de mauvais à utiliser display: table pour la mise en page. C’est un puissant système de maquettage qui prend tout son sens sur les écrans larges bien que l’utilisation de tables puisse entrainer des désagréments. Pouvoir spécifier une mise en page de cette manière est important.
  CSS tables — There is nothing wrong with table layouts. It is a powerful layout model which makes sense on bigger screens. However, the table markup is troublesome as it ties the content to these screens. Therefore, being able to specify table layouts in CSS is important.
• Marges —Les CSS définissent des algorithmes précis pour le calcul des marges autour des éléments.
• Contenu généré — La possibillité d’ajouter des éléments décoratifs ou des annotations à une page web sans modifier le marquage a été réclamé depuis longtemps par les auteurs.
• Analyse des CSS — Acid2 inclus quelques déclarations CSS illégales qui devraient être ignorées par les navigateurs conformes aux directives.
• Paint order — nous vérifions que l’imbrication se fait dans le bon ordre. Ce n’est pas une fonctionnalité en soi, mais un pré-requis qui permet à d’autres fonctions de se dérouler correctement.
• Interlignages (Line-heights) — le test Acid2 vérifie quelques éléments-clés du modèle de boite CSS des éléments en ligne dont toute page web conforme aux standards dépend.
• Effet de survol (:hover) — un des éléments du smiley change de couleur au passage du pointeur. Savez-vous lequel ?

Vous devez prendre en compte qu’Acid2 s’affiche en mode standard. La page de test comprend un DOCTYPE qui signale que le navigateur devrait traiter la page conformément aux standards. Les développeurs de client web réticents à effectuer des changements dans la manière de rendre des documents anciens peuvent continuer à le faire sous l’appellation Quirks mode.

Qu’est-ce qui devrait apparaitre ?

Lorsque les choses se passent pour le mieux, le test Acid2 affiche une ligne de texte (Hello World) et un smiley dans une grille de 14×14. Chaque carré mesure 12 pixels de haut et 12 pixels de large. Le smiley possède un fond jaune avec un contour noir. Dans cette section, nous vous expliquerons comment tout celà a été créé.

Voilà, c’est fini…

La suite du texte est composé du découpage du smiley avec, à côté, un tableau récapitulant les éléments utilisés pour produire chaque ligne, les déclarations CSS mise en oeuvre ainsi qu’une courte description que je vous invite à consulter pour mieux comprendre le fonctionnement du test et des CSS par la même occasion.

N’hésitez pas à apporter votre grain de sel si vous pensez qu’une erreur s’est glissée à l’insue de mon plein gré ou si vous avez trouvé une formulation plus élégante, nottamment pour l’élément de liste « Tableaux CSS » et la traduction de « Paint order ». Merci d’avance !

PS : Je vous souhaite à toutes et à tous un joyeux nowel 😉

Note du 28/12/2007 : voir aussi (ou encore) l’article de Florent Verschelde sur le blog d’Alsacréations concernant les progrès du support CSS d’Internet Explorer 8.

PS2 : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.