Skip to main content
Validação HTML

CSS: X: Muitos valores ou valores não são reconhecidos.

Sobre este problema de CSS

Cada propriedade CSS tem uma sintaxe de valor definida que especifica exatamente quais valores aceita e quantos. Quando o validador encontra uma declaração que não corresponde a esta sintaxe, sinaliza o erro. Isto pode acontecer por várias razões distintas:

  • Muitos valores: Uma propriedade recebe mais valores do que a sua sintaxe permite. Por exemplo, margin aceita de um a quatro valores, então um quinto valor é inválido. A propriedade color aceita apenas um único valor de cor, então escrever duas cores é um erro.
  • Valores não reconhecidos: Uma palavra-chave está mal escrita (ex: blocky em vez de block) ou simplesmente não existe para essa propriedade (ex: color: bold).
  • Valores mais recentes ou não-padrão: Um valor que pertence a uma especificação rascunho, uma funcionalidade com prefixo de fornecedor, ou uma extensão específica do browser pode não ser reconhecido pelo validador.
  • Separadores em falta ou erros de sintaxe: Uma vírgula em falta numa função multi-valor como rgb() ou uma barra em falta numa propriedade abreviada como font pode fazer com que o parser interprete mal os valores.

Isto importa porque os browsers lidam com CSS inválido de forma imprevisível — tipicamente descartam toda a declaração, o que significa que os seus estilos pretendidos desaparecem silenciosamente. Corrigir estes erros garante que os seus estilos são aplicados consistentemente em todos os browsers e torna as suas folhas de estilo mais fáceis de manter e debuggar.

Como corrigir

  1. Identifique a propriedade e valor reportados na mensagem de erro.
  2. Verifique a ortografia de cada palavra-chave. Erros comuns incluem inheret (deveria ser inherit), trasparent (deveria ser transparent), e centre (deveria ser center).
  3. Conte os valores e compare com a especificação da propriedade. Consulte o MDN Web Docs para a sintaxe de valores aceites.
  4. Verifique a sintaxe de funções — certifique-se de que vírgulas, barras e parênteses estão corretos em funções como rgb(), calc(), e clamp().
  5. Verifique sintaxe moderna não suportada — se está a usar funcionalidades CSS mais recentes, o validador pode ainda não as reconhecer. Nesse caso, verifique se a sintaxe está correta conforme a especificação e considere o aviso como informativo.

Exemplos

Muitos valores para uma propriedade

A propriedade color apenas aceita um único valor de cor, e margin aceita no máximo quatro valores:

<!-- ❌ Inválido: muitos valores -->

<p style="color: red blue;">Olá</p>
<p style="margin: 10px 20px 5px 0px 15px;">Olá</p>
<!-- ✅ Válido: número correto de valores -->

<p style="color: red;">Olá</p>
<p style="margin: 10px 20px 5px 0px;">Olá</p>

Valor de palavra-chave não reconhecido

Um erro ortográfico ou palavra-chave inexistente desencadeia o erro:

<!-- ❌ Inválido: "blocky" não é um valor display válido -->

<div style="display: blocky;">Conteúdo</div>
<!-- ✅ Válido: palavra-chave correta -->

<div style="display: block;">Conteúdo</div>

Valor mal escrito num bloco <style>

<!-- ❌ Inválido -->

<style>
  .box {
    background-color: trasparent;
    text-align: centre;
  }
</style>
<!-- ✅ Válido -->

<style>
  .box {
    background-color: transparent;
    text-align: center;
  }
</style>

Sintaxe de função incorreta

Vírgulas em falta ou argumentos extra dentro de funções CSS também podem desencadear este erro:

<!-- ❌ Inválido: vírgulas em falta em rgb() -->

<p style="color: rgb(255 0 0 0.5);">Olá</p>
<!-- ✅ Válido: use a sintaxe moderna correta com uma barra para o alpha -->

<p style="color: rgb(255 0 0 / 0.5);">Olá</p>

Confusão com propriedade abreviada

Propriedades abreviadas como font e background têm requisitos específicos de ordem de valores. Fornecer valores na ordem errada ou misturar valores incompatíveis causa erros:

<!-- ❌ Inválido: propriedade abreviada font incorreta -->

<style>
  p {
    font: bold Arial 16px;
  }
</style>
<!-- ✅ Válido: tamanho deve vir antes da família, peso antes do tamanho -->

<style>
  p {
    font: bold 16px Arial;
  }
</style>

Quando tiver dúvidas, separe propriedades abreviadas nas suas propriedades individuais (font-weight, font-size, font-family) para isolar qual valor o validador está a rejeitar.

Encontre problemas como este automaticamente

O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.