Validador de CSS
La línea, la propiedad, la solución

Qué detecta un validador de CSS

Un navegador es indulgente con el CSS, y ahí está el problema. Por tanto, el navegador descarta en silencio una regla que no puede leer, y la página simplemente se ve mal.

Este validador de CSS nombra lo que el navegador descartaría. Además, cada nota lleva un número de línea, la propiedad o el selector en falta, y el motivo por el que el analizador se detuvo.

Lee la hoja de estilos en orden, siguiendo si está dentro de una regla, una cadena, un comentario o una at-rule. Porque el estado decide qué significa un carácter, una llave dentro de un comentario nunca abre un bloque.

Este validador de CSS comprueba seis familias de error. Dos de ellas rompen el archivo, y las otras cuatro te cuestan una declaración sin romper nada.

Todo corre en esta pestaña. Así, una hoja de estilos de un sitio bajo cláusula de confidencialidad no se diferencia aquí de una pública.

Cómo lee un validador de CSS una hoja de estilos

El lector recorre el texto una vez. En cada carácter sabe en cuál de cinco estados está: un selector, un bloque de declaraciones, un valor, una cadena o un comentario.

Desde ese estado puede saber si una llave abre un bloque, si dos puntos inician un valor y si un punto y coma termina una declaración. La gramática en sí es corta, y el módulo de sintaxis de CSS es donde el grupo de trabajo la escribe.

Porque el recorrido guarda estado, una llave perdida dentro de un comentario no cambia nada. Un lector que contara caracteres la trataría como el inicio de un bloque y descolocaría todas las líneas siguientes.

La recuperación importa tanto como la detección. Cuando un navegador encuentra una declaración que no puede analizar, salta al siguiente punto y coma y sigue. Así, un valor malo cuesta una declaración y no el archivo.

Por eso una regla que perdió una declaración puede estar meses en un sitio en producción. La página sigue funcionando, con una propiedad menos, y nada en la consola lo dice.

Por qué merece la pena encontrar los descartes silenciosos

Una errata en el nombre de una propiedad es el error más fácil de cometer en CSS y el más difícil de notar. Una letra de más y la declaración desaparece.

Porque el resto de la regla sigue aplicándose, el elemento mantiene casi todo su estilo. Así, la página se ve casi bien, y la parte que falta es fácil de achacar a otra cosa.

Lo mismo vale para una unidad. Una longitud escrita sin unidad es válida en unos pocos sitios e inválida en la mayoría. Por tanto, el navegador descarta un margen de diez en lugar de diez píxeles, y el espacio que debía crear nunca aparece.

Un validador convierte tres de esos en tres líneas de salida. Ahí está todo el valor: el navegador se queda callado y la página no.

Las seis comprobaciones, y qué significa cada una

La primera comprobación es el equilibrio de llaves. Una llave que abre sin pareja, o una que cierra sin apertura, recibe una nota que nombra la línea donde se desvió la cuenta. Además, este es el único error que puede costarte todo el resto del archivo.

La segunda es un punto y coma que falta. Porque el navegador lee entonces la siguiente propiedad como parte del valor, una marca que falta se traga dos declaraciones. La nota nombra ambas líneas.

La tercera es una propiedad desconocida. El lector informa de todo lo que no reconoce como errata probable, y ofrece la coincidencia más cercana cuando existe.

La cuarta es un valor que la propiedad no acepta. Un color escrito como una palabra que no es un nombre de color, o una longitud escrita como porcentaje en una propiedad que no toma porcentajes.

La quinta es una unidad mal escrita. Una longitud sin unidad, una unidad que no es ninguna de las reconocidas, y una unidad en una propiedad que lee un número a secas.

La sexta es un duplicado. El mismo selector dos veces en un bloque, o la misma propiedad dos veces dentro de una regla. Porque gana la declaración posterior, un valor viejo puede quedarse ahí con aire de autoridad y no hacer nada.

Lo que válido no es

Un validador responde una pregunta: ¿analizará el navegador esto? No puede responder si la regla era una buena idea.

Así, una hoja de estilos puede pasar todas las comprobaciones y seguir estando mal. Un color que falla el contraste, un ancho fijo que se rompe en una pantalla estrecha, un tamaño de fuente en píxeles donde correspondía una unidad relativa. Ninguno de esos es gramática.

Lo mismo vale para la compatibilidad. Una propiedad puede ser perfectamente válida y aun así no hacer nada, porque el navegador no la ha implementado. La validación no dice nada de eso, y un resultado verde leído como promesa de compatibilidad engañará.

Por eso esta página enlaza con el comprobador de contraste y el probador de selectores. Esos dos responden las preguntas que un validador no puede.