Les techniques et outils à disposition des standards du Web

par lena · 7 octobre 2009

Les techniques et outils - Standards du Web

Mise en pratique

Du fait que cela dépasse le scope de ce tutoriel, la mise en pratique et l’utilisation des standards pour la création d’une page web est abordée dans un autre tutoriel complémentaire de celui-ci.

Nous allons par contre, continuer par l’exploration des techniques à mettre en œuvre, pour obtenir un code plus propre et contrôlé.

Bascule sur DOCTYPE

Que se passe t-il, lorsqu’une page web a été développée à l’époque ou un navigateur ne gérait pas l’intégralité des CSS, ou que les styles n’étaient pas interprétés de la même manière (par exemple IE et son modèle de boite qui est différente entre la version 6.0 et la version 7.0). Nous allons explorer cette situation un peu plus bas dans l’animation de présentation.

Les navigateurs ont intégrés cette particularité sous la forme de divers modes de représentation. Le mode standard, qui considère que la page web est complètement compatible avec les versions en cours du navigateur et des standards, et le mode quirk, qui lui, interprète le contenu de la page comme l’aurait fait une des versions antérieures du navigateur.

Todd Fahrner, co-fondateur du WaSP et contributeur du W3C, proposa que les navigateurs intègrent ce basculement de mode, en fonction de la présence ou non d’un DOCTYPE bien formé en entête de document.

Mode standard, quirk ou almost standard ?

Seul Firefox possède sur la partie droite de la barre Web developper une petite icône qui indique le mode dans lequel le navigateur affiche la page.

D’autres navigateurs, comme Opéra, proposent un troisième mode, almost standard, ou ‘à la’ Internet Explorer. Quoiqu’il en soit, c’est assez intéressant de jouer avec le DOCTYPE sniffing, afin de s’assurer de la bonne interprétation de nos pages et du code CSS par les navigateurs.

compatMode

Il existe également une fonction JavaScript de la classe document, compatMode qui renvoie le mode utilisé par le navigateur. Créez un nouveau document HTML et tapez les lignes de code suivantes, entre les balises <body>, puis testez dans un navigateur :

<script>
    var mode = document.compatMode;
    alert(mode);
</script>

Vous obtiendrez une boite d’alerte indiquant CSS1Compat. Supprimez la première ligne de la page, c’est-à-dire le DOCTYPE, enregistrez la page et retestez dans un navigateur. Cette fois-ci, vous devriez obtenir une boite de dialogue indiquant BackCompat.

Essayez avec différents navigateurs, puis essayez également en modifiant le doctype. En entrant par exemple, une URL relative au lieu d’une URL absolue. Vous pourrez ainsi contrôler le comportement de chaque navigateur, en rapport avec le DOCTYPE sniffing.

Problématique de la largeur de boite

Comme nous venons de le voir, en jouant sur le DOCTYPE, Internet Explorer 7.0 peut passer d’un mode de représentation Standard à un mode de représentation Quirks. De ce fait, IE ne rend plus ces modèles de boites de la même manière, pour les versions antérieures du navigateur.

Durant plusieurs années, la question du modèle de boite, posait la question entre développeurs et éditeurs de navigateurs : est-ce que la largeur d’un bloc, équivaut à la largeur hors tout, c’est-à-dire, en comptant les marges intérieures et les bordures, ou alors la largeur d’un bloc ne tient pas compte de ces marges intérieures et bordures.

Là est la question. Microsoft à changé entre deux versions…. ce qui se traduit par : jusqu’à IE 6.0 la largeur englobe les marges intérieures. ce qui n’est plus le cas de IE 7.0. Pour en savoir plus sur l’utilisation des blocs en CSS, voir le tutoriel prévu à cet effet.

Navigateurs anciens et navigateurs modernes

Bien souvent on développe les sites en s’assurant d’une bonne portabilité inter-navigateurs comme Internet Explorer, Firefox, Opéra, Safari… mais on oublie presque tout le temps, les versions anciennes de navigateurs.

Il est certain que si nous nous référons aux diverses sources de statistiques sur l’utilisation des navigateurs, IE7, IE6 et Firefox tiennent la tête, laissant les alternatives relativement basses :

Mais vos projets peuvent être des marchés de niches et ne pas être pleinement concernés par des statistiques générales et moyenne de tout types d’utilisateurs confondus.

