La validación del lenguaje CSS es un mecanismo que permite verificar de forma técnica si el código cumple con sus normas y directrices. Se trata de un proceso muy similar al que se realiza con la validación de documentos HTML. Con la validación se garantiza que no hay errores que afecten al resultado esperado.
Realizar el proceso de validación no es obligatorio, pero se trata de una práctica recomendable. Por ejemplo, puede darse el caso en el que una página web se vea bien en nuestro navegador web, y que debido a un error en el código CSS no pueda verse correctamente en el resto de navegadores o dispositivos.
También es recomendable validar el documento HTML, por coherencia. Desde Recursivos apostamos por una validación web correcta. Además, seguir buenas prácticas ayuda a mantener un código limpio y fácil de entender.
Herramienta de validación del W3C
El W3C (Consorcio WWW) publicó una herramienta que facilita la validación de páginas web, de forma online y totalmente gratuita. Esta herramienta se llama CSS Validation Service y permite verificar el código de varios niveles del lenguaje CSS. Por defecto, usa el nivel más actual.
Esta herramienta permite validar el código CSS de tres maneras:
- Validar por URL
- Validar cargando un archivo
- Validar introduciendo código
Validar por URL
Con este método, la validación del código CSS se realiza proporcionando la URL de la página web que se desea validar. Tiene como desventaja que el código que se va a validar ya está desplegado al servidor, por lo que ya es accesible para el usuario final. En este caso, la depuración será más lenta y engorrosa.
Validar cargando un archivo
Para realizar una correcta depuración del código CSS, puede ser más cómodo si se valida subiendo el archivo CSS a través del formulario. Esta opción es más viable cuando se está en fase de desarrollo, ya que de esta manera se puede depurar los errores en local, sin perjudicar al usuario final.
Validar introduciendo código
Otra opción que puede ser usada de forma puntual es introduciendo el código CSS directamente en el formulario. Este método es útil cuando se quiere estar validar una porción de código antes de subirlo al servidor. Sin embargo, validar archivos enteros puede llevar a una validación más convincente.
Validar con un editor de código
En la actualidad hay muchos editores de código que tienen extensiones para validar el código de varios lenguajes sin tener que salir del editor. Algunos de estos editores pueden ser VSCode, Vim, Emacs, Brackets, Sublime Text, Coda, etc. Cabe mencionar que cada editor tiene sus propias extensiones.
Inspeccionar elementos
Otra forma de realizar la depuración de hojas de estilos en cascada es inspeccionando los elementos del documento HTML mediante el inspector del DOM del navegador web. La mayoría de navegadores web permiten hacer esto. De esta manera, es posible visualizar el código CSS asociado a un elemento.
Se puede inspeccionar el DOM (del inglés: Document Object Model) con la tecla F12, aunque en algunos navegadores web también se puede hacer con las teclas Ctrl+Shift+i o con el botón derecho el ratón sobre un elemento concreto, seleccionar la opción «Inspeccionar el elemento».
