Verificação HTML: CSS: "X": Erro de Análise.

Sobre este problema de CSS

Quando o Validador HTML W3C verifica o seu documento, também valida quaisquer estilos inline (em atributos style) e folhas de estilo incorporadas (em elementos <style>). Um erro de análise CSS ocorre quando o analisador encontra algo que não consegue interpretar de acordo com as especificações CSS. O “X” na mensagem de erro refere-se à propriedade, valor ou token específico que desencadeou a falha.

Compreender erros de análise CSS

Os erros de análise CSS podem ter origem em muitas causas diferentes:

Erros de digitação em nomes de propriedades ou valores — por exemplo, colr em vez de color, ou 10xp em vez de 10px.
Pontuação em falta ou a mais — um ponto e vírgula esquecido, dois pontos a mais, chavetas ou parênteses não correspondentes.
Valores inválidos para uma propriedade — usar um valor que não pertence à gramática dessa propriedade.
Sintaxe com prefixos de fornecedor ou não padronizada — propriedades como -webkit-appearance ou -moz-osx-font-smoothing não fazem parte do padrão CSS e irão desencadear erros de análise no validador.
Funcionalidades CSS modernas ainda não reconhecidas — algumas sintaxes CSS mais recentes podem ainda não ser suportadas pelo analisador do validador.
Caracteres perdidos ou problemas de codificação — caracteres invisíveis, aspas curvas ou artefactos de copiar-colar de processadores de texto.

Embora os navegadores sejam geralmente tolerantes e ignorem CSS que não compreendem, os erros de análise podem indicar bugs reais que fazem com que os estilos falhem silenciosamente. Corrigi-los garante que o seu CSS está em conformidade com os padrões e se comporta de forma previsível em todos os navegadores.

Causas comuns e correções

Erros de digitação e erros de sintaxe

A causa mais frequente é um simples erro de digitação ou um caractere em falta. Verifique sempre com atenção a linha exacta para a qual o validador aponta.

Pontos e vírgulas em falta

Um ponto e vírgula esquecido entre declarações pode fazer com que o analisador interprete mal as propriedades subsequentes.

Valores inválidos ou mal formados

Usar valores que não correspondem à sintaxe esperada da propriedade — como omitir unidades, usar sintaxe de função incorrecta ou fornecer o número errado de argumentos — irá desencadear erros de análise.

Prefixos de fornecedor

O validador W3C verifica em relação à especificação CSS. Propriedades e valores com prefixos de fornecedor são não padronizados e irão produzir erros de análise. Embora possa ainda precisar deles em produção, tenha em mente que estes irão sempre ser sinalizados na validação.

Exemplos

❌ Ponto e vírgula em falta entre declarações

<p style="color: red background-color: blue;">Olá</p>

O ponto e vírgula em falta após red faz com que o analisador tente interpretar red background-color: blue como um único valor, resultando num erro de análise.

✅ Corrigido: pontos e vírgulas a separar declarações

<p style="color: red; background-color: blue;">Olá</p>

❌ Erro de digitação no nome da propriedade

<style>
  .box {
    widht: 100px;
    hieght: 200px;
  }
</style>

✅ Corrigido: nomes de propriedades corretos

<style>
  .box {
    width: 100px;
    height: 200px;
  }
</style>

❌ Unidade em falta num valor

<style>
  .container {
    margin: 10;
    padding: 20px;
  }
</style>

Valores numéricos (exceto 0) requerem uma unidade. O valor 10 sem uma unidade como px, em ou rem é inválido.

✅ Corrigido: unidade incluída

<style>
  .container {
    margin: 10px;
    padding: 20px;
  }
</style>

❌ Caracteres a mais ou mal posicionados

<style>
  .title {
    font-size:: 16px;
    color: #3333;
  }
</style>

Os dois pontos duplos após font-size e a cor hexadecimal de 4 dígitos #3333 (que é válida em CSS Color Level 4 mas pode não ser reconhecida por todos os analisadores de validadores) podem desencadear erros.

✅ Corrigido: sintaxe correta

<style>
  .title {
    font-size: 16px;
    color: #333333;
  }
</style>

❌ Parênteses não correspondentes numa função

<style>
  .overlay {
    background: rgba(0, 0, 0, 0.5;
  }
</style>

✅ Corrigido: parêntesis de fecho adicionado

<style>
  .overlay {
    background: rgba(0, 0, 0, 0.5);
  }
</style>

Dicas para depurar erros de análise

Leia a mensagem de erro cuidadosamente. O validador geralmente aponta para o token ou linha específica que causou a falha.
Valide o CSS separadamente. Use o Serviço de Validação CSS W3C para mensagens de erro mais detalhadas específicas de CSS.
Verifique caracteres invisíveis. Se copiou CSS de um processador de texto, PDF ou website, caracteres ocultos como espaços de largura zero ou aspas curvas (" em vez de ") podem estar presentes. Reescreva a linha manualmente se tiver dúvidas.
Simplifique e isole. Se não conseguir encontrar o erro, remova declarações uma de cada vez até o erro desaparecer, depois inspecione cuidadosamente a última declaração removida.