Validador de CSS
Pega una hoja de estilos para encontrar errores de sintaxis, propiedades desconocidas, valores no válidos, selectores y media queries rotos, cada uno con su línea y columna. Después deja que el validador corrija los errores estructurales y reformatee el CSS por ti.
Última actualización:
Consejo: pulsa Ctrl + Intro para validar y haz clic en un problema para ir a su línea. Tu hoja de estilos se comprueba localmente y nunca se sube.
Cómo usar Validador de CSS
- Pega tu CSS en el campo de entrada, abre un archivo .css o carga el ejemplo con errores.
- Lee la lista de problemas: los errores (rojo) rompen o invalidan el CSS y las advertencias (ámbar) señalan probables fallos. Con Validar mientras escribo activado, la lista se actualiza mientras editas.
- Haz clic en un problema para ir a la línea y columna exactas en el editor.
- Pulsa Corregir y formatear para obtener una copia corregida y con sangría coherente: se añaden los puntos y coma y las llaves de cierre que faltan y se quitan las llaves sueltas.
- Copia o descarga el CSS corregido y arregla a mano los errores de valores o propiedades que queden.
Qué pasa con el CSS no válido en el navegador
CSS está diseñado para fallar sin hacer ruido: los navegadores se saltan lo que no entienden y siguen adelante. Eso hace que los errores pasen fácilmente desapercibidos, porque la página se sigue mostrando, solo que no como querías. Las reglas de gestión de errores de la especificación CSS Syntax explican lo que te cuesta cada problema:
| Problema | Qué descarta el navegador |
|---|---|
| Propiedad desconocida o valor no válido | Solo esa declaración; las declaraciones anteriores de la misma propiedad siguen aplicándose. |
| Falta el punto y coma | La declaración y la siguiente, que se convierten en un único valor no válido. |
Selector no válido en una lista (a, b:hoverr) | Toda la regla, incluidos los selectores válidos. |
| Falta la llave de cierre | Las reglas siguientes se leen como anidadas dentro del bloque abierto, lo que normalmente las rompe. |
| Cadena sin cerrar | El resto de la línea se convierte en una cadena incorrecta; la declaración se descarta. |
@import después de otras reglas | Todo el @import. |
| Media query no válida | Se trata como not all: el bloque nunca se aplica. |
Cómo corregir los errores de CSS más comunes
- Propiedad desconocida: suele ser una errata (
colr,backround,font-wieght); el validador sugiere la propiedad real más parecida. Algunas propiedades necesitan un prefijo de proveedor en navegadores antiguos. - Valor no válido: revisa las unidades (
16pxx, un número sin unidad comowidth: 10), los colores hexadecimales (3, 4, 6 u 8 dígitos hexadecimales) y el orden de las partes de las propiedades abreviadas. La línea "Se esperaba" muestra la sintaxis formal. - Falta el punto y coma: todas las declaraciones excepto la última de un bloque deben terminar en
;. Añadirlo también a la última es una buena práctica. - Pseudoclase no válida:
:hoverr,::beforo un solo signo de dos puntos donde se necesitan dos en pseudoelementos más nuevos como::placeholder. - Sintaxis de media queries: escribe
and (max-width: 600px)con un espacio después deandy dos puntos dentro de los paréntesis.
Cuando la hoja de estilos sea válida, comprímela para producción con el Minificador de CSS o revisa el peso de los selectores con la Calculadora de especificidad CSS.
Preguntas frecuentes
¿En qué se diferencia del validador de CSS del W3C?
Ambos informan de errores de sintaxis y de propiedades o valores no válidos. Este validador funciona por completo en tu navegador (no se sube nada), se actualiza mientras escribes, resalta líneas en el editor, sugiere la propiedad que probablemente querías escribir, entiende CSS moderno como el anidamiento, las container queries y :has(), y puede corregir automáticamente los errores estructurales.
¿Cómo se validan los valores de las propiedades?
Cada valor se comprueba dos veces: con la base de datos de sintaxis de la especificación CSS que usa la biblioteca css-tree (basada en los datos de MDN) y con el propio motor CSS.supports() de tu navegador. Un valor se acepta si cualquiera de los dos dice que es válido, así que no se marcan las novedades que tu navegador ya admite.
¿Por qué no se comprueban los valores con var()?
Un valor que usa var(), env() o attr() solo se conoce cuando se renderiza la página, así que ni un validador ni el navegador pueden comprobarlo de antemano. El nombre de la propiedad sí se comprueba.
¿Qué cambia la corrección automática?
Añade los puntos y coma que faltan entre declaraciones, cierra bloques, cadenas, comentarios y corchetes sin cerrar, quita llaves de cierre sueltas y después reformatea la hoja de estilos con una sangría coherente. No adivina sustitutos para propiedades desconocidas o valores no válidos; esos siguen en la lista como errores para que decidas tú.
¿Por qué se marca como error un selector válido?
Los selectores se comprueban con el motor de selectores de tu navegador. Un pseudoelemento específico de otro navegador (por ejemplo ::-moz-selection en Chrome) se marca como advertencia. Si un selector de una lista separada por comas no es válido, los navegadores descartan toda la regla, por eso importa.
¿Admite directivas de SCSS, Less o Tailwind?
No, valida CSS normal tal como lo leen los navegadores. La sintaxis de preprocesadores como $variables, @mixin o @tailwind se señala, porque primero hay que compilarla a CSS.
¿Qué cuenta como error y qué como advertencia?
Los errores hacen que los navegadores ignoren parte de tu CSS: sintaxis no válida, propiedades desconocidas, valores no válidos, selectores no válidos y @import mal colocado. Las advertencias son CSS válido que probablemente es un error o no tiene efecto: declaraciones duplicadas, reglas vacías, propiedades con prefijo de proveedor desconocidas, hacks antiguos y tipos de medio que nunca coinciden.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.