diff options
Diffstat (limited to 'files/pt-br/tools/css_coverage/index.html')
| -rw-r--r-- | files/pt-br/tools/css_coverage/index.html | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/files/pt-br/tools/css_coverage/index.html b/files/pt-br/tools/css_coverage/index.html new file mode 100644 index 0000000000..31d1c8be34 --- /dev/null +++ b/files/pt-br/tools/css_coverage/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Coverage +slug: Tools/CSS_Coverage +tags: + - CSS + - cobertura CSS +translation_of: 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> |