Utilizando CSS para mostrar falhas de marcação

Postado por: Pedro Rogério em

Eric Meyer criou a algum tempo uma solução muito simples com CSS para mostrar falhas de marcação em nosso HTML que podem nos passar despercebidas a não ser que você valide seu código para encontrá-las, como: imagens sem o atributo alt, links que não levam a lugar algum, facilitando e muito a vida dos desenvolvedores:


a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}

Se você utiliza a Web Developer Toolbar pode identificar facilmente esses erros, mas utilizando CSS a identificação é mais apurada. Vejam só uma página de exemplo.

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.

One Response to “Utilizando CSS para mostrar falhas de marcação”

  1. [...] UTILIZANDO CSS PARA MOSTRAR FALHAS DE MARCAÇÃO » Pinceladas da Web – Reflexões sobre XHTML, CSS,… (tags: css html) [...]

Leave a Reply