En conséquence, il faut anticiper le fait qu’une partie de vos utilisateurs puissent utiliser un navigateur plus ancien, qui ne prenne pas en compte certains aspects de CSS2. Le plus simple reste de prendre un des navigateurs les plus rugueux et toujours utilisé par certains groupes d’utilisateurs, Communicator, encore téléchargeable sur Netscape Browser Archive.

La question maintenant est de déterminer si la page est lue sur un navigateur ancien ou un navigateur moderne. Il existe diverses solutions, dont certaines en JavaScript, mais là encore, nous allons essayer d’en rester à l’utilisation des standards.

En fait, la solution est toute simple, il suffit d’utiliser deux feuilles de styles, non pas deux feuilles qui interpretent la même chose différemment, mais au contraire, deux feuilles complémentaires, l’une de l’autre.

La première contiendra toutes les informations interprétables par les vieux navigateurs et la seconde définira toutes les descriptions complexes que les vieux navigateurs ont du mal à reproduire. La première feuille sera lié par une balise <link> et la seconde utilisera l’instruction @import url(), qui n’est pas reconnue par les vieux navigateurs :

<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
  <!--
  @import url("styles.css");
  -->
</style>

S’assurer des compatibilités

test_browser.htm

Pour illustrer cette fonctionnalité, utilisez, soit le fichier test_browser.htm, soit créez un nouveau document HTML et saisissez deux phrases en balises paragraphes <p> et ayant chacune respectivement une classe (ou un attribut) ancien et moderne :

<p id="ancien">Ceci est un navigateur ancien</p>
<p id="moderne">Ceci est un navigateur moderne</p>

Ensuite, utilisez ou créez deux feuilles de styles moderne.css et ancien.css qui seront inverses : la première affichant l’id (ou la classe) moderne et masquant l’id (ou la classe) ancien, et la seconde faisant l’inverse :

moderne.css

#moderne {
  display:block;
}
#ancien {
  display:none;
}

ancien.css

#ancien {
  display:block;
}
#moderne {
  display:none;
}

Au niveau de la liaison des styles, prenez soin de lier la première (l’ancienne) et d’importer la seconde (la moderne). Par contre, dans cette démonstration, il est important que la feuille de style moderne.css soit importée après que la la feuille ancien.css ait été liée, sinon la seconde écraserait la première pour les navigateurs modernes.

Taille et unités entre Mac et PC

Gestion des plug in et validation du code

WAI et Accessibilité

L’accessibilité est une des préoccupations principales de la bonne utilisation des standards du web. Mais bien au delà de la simple prise en compte de la bonne lisibilité des pages web d’un site, il faut également penser à prendre en compte, les documents pluri-média que comporte le site.

C’est-à-dire qu’il faut également prendre en considération, l’ensemble des documents mis à disposition sous forme de téléchargement, comme les documents PDF. Il faut également intégrer les animations, interactives ou pas, réalisées sous Flash.

Parrallèlement à l’aspect consultable du site, il faut inclure et englober dans la démarche d’accessibilité, la structure et les documents de réalisation du site. C’est-à-dire les codes sources HTML ou xHTML, les feuilles de styles CSS, l’interaction JavaScript, etc…

Code source et documents de réalisation devront être commentés et rendus accessibles pour tous les membres de l’équipe de réalisation actuelle et à venir.

Le livre collectif, Web Accessibility paru chez Friendsof Ed, permet d’aborder l’ensemble de ces points et bien plus encore. Pour l’instant, Puce et Média n’a pas publié de tutoriel sur le sujet.

N’hésitez pas à nous dire si vous souhaitez plus d’informations sur l’accessibilité. Il existe également le site du W3C qui aborde la WAI (Web Accessibility Initiative) et la Section 508 du Federal Rehabilitation Act.

accesskey

Une implémentation de l’attribut acceskey est une manière de permettre aux utilisateurs d’utiliser autre chose que la souris, pour naviguer entre les pages, remplir des formulaires, ou activer d’autres mécanismes…

Seulement, la recommandation de cette fonctionnalité n’a pas su s’imposer comme standard, ni faire la place, par rapport à toute autre famille de raccourcis claviers ou combinaison de touche, déjà active sur les navigateurs ou systèmes d’exploitation… Sans réinventer l’eau chaude, il existe pas mal de papiers sur le sujet… donc à vos mirettes :

