CSS Coverage

Le CSS Coverage est un ensemble de commandes pour les outils de développement de Firefox qui aide à améliorer du CSS désordonné en mettant en évidence le CSS qui n'est pas "utilisé" et en indiquant les parties du fichier CSS nécessaires au rendu initial.

Cet outil est quelque peu expérimental, car la définition "d'utilisation" du CSS est compliquée. Ce guide a pour ambition d'expliquer comment cet outil fonctionne.

Cet outil est généralement utilisé de la façon suivante :

• Lancer le tracker de coverage ("csscoverage start")
• Visiter un ensemble de pages représentatives du site web à analyser.
• Arrêter le tracker ("csscoverage stop") et voir les règles non utilisées dans l'Éditeur de style.
• Voir le rapport ("csscoverage report") contenant les règles qui pourraient être mis en ligne (in-lined) dans chaque page.

Une autre commande ("csscoverage oneshot") permet de lancer ("csscoverage start; csscoverage stop").

Que veut dire "utiliser" ?

TL;DR:

Le CSS coverage vérifie que le sélecteur tag#id.class dans l'exemple ci-dessous, existe dans un ensemble de pages webs :

@media thing {
  tag#id.class:hover {
    foo: bar;
  }
}

Pourquoi ?

Supposons que le CSS possède ce genre de propriété :

<style>
  span:hover {
    color: purple;
  }
</style>

<span>Test</span>

Si durant ce test, la souris n'est pas entrée dans le <span>, est-ce que la règle a été utilisée ?

Techniquement parlant, la règle span:hover n'a pas été utilisée dans le sens ou le mot "Test" n'a jamais été coloré en violet. Cependant, Le CSS coverage se concentre principalement à voir quelles règles sont pertinentes ou non pour la page. Dans ce cas, span:hover est visiblement pertinent pour la page.

Supposons également que le CSS possède ce genre de propriété :

<style>
  @media tv {
    span {
      color: purple;
    }
  }
</style>

<span>Test</span>

Devrait-il être obligatoire de se connecter depuis une télévision pour mesurer la pertinence de cette règle ?

Mais "l'utilisation" n'est pas seulement une affaire de pertinence...
Est-ce que la règle suivante est pertinente ?

<style>
  span { }
</style>

<span>Test</span>

Il est possible d'affirmer que cette règle n'est pas pertinente, car elle n'a pas d'effet sur la page et peut donc être retirée sans danger.

Cependant qu'en est-il du code suivant :

<style>
  span {
    -o-text-curl: minor;
  }
</style>

<span>Test</span>

Savoir si cette règle est utilisée ou non requiert l'utilisation d'un moteur de recherche et des compétences analytiques, et peut être même des connaissances sur les versions des navigateurs supportés par le site. Ceci est donc considéré hors de portée de cet outil, du moins jusqu'à la singularité.

Cela explique également pourquoi la règle appliqué aux div dans l'exemple suivant est considéré comme "utilisée"

<style>
  div { color: red; }
  span { color: blue; }
</style>

<div><span>Test</span></div>

Il est possible d'affirmer que la règle div n'est pas utilisée puisqu'elle n'affecte pas le rendu final de la page. Cependant si l'on considère la définition alternative suivante :

<style>
  div { color: red; border: none; }
  span { color: blue; }
</style>

Il est alors difficile de savoir si la règle de bordure est utilisée, et il existe beaucoup d'autres variations. L'opacité, la visibilité et les conversions de couleurs par exemple compliquent encore la définition "d'utilisation". Pour garder une définition simple, "utilisée" signifie que le sélecteur correspond ç au moins un élément.

Si une feuille de style incluse dans un test contient une règle qui ne s'applique que pour une page particulière qui n'a pas été visitée lors du Test, alors bien évidemment cette règle sera marquée comme "non-utilisée" malgré le fait qu'il existe des moments ou cette règle est utilisée. Il est donc recommandé de doubler les vérifications avant d'enlever des règles des fichiers CSS.

Avertissements

Il est à noter que :

• L'outil présume qu'une URL retourne le même ensemble d'octets chaque fois qu'elle référencée lors de la période de test.
• Les feuilles de style alternatives ne sont pas traquées.

Bugs

La résolution de certains bugs importants est actuellement en travail :

• Les changements du CSSOM via JavaScript ne sont actuellement pas traqués. Cela inclu l'ajout de feuilles de styles. Voir le bug 1007533.
• Le markup dans l'Éditeur de style est fait ligne par ligne et, les sources-maps ne sont pas encore supportées. En conséquence, l'analyse devient confuse si le test est réalisé sur du CSS compressé. Voir le bug 1007073.
• Les informations @keyframe ne sont pas incluses dans le résumé de préchargement. Voir le bug 1034062.