Este componente é experimental e não está ainda avaliado no Firefox
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.
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.
O caminho que eles usam no geral é:
csscoverage start")csscoverage stop") e ver as regras não usadas no editor de estilos.csscoverage report") que contém as regras que podem ser na linha em cada página.Um outro comando ("csscoverage oneshot") permite você efetivamente rodar ("csscoverage start; csscoverage stop").
CSS cobertura checa se o tag#id.class seletor no exemplo abaixo existe em um conjunto de páginas web.
@media thing {
tag#id.class:hover {
foo: bar;
}
}
Supostamente seu CSS tem o seguinte: Se, durante o teste, seu mouse não entrar o span. Esta regra é usada?
<style>
span:hover {
color: purple;
}
</style>
<span>Test</span>
Tecnicamente span:hover 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 span:hover claramente tem relevância para a página..
Similarmente, suponha que o seu CSS tenha o seguinte:
<style>
@media tv {
span {
color: purple;
}
}
</style>
<span>Test</span>
Você deve estar querendo plugar uma TV dentro de seu ambiente em ordem para medir relevância?
Mas 'use' não é somente sobre relevância
É a seguinte regra relevante:
<style>
span { }
</style>
<span>Test</span>
Isto pode ser argumentado que não é relevante porque não tem efeito na página e pode portanto se seguramente removido
No entanto acontece o seguinte:
<style>
span {
-o-text-curl: minor;
}
</style>
<span>Test</span>
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.
Isto também explica o porquê da div de regra é considerada "usada" no seguinte exemplo.
<style>
div { color: red; }
span { color: blue; }
</style>
<div><span>Test</span></div>
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:
<style>
div { color: red; border: none; }
span { color: blue; }
</style>
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.
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.
Tenha consciência destas coisas:
Nós estamos trabalhando em um número de imortantes bugs ( erros ):