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
|
---
title: CSS Coverage
slug: orphaned/Tools/CSS_Coverage
tags:
- CSS
- cobertura CSS
translation_of: Tools/CSS_Coverage
original_slug: Tools/CSS_Coverage
---
<div>{{ToolsSidebar}}</div><div class="note">
<p>Este componente é experimental e não está ainda avaliado no Firefox</p>
</div>
<p>CSS cobertura é um conjunto de comandos para Ferramentas de desenvolvimento Firefox que ajuda, desembaraçar a bagunça CSS pelo CSS que não está sendo usado, e indicando as artes de seus arquivos CSS que são necessárias para a renderização inicial.</p>
<p>Essas ferramentas são de algum modo experimental porque a definição de "uso".é complicado, mas se espera que dará uma ajuda no trabalho do que está acontecendo.</p>
<p>O caminho que eles usam no geral é:</p>
<ul>
<li>Iniciar a cobrir o rastro ("<code>csscoverage start</code>")</li>
<li>Visitar um conjunto representativo das páginas em seu site.</li>
<li>Parar o rastreador ("<code>csscoverage stop</code>") e ver as regras não usadas no editor de estilos.</li>
<li>Ver um relatório("<code>csscoverage report</code>") que contém as regras que podem ser na linha em cada página.</li>
</ul>
<p>Um outro comando ("<code>csscoverage oneshot</code>") permite você efetivamente rodar ("<code>csscoverage start; csscoverage stop</code>").</p>
<h2 id="O_que_uso_significa">O que "uso" significa?</h2>
<h3 id="TLDR">TL;DR:</h3>
<p>CSS cobertura checa se o <span style="color: #008000;"><code>tag#id.class</code></span> seletor no exemplo abaixo existe em um conjunto de páginas web.</p>
<pre class="brush: css">@media thing {
tag#id.class:hover {
foo: bar;
}
}</pre>
<h3 id="Porque">Porque?</h3>
<p>Supostamente seu CSS tem o seguinte: Se, durante o teste, seu mouse não entrar o span. Esta regra é usada?</p>
<pre class="brush: html"><style>
span:hover {
color: purple;
}
</style>
<span>Test</span>
</pre>
<p>Tecnicamente <code>span:hover</code> não foi usado naquela palavra 'Test' não foi sempre colorido roxo, no entanto a cobertura CSS é realmente sobre estar vendo quais regras são relevantes ou irrelevantes, e <code>span:hover</code> claramente tem relevância para a página..</p>
<p>Similarmente, suponha que o seu CSS tenha o seguinte:</p>
<pre class="brush: html"><style>
@media tv {
span {
color: purple;
}
}
</style>
<span>Test</span>
</pre>
<p>Você deve estar querendo plugar uma TV dentro de seu ambiente em ordem para medir relevância? </p>
<p>Mas 'use' não é somente sobre relevância </p>
<p>É a seguinte regra relevante:</p>
<pre class="brush: html"><style>
span { }
</style>
<span>Test</span>
</pre>
<p>Isto pode ser argumentado que não é relevante porque não tem efeito na página e pode portanto se seguramente removido</p>
<p>No entanto acontece o seguinte:</p>
<pre class="brush: html"><style>
span {
-o-text-curl: minor;
}
</style>
<span>Test</span>
</pre>
<p>Conhecendo se isto é ou não provável requer o uso de mecanismo de pesquisa e alguma técnica analítca, e pode até mesmo saber a versão do browser suportado em seu site. Estas são todas consideradas além do escopo desta ferramenta até a singularidade.</p>
<p>Isto também explica o porquê da div de regra é considerada "usada" no seguinte exemplo.</p>
<pre class="brush: html"><style>
div { color: red; }
span { color: blue; }
</style>
<div><span>Test</span></div>
</pre>
<p>Pode ser argumentado que a div em regra não é usada desde que não afete a renderização final da página, no entanto considere esta alternativa definição:</p>
<pre class="brush: html"><style>
div { color: red; border: none; }
span { color: blue; }
</style>
</pre>
<p>Dífícil saber se a borda em regra é usada, e há muitas outras variações; considere opacidade, visibilidade e conversão de cor ao qual está mais complicando a definição de "uso". Para guardar uma coisa simples, "uso" significaque o seletor acerta um elemento.</p>
<p>Claramente se uma folha de estilo que você alterou durante um teste contém uma regra para um particular página que não é visto durante o teste, então nós marcaremos que esta regra é não "usada" apesar de haver sido vezes alterado. Então vale dobrar checando antes de você remover as regras do arquivo CSS.</p>
<h2 id="Ressalvas">Ressalvas</h2>
<p>Tenha consciência destas coisas:</p>
<ul>
<li>Nós assumimos que uma URL retorna o mesmo cojunto de bytes cada vez que referenciado ao longo do período de teste.</li>
<li>Nós não trilhamos folhas de estilos alternativas.</li>
</ul>
<h2 id="Erros">Erros</h2>
<p>Nós estamos trabalhando em um número de imortantes bugs ( erros ):</p>
<ul>
<li>Nós não atualmente trilhamos mudanças para o CSSOM pelo Javascript, inc</li>
<li>Adiciona folhas de estilos. Veja erro (bug) 1007533.</li>
<li>Marcação no editor de estilo é feito em uma base por linha, e nós atualmente processamos mapas-recurso, então coisas ainda estão confusas se você rodar isso em um comprimido CSS. Veja Erro( <a href="https://bugzil.la/1007073">bug ) 1007073</a>.</li>
<li>Nós não incluímos @keyframe informação no pre-carregado sumário. Veja erro ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1034062">bug ) 1034062</a>.</li>
</ul>
|
