Validador de CSS
Verifique o CSS quanto a erros de sintaxe, blocos não fechados, propriedades desconhecidas e valores inválidos com os dados de gramática do css-tree. No navegador.
Verifica a sintaxe, propriedades desconhecidas e valores inválidos com base na gramática do css-tree. Propriedades personalizadas e valores com var() não são verificados.
Executa totalmente no seu navegador. Seus dados nunca são enviados.
Ferramentas Relacionadas
Ver TodasO que é Validador de CSS?
O Validador de CSS informa erros estruturais (chaves, strings, comentários ou parênteses não fechados), erros de análise, propriedades desconhecidas, valores de propriedade inválidos e regras @ desconhecidas, cada um com linha e coluna. As checagens de propriedades e valores usam os dados de gramática CSS do css-tree; não é o serviço de validação de CSS do W3C.
Como usar Validador de CSS
- Cole seu CSS na caixa de entrada.
- Clique em Validar (os resultados são atualizados enquanto você digita).
- Leia o resumo e a lista de erros e avisos.
- Corrija cada problema usando a linha e a coluna mostradas.
Exemplo
a { colr: red; color: bluee; } Errors: 2 · Warnings: 0 Line 1, column 5 Unknown property "colr" Line 1, column 16 Invalid value for "color": bluee
Quando usar Validador de CSS
Use-o para pegar erros de digitação como colr ou bluee, achar a chave não fechada em um arquivo longo ou checar CSS escrito à mão antes de publicar. Propriedades muito novas podem estar ausentes dos dados de gramática; o suporte dos navegadores não é verificado.
Como funciona Validador de CSS
Um scanner verifica se {} e () estão balanceados e se strings e comentários estão fechados. A folha de estilo é então lida pelo css-tree (incluído no CSSO), que informa erros de análise. Cada declaração é comparada com lexer.matchDeclaration contra a gramática de propriedades do css-tree: propriedades desconhecidas são erros, propriedades desconhecidas com prefixo de fornecedor (-moz-foo) são avisos e valores que não correspondem à gramática (por exemplo, margin com cinco valores) são erros. Propriedades personalizadas (--x) e valores que usam var(), env() ou attr() não podem ser checados estaticamente e são ignorados.
Casos de Uso Comuns
- Achar um erro de digitação no nome de uma propriedade
- Localizar uma chave não fechada que quebra o resto do arquivo
- Checar valores como templates de grid ou cores
- Revisar CSS enviado por usuários ou gerado por ferramentas
Nota de Segurança
Tudo roda localmente no seu navegador; o código que você cola não é enviado a nenhum servidor.
Perguntas Frequentes
Este é o validador de CSS do W3C?
Não. Ele usa localmente os dados de gramática do css-tree, que cobrem as propriedades padrão, mas podem estar atrasados em relação a recursos novíssimos.
Por que valores com var() não são checados?
O valor final só é conhecido em tempo de execução, então não pode ser validado estaticamente.
Ele checa o suporte dos navegadores?
Não, apenas sintaxe e gramática.