como depurar CSS com as ferramentas de desenvolvimento do seu navegador

CSS não é uma linguagem de programação. No entanto, dependendo de quem você perguntar, vai dizer que escrever um bom CSS pode às vezes ser tão desafiador como escrever em linguagens de programação como Java ou JavaScript.

neste artigo, eu quero mostrar – lhe alguns truques como você pode depurar problemas CSS para resolvê-los. Como um bom desenvolvedor da web, você deve estar familiarizado com as ferramentas de desenvolvedor do navegador (por exemplo, do Google Chrome) para que possamos usá-las.

Wireframe mode

lutando com problemas de layout? Talvez um visual mais parecido com um modelo de arames te ajude a entender melhor o teu layout. A seguinte regra CSS fará com que cada elemento tenha um fundo preto, cor de texto verde e uma borda vermelha. Você pode adicionar a regra na sua folha de estilo ou diretamente no seu navegador. Dependendo do seu caso de uso, você pode até mesmo melhorar esta regra. Não te esqueças de desactivar isto na produção!

*{
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}

Calculado propriedades de estilo

Alguns navegadores ferramentas de desenvolvimento (e.g. Ferramentas de desenvolvimento do Chrome) oferecem-lhe uma vista que mostra as propriedades do estilo que são aplicadas a um determinado elemento. Aqui, você também pode ver para cada propriedade de estilo onde foi definido.

Teste CSS consultas diretamente no seu navegador

a Menos que você não inlining estilos, você tem que criar válido CSS declaração de blocos. Por vezes, os selectores de CSS podem tornar-se complicados de ler e escrever. Uma forma rápida de verificar se os selectores de CSS funcionam corretamente é pesquisar diretamente em suas ferramentas de desenvolvimento do navegador. Você pode procurar tanto texto e seletores CSS.

a Alternância de elemento de estados

Certos elementos, como os campos de entrada são o estilo quando eles estão focados. Outros elementos, como botões, reagem quando você passa com o mouse sobre eles. A maioria das ferramentas de desenvolvimento do navegador permitem-lhe comutar os estados do elemento como o foco ou o hover. No entanto, se um ouvinte DOM está ouvindo para este evento, então alternando o estado de um elemento geralmente não irá lançar um evento que seria registrado por este ouvinte.

Conclusão

Deixe uma resposta

O seu endereço de email não será publicado.