CSS para diagnóstico de marcação incorreta
Em sites cuja administração é feita pelo cliente, fica difícil controlar (evitar) o aparecimento de marcação inválida. Eu que estou trabalhando num CMS feito em padrões Web que o diga. Mesmo por que o cliente sequer sabe (na maioria das vezes) que um site é feito de código, e que supostamente este deve estar correto. Mas quem desenvolve, e sabe como é sofrido criar um site 100% compliant, pode utilizar um recurso que está sendo discutido no 456 Berea Street e no blog do Eric Meyer: o diagnóstico de erros de marcação através de folhas de estilo.
Isso quer dizer que você (ou seu cliente) pode facilmente identificar quando alguma tag está vazia, quando uma imagem não possui atributo alt, e por aí vai. As regras são simples, como no exemplo que segue:
font, center, div[align], p[align], table[align], font[color] {
color : #cd0000;
font-weight : bold;
background : #eecc11 url(images/warning.gif) repeat 0 0;
margin : 10px;
padding : 10px;
border : 2px dashed #cd0000;
font-size : 2em;
}
Os estilos acima colocariam as tags font, center, div com atributo align, p com atributo align, table com atributo align e font com atributo color em negrito, com cor e borda vermelha ao redor, indicando que há alguma marcação imprópria ou incorreta.
Algo mais inteligente é colocar essa marcação junto com a do editor WYSIWYG, ou junto ao site mas apenas para o cliente. Claro que isso não é a solução ideal, como o Roger do 456BereaSt sugere, mas já é um bom hack que ajuda e faz o seu trabalho.
fala rafael! beleza?
como essa marcação “descobre” por exemplo que tag img está sem o alt?
Abraços
Se você entrar nos links citados, Marcel,
você vai ver que os exemplos que eles citam são bem mais completos
que esse que eu trouxe.
Esse seletor só funciona em browsers decentes (então não funciona no Internet Explorer), mas para apontar que uma imagem está sem o atributo alt, você pode no CSS usar essa verificação:
img[alt=""] { border: 4px solid red; }
Então em todas as imagens cujo atributo alt seja em branco, ela colocará uma borda vermelha e sólida de 4px.
Mas você pode usar isso para todos os outros elementos do (X)HTML, como por exemplo descobrir se um parágrafo usa o atributo align (que não existe mais, hein).
p[align] { color: green; }
Colocaria estes parágrafos com o antigo atributo align setado em cor verde.
E por aí vai.