Como encontrar erros de Html e CSS facilmente no seu site

Há um projeto chamado Diagnostic CSS onde você pode estar pegando o código e colocando no arquivo CSS do seu site para, quando você abrí-lo, ele mostre visualmente onde estão os erros CSS e Html. É bom porque você não perde muito tempo procurando nos códigos, é só você colocar aquelas regras no código que quando você abrir a página, ela vai denunciar os erros pintando as partes erradas, aí você corrige.

O link do projeto é esse:

Diagnostic CSS – Encontre erros de CSS rapidamente no seu código (http://meyerweb.com/eric/tools/css/diagnostics/)

É parecido com o que eu fiz aqui (Outlines x border – Quando usá-las? [CSS]) no final desse post, mas a diferença é que eu uso as outlines nas div’s, span’s, etc para me orientar  visualmente no layout enquanto estou desenvolvendo, e essas regras CSS de diagnótico que estamos falando, mostra o que está errado.

Pegue o código abaixo e coloque no final do seu CSS, ou início, mas eu gosto de colocar no final do arquivo, lá em baixo, porque CSS dá prioridade às últimas regras escritas (por exemplo, se eu declarei que o tamanho de uma determinada span é “width:100px;” e mais em baixo eu determinei que o tamanho dessa mesma span é “width:90px;”, a anterior é inválida, a última é que prevalece.)

Eu fiz um teste aqui num site meu e olha no que deu. Já vou corrigir isso.

Primeiro eu abri meu site…

 

…depois abri o CSS do meu site e coloquei o código no final…

 

…salvei o CSS e recarreguei a página…

 

Ele identificou vários erros. Agora é só consertar. :)

Lembrando que eu fiz em Localhost, com o Wampserver instalado no meu computador, cuidado para não colocar essas regras CSS em um site publicado para os visitantes não ficarem confusos.

Siga-me no Facebook

Comments

comments

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *