Sobre este problema de CSS
O validador sinaliza qualquer declaração onde o token da propriedade não corresponde a uma propriedade CSS conhecida no seu conjunto de regras. As causas comuns incluem erros tipográficos, hifenização incorreta, usar valores onde deveriam estar nomes de propriedades, propriedades de rascunhos antigos que foram renomeadas, ou depender apenas de propriedades com prefixo de fornecedor/experimentais sem um equivalente padrão. Também pode aparecer quando se copia e cola fragmentos que incluem propriedades personalizadas não padronizadas.
Porque isto é importante:
- Compatibilidade com browsers: Propriedades desconhecidas são ignoradas, fazendo com que os estilos falhem silenciosamente.
- Manutenibilidade: Erros tipográficos e sintaxe não padrão tornam o CSS mais difícil de depurar.
- Conformidade com padrões: CSS limpo e validado reduz surpresas entre browsers e facilita a manutenção futura.
Como corrigir:
-
Verifique a ortografia e hifenização exatamente (por exemplo,
text-decoration-skip-ink, nãotext-decoration-skipink). - Verifique se a propriedade existe no MDN ou nas especificações CSS; se não estiver documentada, provavelmente é inválida.
- Substitua nomes obsoletos ou de rascunho pelos atuais padronizados.
- Se usar funcionalidades experimentais, inclua um fallback padrão e mantenha versões com prefixo de fornecedor junto com a propriedade sem prefixo quando suportada.
- Remova tokens específicos de framework ou ferramentas que não são CSS válido em tempo de execução.
-
Não invente propriedades. Se precisar de dados personalizados para JS, use atributos
data-*no HTML, não propriedades CSS falsas.
Exemplos
Exemplo que desencadeia o erro (erro tipográfico) e a versão corrigida
Inválido:
<p style="colr: red;">Olá</p>
Válido:
<p style="color: red;">Olá</p>
Exemplo usando um nome obsoleto/rascunho substituído pela propriedade atual
Inválido (nome de rascunho antigo):
<div style="gap: 1rem; grid-row-gap: 8px;"></div>
Válido (propriedade atual padronizada):
<div style="row-gap: 8px; gap: 1rem;"></div>
Exemplo com propriedade com prefixo de fornecedor mais fallback padrão
Inválido (apenas com prefixo de fornecedor, falta propriedade padrão):
<div style="-webkit-user-select: none;"></div>
Válido (fallback mais prefixo):
<div style="user-select: none; -webkit-user-select: none;"></div>
Exemplo removendo um uso incorreto de nome de propriedade personalizada não padrão
Inválido (tentativa de inventar uma propriedade):
<div style="button-style: primary;"></div>
Válido (use classes e propriedades CSS reais):
<style>
.btn--primary {
background-color: #0b5fff;
color: #fff;
}
</style>
<button class="btn--primary">Enviar</button>
Exemplo com propriedades personalizadas (variáveis) usadas corretamente
Uso válido de propriedades personalizadas CSS (não desencadeará o erro porque a propriedade é padrão e propriedades personalizadas começam com --):
<style>
:root {
--brand-color: #0b5fff;
}
.tag {
color: var(--brand-color);
}
</style>
<span class="tag">Tag</span>
Documento completo com propriedades corrigidas
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Correções de Validação de Propriedades CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
display: grid;
gap: 1rem;
row-gap: 0.5rem;
user-select: none;
-webkit-user-select: none;
color: #222;
}
</style>
</head>
<body>
<div class="card">Propriedades CSS válidas em uso</div>
</body>
</html>
Lista de verificação rápida:
- Confirme a propriedade no MDN. Se não for encontrada, provavelmente é inválida.
- Corrija ortografia/maiúsculas; propriedades CSS são minúsculas com hífens.
- Prefira nomes padronizados; mantenha prefixos apenas como suplementos.
-
Use propriedades personalizadas CSS começando com
--se precisar de variáveis. - Remova marcadores específicos de ferramentas antes da validação.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.