CSS moderno: lo que ya puedes usar en tu sitio

CSS ha cambiado más en los últimos años que en la década anterior. Funciones que antes requerían JavaScript o trucos complicados hoy están disponibles en todos los navegadores modernos: componentes que se adaptan a su contenedor, selectores que reaccionan a su contenido, anidamiento nativo y colores más precisos. El resultado son sitios más ligeros, flexibles y fáciles de mantener.

Un nuevo CSS

Durante mucho tiempo, lograr ciertos diseños exigía librerías adicionales, código JavaScript o soluciones frágiles. Gracias a la colaboración entre los equipos de Chrome, Safari, Firefox y Edge, muchas funciones nuevas de CSS ya funcionan igual en todos los navegadores modernos y pueden usarse en producción con confianza.

Novedades que ya puedes usar

• Container queries: un componente adapta su diseño al espacio de su contenedor, no solo al tamaño de la pantalla. La misma tarjeta luce bien en una barra lateral o a todo lo ancho.
• El selector :has(): permite dar estilo a un elemento según lo que contiene, por ejemplo resaltar un formulario que tiene un campo con error, sin JavaScript.
• Anidamiento nativo: escribir reglas dentro de otras, como en Sass, directamente en CSS.
• Subgrid: los elementos internos de una tarjeta se alinean con la cuadrícula principal, ideal para listados de productos o precios.
• Cascade layers (@layer): ordenan la prioridad de los estilos y acaban con las guerras de especificidad.
• Colores OKLCH y color-mix(): paletas más consistentes, mejor contraste y variaciones de color calculadas por el navegador.

Tipografía y espacios fluidos

Con la función clamp() los tamaños de texto y márgenes crecen de forma suave entre un mínimo y un máximo según el ancho de la pantalla, sin decenas de media queries. Combinado con fuentes variables, que incluyen todos los grosores en un solo archivo, se logra una tipografía elegante que además carga más rápido.

Mejora progresiva

Funciones aún más recientes, como las transiciones de vista para animar el paso entre páginas o las animaciones ligadas al scroll, pueden agregarse como mejora progresiva: quien tiene un navegador compatible disfruta la animación y el resto ve el sitio funcionando perfectamente.

Cómo te ayudamos en AZUL MX

Construimos interfaces con CSS moderno para que tu sitio sea más rápido, se vea bien en cualquier dispositivo y sea más sencillo de mantener. También modernizamos hojas de estilo heredadas para reducir su tamaño y su complejidad.