En conclusion, il est important de prévoir une page du site, accéssible rapidement et facilement, qui reprend l’ensemble des accesskey et donne leur liaison. Un peu comme l’initiative du site Sanejouand. Analysez leur approche, en vous rendant sur la page d’accueil, et en désactivant les CSS, ou encore utilisez la même démarche sur le site de Spazowham Design Group.

outils de création

Dreamweaver prend en charge les lecteurs d’écran JAWS pour Windows de Freedom Scientific et Window-Eyes de GW Micro.

outils de validation

Le code est-il correct…a t-on pensé à tout ?

Une fois les pages du site développées, il est important de s’assurer du bon respect des standards. Il existe diverses possibilités de contrôles.

Si vous travaillez avec Dreamweaver, il existe deux outils de contrôle situés dans la fenêtre résultat : Fenêtre > Résultats, il s’agit de l’outil Validation et de l’outil Vérification de la compatibilité avec les navigateurs.

Il existe également un grand nombre d’extensions Firefox qui permettent de vérifier la validité des pages en cours de consultations, comme Page Validator, ou encore le menu Tools de la barre Web Developer.

Des sites de contrôles et validation de page HTML, CSS, etc…

Une fois les pages validées

Une fois vos pages validées et conformes au bon respect des standards, il existe une série de logo que vous pouvez aposer sur votre pied de page, pour informer vos internautes du bon respect des standards.

Côté technique, quelques adresses de bons plans…

Enfin, durant votre travail de concepteur intégrateur web, vous allez rencontrer des situations et des contextes qui vont vous paraître sans issus.

Il est toujours intéressant de faire partie d’une communauté de développeurs et pouvoir participer à des mutualisations de compétences, sur des domaines aussi vaste que peut-être, l’utilisation et le respects des standards face à la multitude et à l’hétérogénéité des navigateurs et de leurs nombreuses versions, si différentes les unes des autres.

Evolutivité des styles et optimisation de la structure

Bien souvent, on concentre l’ensemble du code CSS au sein d’une page unique. Cela s’avère productif à court terme, mais reste assez réducteur, lorsqu’il s’agit de décliner ou de modifier les propositions d’identité visuelle.

En clair, si l’ensemble des sélecteurs et des descriptions sont concentrées sur la même feuille de style, comment optimiser la productivité et la gestion de nos styles, si par exemple : une balise <h2> soit affichée en Arial corps 1.8 em de couleur bleu sur une page et en Arial corps 1.8 em de couleur verte sur une autre page.

Ou si des tableaux doivent avoir un aspect spécifique sur la présentation de l’entreprise et une autre représentation dans la grille des tarifs. Ou encore, lorsque l’on prévoit une mise en forme à gauche et une autre à droite.

Doit-on à chaque fois, modifier l’ensemble de la feuille de style, au risque de devoir modifier trop en profondeur et devoir à chaque fois corriger sur chaque déclinaison de style ?…

Pour cela, il peut-être judicieux d’envisager une stratégie sur la manière d’imbriquer et utiliser les feuilles de styles elles-même.

Une solution consiste à créer plusieurs feuilles de styles prenant en charge chacune un secteur différent, comme la typographie, les tableaux, la mise en page dans l’espace, les couleurs, etc…

Seulement le hic, c’est que chacune de nos pages va alors devoir lier dans leur balise <head>, autant de feuilles que nécessaires…. de ce fait, il peut-être intéressant de se baser une fois encore sur l’utilisation de l’instruction @import url().

Il est certain que cette stratégie pourrait ne pas avoir à s’appliquer aux navigateurs anciens.

Aller plus loin

Design web : utiliser les standards

Jeffrey Zeldman

Développées par le W3C avec la collaboration des principaux acteurs de l'industrie du Web, les standards ne sont pas des règles immuables et contraignantes. Bien au contraire, leur mise en oeuvre garantit : des coûts de redesign et de maintenance réduits, un affichage plus rapide des pages,un meilleur référencement dans les moteurs de recherche et une augmentation de trafic vers le site, la pérennité d'un site conçu à partir de standards ouverts....

Bonnes pratiques des standards du web

Dan Cederholm

Bienvenue dans l'édition française du livre à succès de Dan Cederholm, Web Standards Solutions. Utiliser les standards du Web permet de créer des contenus pour le plus large public possible, tout en assurant leur compatibilité future. Ces standards garantissent aussi une meilleure compatibilité avec les différents supports d'affichage, par exemple les lecteurs d'écran, les téléphones mobiles et les ordinateurs de poche. HTML, XHTML et CSS sont trois exemples de technologies consid�...