CSS

Qué es, en corto

CSS es el lenguaje que describe cómo debe verse el contenido de una página: qué color tiene el texto, qué tipografía usa, cuánto aire hay entre bloques, en qué orden se colocan las columnas y qué pasa cuando la pantalla es estrecha.

El reparto de papeles con el HTML es limpio: el HTML dice qué es cada cosa y el CSS dice cómo se presenta. Un mismo documento puede verse como una página de escritorio, como una columna estrecha en el móvil, en blanco y negro al imprimirlo o sin ningún estilo si el CSS no carga. El contenido no ha cambiado; ha cambiado la capa de presentación.

Lo de «en cascada» viene de que varias reglas pueden afectar al mismo elemento y hay un orden que decide cuál gana. Es la parte que más quebraderos de cabeza da a quien empieza, y la que menos importa para entender de qué va esto.

Por qué le importa a quien tiene una web

Porque el CSS es donde se ganan o se pierden cosas que la gente nota aunque no sepa nombrarlas.

La página se adapta o no se adapta. Una web hecha con medidas fijas se rompe en cuanto alguien agranda el texto del navegador o entra desde un móvil viejo. Una hecha con unidades relativas simplemente se reordena. Es la diferencia entre «esta web no me funciona» y que ni te enteres de que algo pasó.

El contraste y el color son decisiones de CSS. Ese gris clarito sobre blanco que queda tan elegante en la maqueta es una regla CSS, y es también el motivo por el que alguien con la vista cansada no puede leer tu página al sol. Las WCAG ponen umbrales concretos y se cumplen —o no— desde la hoja de estilos.

El foco visible también. Cuando alguien navega con el teclado necesita ver dónde está. Hay un outline que el navegador pone por defecto y que se ha quitado por costumbre porque «queda feo». Quitarlo sin sustituirlo por algo mejor deja la web inutilizable sin ratón.

Y afecta al rendimiento. El CSS bloquea el pintado de la página: el navegador no muestra nada hasta que tiene los estilos. Un CSS enorme retrasa el LCP. Y un estilo que reserva mal el espacio de las imágenes o mete banners que empujan el contenido produce CLS, esos saltos que hacen que pulses lo que no querías.

Hay además un efecto sobre buscadores que no siempre se ve venir: el CSS puede cambiar el orden visual sin cambiar el orden real del documento. Si colocas una columna a la izquierda por CSS pero en el HTML está la última, la persona que navega con teclado y el robot que lee el código encuentran otro orden distinto del que tú ves. Cuando eso pasa, lo que hay que arreglar es el HTML, no seguir empujando con CSS.

Un ejemplo que puedes probar aquí mismo

Esta web tiene un control para elegir entre cuatro combinaciones de color y tres tamaños de texto. No es un adorno: es exactamente lo que permite la separación entre contenido y presentación. Al cambiar la opción no se recarga otro sitio ni existen cuatro versiones del texto; es el mismo HTML con otro juego de valores de CSS aplicado encima.

Lo monté así por un motivo práctico. Discutir en abstracto sobre si el contraste de un gris es suficiente no lleva a ninguna parte; poder cambiarlo y verlo, sí. Las cuatro combinaciones cumplen los umbrales de contraste, y los tres tamaños mantienen la maquetación sin que nada se salga ni se solape, porque los espacios están definidos en relación al tamaño de letra y no en píxeles fijos. Si estuvieran en píxeles, agrandar el texto rompería las cajas.

Ese mismo mecanismo es el que respeta las preferencias del sistema operativo: si alguien tiene activado el modo oscuro o ha pedido reducir las animaciones, el CSS puede detectarlo y comportarse en consecuencia sin preguntar nada.

Cómo lo trabajo

Mi orden de trabajo es siempre el mismo y es el contrario del habitual: primero el HTML correcto, después el estilo. Cuando se hace al revés —maquetar y luego «añadir accesibilidad»— acabas usando CSS para tapar decisiones de estructura, y eso siempre se paga.

Las tres comprobaciones que hago en cualquier revisión de accesibilidad y que dependen enteramente del CSS: agrandar el texto al 200 % y ver si algo se corta, recorrer la página con el tabulador y ver si el foco se distingue siempre, y comprobar los contrastes reales del sitio publicado, no los del diseño. Suelen aparecer sorpresas en los tres.

Errores frecuentes

Quitar el outline del foco. El clásico absoluto. Si el que trae el navegador no encaja con el diseño, se sustituye por otro más visible. Dejar la página sin ninguna marca de foco es dejar fuera a todo el que no usa ratón, incluidas personas con temblor o con una lesión temporal.

Ocultar contenido con display: none pensando que es solo visual. Eso lo borra también para los lectores de pantalla. Si quieres texto que solo lean ellos, se usa una técnica distinta. Y al revés: esconder texto para engañar a los buscadores es una práctica que Google detecta y penaliza.

Medidas fijas en píxeles para el texto y sus contenedores. Impide que la gente agrande la letra, o hace que al agrandarla el contenido desborde su caja. Las unidades relativas cuestan lo mismo de escribir.

Elegir colores en la maqueta y no comprobarlos en la web real. El color de un texto sobre una imagen, sobre un degradado o en estado «pulsado» rara vez es el que se validó. Los estados —enlace visitado, botón deshabilitado, mensaje de error— son los que más se olvidan y los que más información transmiten.

Transmitir información solo con color. Un campo de formulario que se marca en rojo y nada más no comunica nada a quien no distingue ese rojo. Hace falta además un icono o un texto. Es un fallo de CSS con consecuencias de contenido.