Partager

Approfondir

Qualité Web le livre

Livre Qualité Web

Acheter

156 - Les styles en ligne sont utilisés de manière appropriée.

Thématique
  • Bonnes pratiques
  • Code
Phase Projet

Objectif

Améliorer le degré de séparation du contenu et de la présentation.

Alléger la source HTML des styles CSS qui peuvent être externalisés.

Faciliter l'adaptation de la mise en forme du contenu aux besoins de l'utilisateur en s'appuyant sur des classes plutôt que sur des mises en forme au cas par cas.

Mise en œuvre

Réserver le recours aux styles CSS en ligne (attribut style des éléments HTML) aux propriétés CSS qui ne peuvent pas être externalisées dans des feuilles de style externes et appliquées via des classes ou des identifiants.

Contrôle

Pour chaque page contenant des attributs styles dans le code généré, vérifier, à l'aide de la fonctionnalité Inspecter un élément de Firebug, dans le code HTML généré, que l'attribut style n'est présent que pour des propriétés qui ne seraient pas externalisables.

La bonne pratique doit être invalidée en présence de tout attribut style, sauf si les valeurs des propriétés CSS qu'il contient sont calculées à la volée par un script Javascript (par exemple, la valeur d'un width, celle d'un top dans le cas d'un positionnement, etc.). Si cette valeur ne peut pas être écrite à l'avance dans une CSS externe et appliquée à l'aide d'une classe ou d'un identifiant, le test est validé.

Quelques exemples :

  • <p style="color: red;"> est non conforme : la couleur peut être appliquée via une classe avec par exemple <p class="erreur"> ;
  • <div style="top: 323px;"> sera conforme si cette valeur est calculée par un javascript qui positionne dynamiquement l'élément en fonction de la hauteur d'affichage de l'écran : il est impossible de prévoir autant de classes que de valeurs possibles ;
  • En revanche, <div style="top: 50px"> sera invalidé si la valeur 50 px de ce positionnement est constante et ne dépend pas d'un javascript : elle peut alors être appliquée via une classe avec par exemple <div class="header">.

Découvrez la certification Opquast

Rejoignez la communauté des certifiés Opquast. Plus de 5000 professionnels formés à la qualité Web. Au programme une formation en ligne de 14h, un examen de 1h30, un badge et un score à mettre sur votre cv et votre profil linkedin.

Commander en ligne