MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

En el último artículo de este módulo, veremos los fundamentos de depuración CSS, incluyendo la búsqueda del CSS aplicado a una página y otras herramientas que nos ayudarán a encontrar errores en nuestro código CSS.

Prerrequisitos: Conocimientos básicos de ordenadores, SW básico instalado, conocimiento básico de manejo de ficheros, y HTML básico (ver Introducción a HTML). Y una idea del funcionamiento de CSS (ver artículos previos en este módulo.
Objetivos: Aprender los fundamentos de la depuración CSS.

Al igual que en la depuración HTML, la depuración CSS tampoco nos debe asustar mucho en comparación con la depuración de otros tipos de código. Es recomendable la lectura de depurar no es terrible antes de continuar.

CSS y Depuración

Al igual que HTML, CSS es permisivo (leamos código permisivo antes de seguir). En el caso de CSS, si una declaración es inválida (contiene un error sintáctico o el navegador no soporta esa característica), el navegador la ignorará y continuará con la siguiente.

De igual modo si un selector es inválido, no seleccionará nada, y la regla no hará nada — otra vez, el navegador continuará con la siguiente regla.

Esto suele ser bueno — la mayoría de las veces el contenido se mostrará a los usuarios, aunque no tenga un buen estilo. Pero no nos ayuda mucho cuando estamos tratando de depurar errores y ni siquiera disponemos de un mensaje de error que nos ayude a encontrarlo. Es aun peor cuando no se muestra el contenido a los usuarios — quizás se ha causado un error en el diseño por no aplicar un estilo importante.

Afortunadamente hay algunas herramientas que nos ayudarán.

Revisando el DOM y el CSS

En la actualidad, todos los navegadores disponen de herramientas para revisar y entender las páginas web. Entre ellas, hay dos que están disponibles en todos los navegadores: el inspector DOM y el editor CSS. En Firefox están en la herramienta de revisión de página. Ya hemos usado el inspector DOM en Depurando HTML para revisar código HTML. Aquí lo usaremos junot con el Editor CSS para depurar también problemas CSS.

Nota: En el siguiente ejemplo, usaremos Firefox, pero todos los navegadores disponen de las mismas herramientas — aunque ubicadas en distintos sitios. Leer Descubre las herramientas de desarrollador del navegador para encontrarlas en los diferentes navegadores.

Para trabajar el ejemplo, lo abriremos ejemplo de depuración CSS en una nueva pestaña del navegador. Si queremos sacar mayor partido y arreglar los problemas de código completo guardaremos copias de los archivos HTML and CSS del ejemplo y los arreglaremos de modo local.

Es una página web sencilla, limpia y a una columna que contiene un artículo:

our example webpage with the problems fixed. The Firefox logo has been floated to the right, and the main heading and body text are now visible and well placed.

Por el momento hay un poco de desorden:

Our example webpage in a broken state. There is a heading of My article in the middle and a Firefox logo, but everything else is small and not easily visible.

Comencemos por revisar la página con el inspector de páginas. En Firefox lo abriremos usando Ctrl + May + C (o Menú > Desarrollador > Inspector), que abrirá un conjunto de herramientas en una ventana al pie de la página de la siguiente forma:

The Firefox page inspector, showing the DOM inspector on the left, and the CSS editor on the right. invalid CSS is crossed out and has a warning symbol

Si clicamos en un elemento en el inspector DOM a la izquierda, el editor CSS de la derecha se actualizará para mostrar todas las reglas CSS aplicadas a dicho elemento. Es útil pues las propiedades inválidas aparecen tachadas y con una señal de advertencia al lado. Esto será útil después.

A close up of the Firefox page inspector, showing the DOM inspector on the left, and the CSS editor on the right. invalid CSS is crossed out and has a warning symbol

Nota: Cada propiedad tiene un selector al lado, que puede ser activado/desactivado para activar/desactivar propiedad por propiedad en el CSS. Esto es útil para averiguar la causa de un error concreto.

Aprendizaje activo: ¡encuentra los errores!

Con los conocimientos básicos de la herramienta, tratemos de encontrar los errores. En cada caso, deberías clicar sobre el elemento erróneo para comprobar qué parte del CSS aparece mal.

  1. Los elementos <header> y <footer> deberían tener un color de fondo, pero no se ve ningún color.
  2. Los elementos <h1> y <p> en el pie de página están ambos demadiado arriba en la página — se nota especialmente en el <h1>, que casi está fuera de la pantalla. Clica sobre <h1> y deselecciona las declaraciones aplicadas para ver cual está causando el problema.
  3. La <img> (magen)debe flotar a la derecha del texto, pero no lo está — está directamen te encima del texto.
  4. El texto del área del contenido del elemento <main> es demasiado pequeño — los párrafos y las listas deberían tener un tamaño de fuente más grande aplicado sobre ellos, pero parece que alguna regla no les está afectando. Pista: Este es un poco más difícil, pues se trata de un problema con el selector más que con la propiedad. Puede que tengas que estudiar el código fuente CSS para encontrarlo — lo encontrarás en el Editor de Estilos en las herramientas de desarrollador de Firefox.

Si no te aclaras tienes la respuesta en código fuente arreglado en Github.

Validación CSS

Ya hemos visto el Validador HTML W3C, pero también tienen un Validador CSS. Funciona de la misma manera, permitiéndonos validar CSS en una URL concreta, solo subiendo el archivo local, o directamente el CSS.

a visual of the CSS Validation Service mentioned and linked to nearby

Aprendizaje activo: Validando nuestro CSS

Probemos a insertar nuestro código CSS en el validador a ver que nos escupe.

  1. Ir a CSS Validation Service: Validate by direct input.
  2. Copiar y pegar nuestro CSS erroneo en el área de texto del validador.
  3. Pulsar el botón Check.

Ahora aparecerá una lista de errores. Solo dos en este caso:

The validator results as they appear on the CSS validation service.

Estos mensajes son prácticos pues incluyen el número de línea y el selector afectado en dada caso. Veamos cómo interpretar esto:

  • Property background-colour doesn't exist : teal — sencillo; la propiedad no existe, lo que clarifica lo que debemos hacer.
  • Value Error : float attempt to find a semi-colon before the property name. add it — esto nos indica que falta un punto y coma. El número de línea nos facilitará la localización del error.

Podemos pensar que es menos práctico que las herramientas del navegador pues no nos permite revisar el código erróneo a la vez que lista los errores, y esto no facilita la búsqueda de instancias donde falla el selector, o donde la sintaxis es correcta pero simplemente estamos diseñando con valores incorrectos. Sin embargo, para hojas de estilo grandes, es mejor pasar el código por este servicio para corregir los posibles errores sintácticos, antes de localizar otros problemas con las herramientas del navegador.

Nota: CSS Lint es una herramienta similar para descubrir y validar errores CSS, que también proporciona pistas útiles e interesantes advertencias.

Resumen

Enhorabuena por completar el último artículo del primer módulo CSS. Ya que has llegado hasta aquí, puedes intentar el examen CSS, y luego comenzar a explorar otros módulos CSS y HTML.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: javierpolit
 Última actualización por: javierpolit,