1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
---
title: CSS Coverage
slug: Outils/CSS_Coverage
translation_of: Tools/CSS_Coverage
---
<div>{{ToolsSidebar}}</div>
<div class="note">
<p>Cette fonctionnalité est expérimentale et n'est pas encore disponible dans Firefox.</p>
</div>
<p>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.</p>
<p>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.</p>
<p>Cet outil est généralement utilisé de la façon suivante :</p>
<ul>
<li>Lancer le tracker de coverage ("<code>csscoverage start</code>")</li>
<li>Visiter un ensemble de pages représentatives du site web à analyser.</li>
<li>Arrêter le tracker ("<code>csscoverage stop</code>") et voir les règles non utilisées dans <a href="/fr/docs/Outils/Éditeur_de_style">l'Éditeur de style</a>.</li>
<li>Voir le rapport ("<code>csscoverage report</code>") contenant les règles qui pourraient être mis en ligne (in-lined) dans chaque page.</li>
</ul>
<p>Une autre commande ("<code>csscoverage oneshot</code>") permet de lancer ("<code>csscoverage start; csscoverage stop</code>").</p>
<h2 id="Que_veut_dire_utiliser">Que veut dire "utiliser" ?</h2>
<h3 id="TLDR">TL;DR :</h3>
<p>Le CSS coverage vérifie que le sélecteur <span style="color: #008000;"><code>tag#id.class</code></span> dans l'exemple ci-dessous, existe dans un ensemble de pages web :</p>
<pre class="brush: css">@media thing {
tag#id.class:hover {
foo: bar;
}
}</pre>
<h3 id="Pourquoi">Pourquoi ?</h3>
<p>Supposons que le CSS possède ce genre de propriété :</p>
<pre class="brush: html"><style>
span:hover {
color: purple;
}
</style>
<span>Test</span>
</pre>
<p>Si durant ce test, la souris n'est pas entrée dans le <span>, est-ce que la règle a été utilisée ?</p>
<p>Techniquement parlant, la règle <code>span:hover</code> 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, <code>span:hover</code> est visiblement pertinent pour la page.</p>
<p>Supposons également que le CSS possède ce genre de propriété :</p>
<pre class="brush: html"><style>
@media tv {
span {
color: purple;
}
}
</style>
<span>Test</span>
</pre>
<p>Devrait-il être obligatoire de se connecter depuis une télévision pour mesurer la pertinence de cette règle ?</p>
<p>Mais "l'utilisation" n'est pas seulement une affaire de pertinence...<br>
Est-ce que la règle suivante est pertinente ?</p>
<pre class="brush: html"><style>
span { }
</style>
<span>Test</span>
</pre>
<p>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.</p>
<p>Cependant qu'en est-il du code suivant :</p>
<pre class="brush: html"><style>
span {
-o-text-curl: minor;
}
</style>
<span>Test</span>
</pre>
<p>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 <a href="https://fr.wikipedia.org/wiki/Singularit%C3%A9_technologique">singularité</a>.</p>
<p>Cela explique également pourquoi la règle appliquée aux div dans l'exemple suivant est considéré comme "utilisée"</p>
<pre class="brush: html"><style>
div { color: red; }
span { color: blue; }
</style>
<div><span>Test</span></div>
</pre>
<p>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 :</p>
<pre class="brush: html"><style>
div { color: red; border: none; }
span { color: blue; }
</style>
</pre>
<p>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.</p>
<p>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.</p>
<h2 id="Avertissements">Avertissements</h2>
<p>Il est à noter que :</p>
<ul>
<li>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.</li>
<li>Les <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets">feuilles de style alternatives</a> ne sont pas traquées.</li>
</ul>
<h2 id="Bugs">Bugs</h2>
<p>La résolution de certains bugs importants est actuellement en travail :</p>
<ul>
<li>Les changements du CSSOM via JavaScript ne sont actuellement pas traqués. Cela inclu l'ajout de feuilles de styles. Voir le <a href="https://bugzil.la/1007533">bug 1007533</a>.</li>
<li>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 <a href="https://bugzil.la/1007073">bug 1007073</a>.</li>
<li>Les informations @keyframe ne sont pas incluses dans le résumé de préchargement. Voir le <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1034062">bug 1034062</a>.</li>
</ul>
<p> </p>
<h2 id="Alternatives">Alternatives</h2>
<p>Il y plusieurs autres outils qui peuvent vous aider à trouver du CSS inutilisé, sans avoir besoin d'utiliser Firefox.</p>
<ul>
<li><a href="https://www.jitbit.com/unusedcss/">Unused CSS</a> parcourt <em>récursivement</em> votre site pour détecter les sélecteurs inutilisés. Il s'agit d'un outil en ligne, gratuite et sans publicité.</li>
<li><a href="https://github.com/purifycss/purifycss">PurifyCSS </a>est un paquet NPM qui est utilisable comme un outil de console après son installation.</li>
<li><a href="https://unused-css.com/">unused-css.com</a>, un autre outil en ligne. Celui-ci n'est pas gratuit.</li>
</ul>
|
