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, 0 insertions, 136 deletions
diff --git a/files/pt-br/tools/css_coverage/index.html b/files/pt-br/tools/css_coverage/index.html deleted file mode 100644 index 31d1c8be34..0000000000 --- a/files/pt-br/tools/css_coverage/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -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> |