11 Ferramentas úteis para verificar, limpo e otimizar seu arquivo css

Minimizando o tamanho do arquivo da folha de estilo CSS tem sido considerado por muitos como uma boa maneira de aumentar a sua velocidade de carregamento do site. Na verdade, reduzindo o arquivo CSS por vários kilobytes, o servidor terá um tempo mais curto para carregar e resultar em uma página web mais rápido.

No caso em que seus artigos acertar o frontpage Digg, isso também poderia ser um dos poucos fatores decisivos (há muitos mais) se o servidor irá falhar ou não.

Alguns dos métodos mais comuns utilizados para minimizar / otimizar uma folha de estilo CSS envolve eliminando seletores não utilizadas, espaço em branco indesejado, guias, comentários e alterar a declaração escrita comum para taquigrafia notações.

Video: Criando Uma Folha de Estilos CSS

Eu sei que alguns de vocês aqui não são tech-savvy suficiente para editar o seu próprio código CSS, então aqui eu vou lhe fornecer algumas das ferramentas úteis que você pode usar para otimizar seu código CSS, mesmo se você tiver completamente nenhum conhecimento de codificação CSS.

Verifique se o seu código CSS

W3C CSS Validator

O validador W3C CSS é uma ferramenta que você pode usar para validar seu CSS. Você pode baixar o validador Java para o seu computador e usá-lo off-line, ou utilize o formulário on-line para verificar o seu código CSS.

CSS Validator Firefox Add-On

Para tornar mais fácil para você para validar o seu código CSS, há esta extensão do Firefox - CSS Validator - que você pode instalar no seu browser. Uma vez instalado, você pode facilmente e rapidamente verificar o seu código com um clique direito do mouse.

CSSCheck

Mesmo que o seu código CSS é validado, isso não significa que ele é livre de erro. A validação significa apenas que ele está em conformidade com os padrões CSS definidos pelo W3C. Se você deseja validar, bem como olhar para alguns problemas de compatibilidade do navegador com o seu estilo, então CSSCheck é uma boa ferramenta para você.

CSS Analyzer

CSS Analyzer é uma ferramenta útil que lhe permite validar a sua folha de estilo contra a norma do W3C, realizar um teste de contraste de cor, e um teste para garantir que os tamanhos relevantes são especificados em unidades relativas de medição.

Video: Como usar o PageSpeed Insights

No caso você esteja se perguntando, o teste de contraste de cores é verificar se as combinações de cores primeiro plano e fornecem um contraste suficiente quando visualizados por alguém que tenha défices de cor, ou quando visto em uma tela preto e branco.

Limpar o seu código CSS

Poeira-Me Selectors

Poeira-Me seletores é uma extensão do Firefox que encontra seletores CSS não utilizados na página que você está vendo. Como você testar páginas subsequentes do mesmo domínio, o resultado é examinada com os dados anteriores e quaisquer seletores encontrados são atravessado fora da lista. Você pode usá-lo para testar páginas individuais ou obtê-lo para rastrear o site inteiro.

No final, você receberá um relatório sobre os seletores que não são usados ​​em qualquer lugar do site. Você pode então remover os seletores de sua folha de estilo (menos código significa menor tamanho do arquivo).

Verificador de Redundância CSS

Similar ao pó-Me Selectors, esta ferramenta verifica o seu site para seletores CSS não utilizadas e redundantes. A única coisa que é diferente é que você precisará digitar manualmente o URI para cada página que você deseja testar.

Video: Photoshop - Removendo manchas na pele

Otimizar e comprimir seu código CSS

Depois de ter concluído a verificação da validade do seu CSS e limparam código desnecessário, é hora de otimizar o arquivo CSS e reduzi-lo para o menor tamanho possível.

CSS Tidy

CSS Tidy é um software de código aberto que você pode usar para otimizar e comprimir o seu arquivo CSS. Ele está disponível em formato .exe (somente para Windows) e um formato de script php compactado (todas as plataformas, para os desenvolvedores da Web). O CSS Tidy faz é principalmente remover o comentário, espaços em branco desnecessários e alterar parte do código de taquigrafia. Durante a compressão, você pode escolher entre a legibilidade do código ou compressão máxima. Dependendo do comprimento de seu código, você pode facilmente atingir uma taxa de compressão de até 30% ou mais.

Desde CSS Tidy é um projeto open source, tem havido vários sites que usam o código ea transformou em uma ferramenta online para as pessoas usarem. Aqui estão alguns deles:

• CSS LIMPO
• código Beautifier
• Formatter CSS e Optimizer do Portal CSS

Outros Optimizers CSS

FlumpCakes CSS Optimizer

Um otimizador simples que vem com várias opções para você escolher.

Robson CSS Compressor

Embora possa parecer o mesmo que os outros, eu ter encontrado a taxa de compressão para Robson CSS Compressor para ser o maior entre todos eles. Embora ele vem com várias opções para você ajustar a configuração, deixando todas as opções intocado (todas as opções marcada) sempre produz o melhor resultado.

Compressor CSS Unidade CSS

O Compressor CSS oferecido pelo CSS Drive vem em dois modos que você pode usar: regulares e avançados. No modo normal, você só precisa selecionar qual nível de compressão que você quer (Luz, Normal ou Super Compact) eo Compressor CSS fará o resto. No modo avançado, você terá mais opções e uma maior influência sobre a forma como você quer que seu estilo de ser otimizado.

Video: c1aula03 - Criar arquivo css

CSS Optimizer

O Optimizer CSS a partir mabblog.com é um aplicativo de linha de comando para Mac e Linux. Ele é destinado para aqueles que são mais confortáveis ​​com o terminal em vez de uma interface online. Há também uma versão on-line simples disponível para aqueles que querem obtê-lo rapidamente sobre e feito com.

Esperemos que as ferramentas listadas aqui são suficientes para que você possa ajustar e otimizar sua folha de estilo CSS. Se você já usou todas as outras ferramentas que são mais úteis do que os mencionados acima, compartilhá-los com a gente nos comentários.