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,
marginaceita de um a quatro valores, então um quinto valor é inválido. A propriedadecoloraceita apenas um único valor de cor, então escrever duas cores é um erro. -
Valores não reconhecidos: Uma palavra-chave está mal escrita (ex:
blockyem vez deblock) 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 comofontpode 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
- Identifique a propriedade e valor reportados na mensagem de erro.
-
Verifique a ortografia de cada palavra-chave. Erros comuns incluem
inheret(deveria serinherit),trasparent(deveria sertransparent), ecentre(deveria sercenter). - Conte os valores e compare com a especificação da propriedade. Consulte o MDN Web Docs para a sintaxe de valores aceites.
-
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(), eclamp(). - 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.