Usando CSS para checar marcação HTML

visualizações Publicado em: 09/03/2017

Crédito: essa matéria é uma tradução e foi escrita por Ire Aderinokun. URL do original: https://bitsofco.de/linting-html-using-css/

Introdução

Se você cometer erros ao escrever sua marcação HTML, é muito provável que os erros não interfiram na correta renderização do seu documento. Em consequência, é bastante comum que se escreva uma marcação inválida, não semântica, inacessível e impossível de ser detectada a não ser que se promova uma investigação detalhada na marcação.

Existem várias maneiras de se investigar e checar a marcação HTML com a finalidade de se descobrir tais erros, como por exemplo, usar o Serviço de validação de marcação do W3C. Uma outra maneira de checar a marcação HTML, que poderá ser incorporada ao seu fluxo de trabalho consiste em se usar seletores CSS avançados para destacar trechos da marcação HTML potencialmente não conformes. Observe a seguir algumas situações onde poderemos usar tais seletores avançados

Estilos inline

*[style] { 
    border: 5px solid red; /* Regra CSS pra destacar elementos com estilização inline */
}

O seletor mostrado casa com os elementos HTML de uma página aos quais foram definidos o atributo style para estilização inline. Como regra geral deve-se evitar o uso de estilização inline devido a dificuldade de se sobrescrever tal estilização, pois sua especificidade é alta. É correto afirmar que em alguns casos estilização inline é necessária e esse seletor ajudará você a decidir se seu uso é conveniente ou não para cada caso.

Selecionar um elemento potencialmente problemático, permite que se aplique qualquer tipo de estilização que o destaque na página, por exemplo: uma larga borda vermelha, tal como fizemos na regra CSS mostrada anteriormente.

Destino de links

a:not([href])  
a:[href="#"],  
a:[href=""],  
a[href*="javascript:void(0)"] { … }

Esses seletores casam com elementos âncoras aos quais não foi definido um atributo href, ou cujo valor desse atributo não faz sentido.

Imagens inacessíveis

img:not([alt]) { ... }

Como regra geral, a todo elemento que marca imagem devemos definir o atributo alt all images should have an alt attribute (matéria em inglês). Se esse atributo não estiver presente a maioria dos leitores de tela lerá o valor do atributo src que obviamente não tem nada a ver com a descrição da imagem, podendo inclusive causar confusão para o usuário de leitor de tela.

Notar que o seletor mostrado não casa com elementos imagem cujo valor do atributo alt seja nulo/vazio, isto é alt="". Isso porque um valor vazio pode ter sido declarado intencionalmente com a finalidade de fazer com que leitores de tela não tomem conhecimento da imagem, como é o caso de imagens puramente decorativas. Contudo é possível destacar-se tais imagens com o uso do seguinte seletor -

img[alt=""] { ... }

Falta de declaração do idioma do documento

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

Um atributo importante que deve estar presente no elemento html de qualquer página é aquele que define o idioma principal da página. Esse atributo possibilita aos leitores de tela a correta escolha da pronúncia de leitura da página.

Observe a seguir um exemplo mostrando como um leitor de tela lê um documento em inglês no qual não foi declarado o atributo lang -

Declaração incorreta de codificação de carateres

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

Esse seletor casa com elementos meta cujo atributo charset não tenha sido definido com o valor UTF-8. Aquele elemento informa ao navegador que deve ser usado o conjunto de caracteres UTF-8 para na renderização da página, pois essa é a codificação recomendada para se servir documentos HTML. A presença desse elemento meta é inclusive obrigatória para que se obtenha uma marcação HTML válida.

Esse elemento meta deve ser o primeiro elemento a ser marcado após a tag de abertura <head>. Para verificar o posicionamento desse elemento
meta na marcação usamos o seguinte seletor -

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

Atributos inacessíveis para viewport

meta[name="viewport"][content*="user-scalable=no"],  
meta[name="viewport"][content*="maximum-scale"],  
meta[name="viewport"][content*="minimum-scale"] { ... }

Esse seletor casa com elementos meta para viewport aos quais forem declarados atributos que as tornam inacessíveis, impedindo contração e expansão da viewport. Assim, o uso de user-scalable=no, maximum-scale, ou minimum-scale deve ser evitado.

Campos de formulário sem rótulos

input:not([id]),  
select:not([id]),  
textarea:not([id]) { ... }

label:not([for]) { ... }

Campos de formulário são os mais importantes elementos quando se trata de a eles atribuir um rótulo. Embora existam diversos métodos para se rotular um campo de formulário several ways to label a form element (matéria em inglês), a maneira mais comum de se atribuir rótulos a campos de formulário é definindo um atributo ID para o campo e fazendo referência ao ID no elemento que marca o rótulo. O seletor mostrado anteriormente casa campos de formulário que não possuem um atributo ID e com elementos que marcam os rótulos e não possuem um atributo for lincando-os a um campo de formulário.

Outro tipo de rótulo para elementos de formulário é aquele que usa o atributo name. Enquanto o atributo id é usado para rotular no contexto do documento HTML o atributo name é usado como referência para um elemento quando os dados inseridos no campo são enviados para processamento.

input:not([name]),  
select:not([name]),  
textarea:not([name]) { ... }

Adicionalmente, além dos elementos do formulário é útil atribuir-se ao próprio elemento form o atributo name e/ou id.

form:not([name]):not([id]) { ... }

Esse seletor casa com elementos de formulário que não possuem os atributos name e id.

Elementos interativos vazios

button:empty,  
a:empty { ... }

Elementos interativos, tais como links e botões em geral são rotulados pelos seus conteúdos. Embora seja possível rotular tais elementos com outros métodos, tal como com uso do atributo aria-label, deixando-os vazios não é algo apropriado. O seletor mostrado casa com elementos que marcam links e botões
os quais não possuem um conteúdo HTML.

Atributos desnessários e em desuso

script[type="text/javascript"],  
link[rel="stylesheet"][type="text/css"] { ... }

Para finalizar podemos criar seletores CSS que casam com atributos desnecessários ou em desuso presentes na nossa marcação HTML.