Ideia básica de como efetuar HTML linting com CSS

Quando o HTML é escrito incorretamente, várias das vezes, nada acontece. E isso facilita termos estruturas inválida ou inacessível no markup sem que seja óbvio.

Há muitas maneiras pelas quais podemos usar para descobrir e corrigir esses problemas no HTML, como por exemplo, usando o W3C Markup Validation Service.

Neste artigo iremos adotar uma técnica que pode ser bem interessante se empregada com Javascript por exemplo ou qualquer outra forma que tiver em sua imaginação.

Utilizaremos CSS, que pode ser mais facilmente integrada em um fluxo de trabalho de desenvolvimento, usando alguns de seus seletores ligeiramente avançados para destacar áreas com potenciais problemas. Aqui estão algumas coisas que podemos usar seletores CSS para nos ajudar a pegar esses erros de HTML.

Inline style

*[style] { 
    border: 3px solid red;
}

O código acima será utilizado para fazer os problemas terem aparência destacada.
E no caso atual, o problema a ser destacado é qualquer elemento que receba estilo inline(inline style).

Esse seletor segmentará qualquer elemento na página que tenha estilos inline aplicados ao elemento HTML. Como regra geral, estilos inline devem ser evitados, pois eles são difíceis de substituir devido ao seu nível de especificidade.

Embora os estilos em linha sejam necessários em alguns casos, este seletor ajudará destacá-los, facilitando analisar assim a tomar uma decisão caso-a-caso em cada elemento destacado.

Imagens sem atributo alt

img[alt=""],
img:not([alt]) {
    border: 3px solid red;
}

Como regra geral, todas as imagens devem ter um atributo alt. Quando este atributo não existe, ou não tem conteúdo, isso pode provocar que a maioria navegadores, na tela, apresentem para o usuário ler o valor do atributo src, que na maioria dos casos, não é útil para o usuário e pode ser inclusive confuso.

Deve ser notado que o seletor acima selecionará imagens com um atributo alt nulo / vazio, ou seja, imagens com alt = “”. Isso ocorre porque um atributo alt nulo pode ser uma maneira intencional de ter um navegador ignorando o texto para a imagem, o que é útil se, por exemplo, a imagem for puramente decorativa.
Poderia, no entanto, ainda ser útil NÃO ter essas imagens destacados, o que podemos fazer retirando o primeiro seletor do código acima.

Links sem apontandos

a:not([href])  
a[href="#"],  
a[href=""],  
a[href*="javascript:void(0)"] {
    border: 3px solid red;
}

Esses seletores destacarão qualquer elemento de link que não tenha qualquer atributo href ou tenha um significado sem localização definida.

Elementos HTML sem label ou label sem apontamento

input:not([id]),  
select:not([id]),  
textarea:not([id]),
label:not([for]) { 
    border: 3px solid red;
}

Elementos do formulário são talvez os elementos mais importantes quando se trata de label.
Embora existam várias maneiras de rotular um elemento de formulário, a maneira mais comum é por ter um ID no elemento que é referenciado por um elemento label (de rótulo).
O seletor acima verifica se há elementos de formulário que não têm um ID e elementos de rótulo que não estão explicitamente vinculados a um elemento de formulário usando o atributo for, destacando-os.

Formulário sem identificação
Para destacar um formulário sem qualquer identificação automaticamente, com uso de CSS, basta:

form:not([name]):not([id]) {
    border: 3px solid red;
}

Detectando elementos HTML sem nome
Abaixo o código responsável por identificar elementos HTML sem nome. Isso pode ser muito importante para alguns desenvolvedores que necessitam desses atributos corretamente aplicados.

input:not([name]),  
select:not([name]),  
textarea:not([name]) {
    border: 3px solid red;
}

Elementos interativos vazios
Elementos como buttons e links são tipicamente rotulados(recebem label) através de seus conteúdos. É claro que existem outras maneiras de preenchê-los, como via javascript, atributos aria-label, etc.
Mas o que esse código que destaca estes elementos busca fazer é diferenciá-los de modo que o avaliador possa verificar se está tudo ok ou não.

button:empty,  
a:empty {
    border: 3px solid red;
}

Atributos desnecessários ou deprecated
Podemos da mesma forma efetuar o destaque/marcação desses elementos para correção.

script[type="text/javascript"],  
link[rel="stylesheet"][type="text/css"] { 
    border: 3px solid red;
}

Outros usos
Com a ideia da técnica transmitida acima em vários exemplos, é possível utilizá-la para várias outras, como por exemplo:

Detectar charset incorreto:

meta[charset]:not([charset="UTF-8"]) { (...) }

Verificar se a tag de charset é a primeira no HEAD, como é a indicação de ser:

meta[charset="UTF-8"]:not(:first-child) { (...) }

Verificar a existência de identificação da lingua

html:not([lang]),  
html[lang=""] { (...) }

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados: