Critère « 156 »

Nom :
156
Description :
Les styles en ligne sont utilisés de manière appropriée.
Cré(é) le :
21 avril 2010
Automatisé(e) :
Semi-automatisé
Objectif(s) :

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.

Solution(s) technique(s) :

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.

Moyen(s) de 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érogations:
(non renseigné)
Remarques:
(non renseigné)
Niveau :
Niveau 3
Thématique :
Code
VPTCS :
Technique
Processus :
Intégration
Exigences :
Accessibilité
Workshop :
validée