MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

  • 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").

O que "uso" significa?

TL;DR:

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;
  }
}

Porque?

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.

Ressalvas

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.

Erros

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.

Etiquetas do documento e colaboradores

Etiquetas: 
 Colaboradores desta página: mak213k
 Última atualização por: mak213k,