Validador CSS

Revisa CSS en busca de errores de sintaxis, bloques sin cerrar, propiedades desconocidas y valores no válidos con la gramática de css-tree. Línea y columna de cada fallo.

Entrada CSS

Revisa la sintaxis, las propiedades desconocidas y los valores no válidos según la gramática de css-tree. No se comprueban las propiedades personalizadas ni los valores con var().

Se ejecuta completamente en tu navegador. Tus datos nunca se suben.

Herramientas Relacionadas

Ver Todas

Formateador JSON Validador JSON Formateador XML camelCase snake_case kebab-case PascalCase CONSTANT_CASE

¿Qué es Validador CSS?

El Validador CSS informa de errores estructurales (llaves, cadenas, comentarios o paréntesis sin cerrar), errores de análisis, propiedades desconocidas, valores de propiedad no válidos y at-rules desconocidas, cada uno con su línea y columna. Las comprobaciones de propiedades y valores usan los datos de gramática CSS incluidos en css-tree; no es el servicio de validación CSS del W3C.

Cómo usar Validador CSS

Pega tu CSS en el cuadro de entrada.
Haz clic en Validar (los resultados se actualizan mientras escribes).
Lee el resumen y la lista de errores y advertencias.
Corrige cada problema usando la línea y columna indicadas.

Ejemplo

Entrada

a { colr: red; color: bluee; }

Salida

Errors: 2 · Warnings: 0
Line 1, column 5 Unknown property "colr"
Line 1, column 16 Invalid value for "color": bluee

Cuándo usar Validador CSS

Úsalo para detectar erratas como colr o bluee, encontrar la llave sin cerrar en un archivo largo o revisar CSS escrito a mano antes de desplegar. Puede que las propiedades muy recientes falten en los datos de gramática; no se comprueba la compatibilidad con navegadores.

Cómo funciona Validador CSS

Un escáner comprueba que {} y () estén balanceados y que las cadenas y comentarios estén cerrados. Después la hoja de estilo se analiza con css-tree (incluido con CSSO), que reporta los errores de análisis. Cada declaración se compara con lexer.matchDeclaration contra la gramática de propiedades de css-tree: las propiedades desconocidas son errores, las propiedades desconocidas con prefijo de proveedor (-moz-foo) son advertencias, y los valores que no cumplen la gramática (por ejemplo, margin con cinco valores) son errores. Las propiedades personalizadas (--x) y los valores que usan var(), env() o attr() no se pueden comprobar de forma estática y se omiten.