Verificação HTML: CSS: Erro de análise.

Sobre este problema de CSS

Um erro de análise CSS significa que o analisador CSS do validador encontrou algo inesperado e não conseguiu interpretar o código a partir desse ponto em diante. Ao contrário de muitos erros HTML que apontam uma violação específica de regra, um erro de análise é mais geral — o analisador simplesmente desistiu de tentar interpretar o CSS. Isto pode por vezes causar uma cascata de erros adicionais, uma vez que o analisador pode perder o controlo do contexto após a falha inicial.

Isto é importante porque os navegadores lidam com CSS quebrado de forma imprevisível. Embora a maioria dos navegadores seja tolerante e ignore regras inválidas, a forma como recuperam varia. Os estilos podem renderizar de forma diferente entre navegadores, ou blocos de regras inteiros podem ser silenciosamente ignorados. CSS válido garante renderização consistente, depuração mais fácil e melhor manutenibilidade.

Causas comuns de erros de análise CSS incluem:

Ponto e vírgulas em falta entre declarações
Chavetas não fechadas { ou chavetas de fecho extra }
Comentários não fechados (/* sem o correspondente */)
Valores de propriedades inválidos ou vazios (p. ex., color: ;)
Caracteres inesperados como texto solto, tokens não suportados ou marcação HTML dentro de blocos <style>
Erros tipográficos em nomes de propriedades ou valores (p. ex., colr: red)
Usar sintaxe CSS que não é válida num contexto de atributo, como colocar seletores dentro de um atributo style

Para corrigir o erro, vá à linha indicada pelo validador e inspecione cuidadosamente o CSS em torno desse ponto. Procure pelos problemas comuns listados acima. Por vezes o erro real está numa linha anterior à reportada — por exemplo, um ponto e vírgula em falta na linha 5 pode apenas causar um erro de análise na linha 6.

Exemplos

Ponto e vírgula em falta

Um ponto e vírgula em falta faz com que o analisador interprete mal onde uma declaração termina e a próxima começa.

❌ Incorreto:

<p style="color: red font-size: 16px">Olá</p>

✅ Corrigido:

<p style="color: red; font-size: 16px">Olá</p>

Chaveta não fechada

Uma chaveta de fecho em falta faz com que o analisador trate as regras subsequentes como parte do bloco não fechado.

❌ Incorreto:

<style>
  .container {
    margin: 0 auto;
    padding: 20px;

  .title {
    font-size: 24px;
  }
</style>

✅ Corrigido:

<style>
  .container {
    margin: 0 auto;
    padding: 20px;
  }

  .title {
    font-size: 24px;
  }
</style>

Comentário não fechado

Um comentário que nunca é fechado faz com que tudo depois dele seja consumido pelo analisador como parte do comentário.

❌ Incorreto:

<style>
  /* Define a cor principal
  body {
    color: #333;
  }
</style>

✅ Corrigido:

<style>
  /* Define a cor principal */
  body {
    color: #333;
  }
</style>

Valor de propriedade vazio ou inválido

Declarar uma propriedade sem valor ou com um valor claramente inválido desencadeia um erro de análise.

❌ Incorreto:

<div style="background-color: ;">Conteúdo</div>

✅ Corrigido:

<div style="background-color: #f0f0f0;">Conteúdo</div>

Seletores dentro de um atributo `style` inline

O atributo style apenas aceita declarações (pares propriedade-valor), não seletores ou blocos de regras completos.

❌ Incorreto:

<div style="p { color: blue; }">Conteúdo</div>

✅ Corrigido:

<div style="color: blue;">Conteúdo</div>

Caracteres soltos ou erros tipográficos

Caracteres inesperados em qualquer lugar do CSS irão causar falhas na análise.

❌ Incorreto:

<style>
  .box {
    width: 100px;;
    height: 50px
    border: 1px solid #ccc;
  }
</style>

Embora um ponto e vírgula duplo (;;) seja tecnicamente inofensivo na maioria dos analisadores, um ponto e vírgula em falta após height: 50px funde-o com a linha seguinte, produzindo um valor inválido.

✅ Corrigido:

<style>
  .box {
    width: 100px;
    height: 50px;
    border: 1px solid #ccc;
  }
</style>

Se o validador aponta para uma linha mas a causa não é óbvia, tente isolar secções do seu CSS e validá-las separadamente usando o Serviço de Validação CSS W3C. Isto pode ajudar a reduzir a localização exata do problema.