CSS Coverage

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 é:

• Iniciar a cobrir o  rastro ("csscoverage start")
• Visitar um conjunto representativo das páginas em seu site.
• Parar o rastreador ("csscoverage stop") e ver as regras não usadas no editor de estilos.
• Ver um relatório("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 assumimos que uma URL retorna o mesmo cojunto de bytes cada vez que referenciado ao longo do período de teste.
• Nós não trilhamos folhas de estilos alternativas.

Nós estamos trabalhando em um número de imortantes bugs ( erros ):

• Nós não atualmente trilhamos mudanças para o CSSOM pelo Javascript, inc
• Adiciona folhas de estilos. Veja erro (bug) 1007533.
• 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( bug ) 1007073.
• Nós não incluímos @keyframe informação no pre-carregado sumário. Veja erro ( bug ) 1034062.