Lo nuevo y realmente usable del CSS que marcó tendencia en 2024

Nos sumergiremos en el fascinante mundo del CSS y exploraremos las nuevas características que realmente podemos usar hoy mismo. ¿Sabías que CSS ya no es solo para cambiar colores y fuentes? ¡Ahora con poderosas herramientas a nuestra disposición vamos a descubrirlas!

¿Qué es CSS y por qué es importante para el desarrollo web?

Lo explicaremos brevemente —para los que aún no lo saben—.

CSS, o Cascading Style Sheets, es un lenguaje de hojas de estilo que se utiliza para describir la presentación de páginas web escritas en HTML. Controla el diseño, los colores, las fuentes y la apariencia general del contenido web, lo que permite a los desarrolladores crear diseños visualmente atractivos y fáciles de usar.

CSS es esencial para el desarrollo web moderno, mejora el atractivo estético de los sitios web al tiempo que mejora la capacidad de mantenimiento y la experiencia del usuario. Su capacidad para separar el contenido del diseño lo convierte en una herramienta poderosa para los desarrolladores que buscamos crear aplicaciones web eficientes y visualmente atractivas.

En este artículo te vamos a presentar las novedades más prácticas y útiles de CSS en 2024. En los últimos años, han surgido numerosas innovaciones en CSS, que ahora son compatibles con los navegadores modernos, lo que transforma significativamente la forma en que diseñamos y creamos sitios web.

1. Contenedores de Consultas CSS (CSS Container Queries)

¿Qué son?

Las consultas de contenedores permiten aplicar estilos basados en el tamaño de un contenedor específico, en lugar del tamaño de la ventana gráfica (viewport). Esto significa que puedes hacer que los estilos de un elemento cambien dinámicamente en función del tamaño de su contenedor padre.

Casos de uso de las container-query:

• Crear componentes responsivos sin media queries.
• Diseños responsivos a diferentes tamaños de pantalla.

¿Por qué es útil?

Imagina diseñar componentes que se adapten perfectamente a su contenedor, independientemente del tamaño de la ventana gráfica. Esto hace que los diseños responsivos sean más modulares y fáciles de gestionar.

Ejemplo:

CSS.container { 
    contain: layout inline-size; 
}     
@container (min-width: 300px) { 
    .item { 
      font-size: 1.5rem; 
      color: #ff00AA;
    } 
}

Resultado: el texto dentro de la etiqueta con la clase .item cambia de tamaño y color si el contenedor tiene al menos 300 píxeles de ancho.

2. CSS Layers (Capas CSS)

¿Qué son?

Las capas CSS te permiten gestionar la especificidad de tus estilos de una manera más predecible y ordenada.

La regla CSS @layer se utiliza para declarar una capa en cascada y también se puede utilizar para definir el orden de precedencia en el caso de múltiples capas en cascada.

¿Por qué es útil?

Se acabaron las luchas con la especificidad de CSS. Con capas, puedes organizar tus estilos de una manera que sea fácil de entender y mantener.

Se pueden definir varias capas a la vez, o bien, podemos usar la declaración @layer es para crear una sola capa en cascada con un nombre, como se muestra a continuación:

Ejemplo:

CSS/* Se pueden definir varias capas a la vez */
@layer reset, base, theme, components;
@layer reset {
  /* Estilos de reinicio */
}
@layer base {
  /* Estilos base */
}
@layer theme {
  /* Estilos del tema */
}
@layer components {
  /* Estilos de componentes */
}

Esto es útil puesto que el orden inicial en el que declaramos las capas le indica al CSS qué capa tiene prioridad. Igual que sucede con las declaraciones CSS, la última capa que se enumeremos sobreescribe las anteriores —si se encuentran declaraciones en varias capas—.

En el ejemplo tenemos una regla en @layer theme y otra regla @layer components, de ellas la que tendrá prioridad es components; ya que es la última que encuentra el CSS al leer el código, y por ello será esta la que se aplicará a nuestro estilo. Se aplicaría una regla en components incluso si tiene menor especificidad que la regla en theme.

3. La propiedad scroll-timeline de CSS

¿Qué es?

La propiedad scroll-timeline permite animar elementos en función de la posición de desplazamiento. Puede contener dos valores:

• nombre para la línea de tiempo de progreso de desplazamiento y
• eje de desplazamiento opcional (arriba a abajo o izquierda a derecha).

¿Por qué es útil?

Añade dinamismo y efectos visuales increíbles a tus sitios web, haciendo que la interacción del usuario sea mucho más rica.

Ejemplo:

CSSsection { 
    ...
    scroll-timeline: --itemTimeline y;
    /* Firefox requiere esto para aplicar la animación */
    scroll-timeline: --itemTimeline vertical;
  }
.item {
  ...
    width: 80px;
    heigh: 80px;
    animation-name: rotateAnimation;
    animation-duration: 1ms; /* Firefox requiere esto para aplicar la animación */
    animation-timeline: --itemTimeline;
}   
.area {
    heigh: 600px;
    background-color: linear-gradient(#fae5e5, #bac0fc);
}  
@keyframes rotateAnimation { 
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

HTML<section>
  <div class="item"></div>
  <div class="area"></div>
</section> 

4. El selector :has()

¿Qué es?

La pseudo-clase :has() permite aplicar estilos a un elemento padre que contiene ciertos elementos hijos. Esto implica un cambio radical para escribir estilos lógicos.

¿Por qué es útil?

Aporta una flexibilidad increíble para los diseñadores, permitiendo estilos contextuales basados en la estructura del DOM. La pseudoclase :has nos permite selecciones más complejas basadas en elementos secundarios, que es una característica compatible con los navegadores modernos.

Ejemplo:

CSS.card:has(.featured) { 
    border: 2px solid gold;
}

En el ejemplo el selector :has(.featured) verifica una condición dentro del elemento .card. Específicamente, se aplica a los elementos .card que contienen al menos un elemento descendiente con la clase featured. Con esta regla establecemos que cualquier elemento con la clase card tendrá un borde de color dorado (gold) si contiene al menos un elemento secundario con la clase featured. Esto nos permite un estilo dinámico basado en el contenido dentro de .card, lo que mejora la jerarquía visual y la experiencia del usuario en una página web.

¿Para qué la usaríamos? Puede ser particularmente útil en escenarios en los que deseamos resaltar tarjetas (cards) que presentan contenido específico (como promociones o elementos destacados) sin necesidad de que agreguemos manualmente clases o estilos adicionales a cada tarjeta individualmente. En general, este fragmento de CSS ejemplifica cómo el CSS moderno puede aprovechar selectores avanzados como :has para crear diseños responsivos y conocedor del contexto.

5. Propiedades de contención (Contain Properties)

¿Qué es?

Las propiedades de contención permiten controlar cómo se comporta el contenido dentro de un elemento específico. Esto incluye la contención del tamaño, el layout, los estilos y la pintura (rendering), lo que significa que los cambios dentro del contenedor no afectan a los elementos fuera de él.

¿Por qué es útil?

Mejora el rendimiento y el control del diseño, especialmente para elementos complejos y sitios web grandes. Al contener los efectos dentro de un elemento, reducimos la cantidad de recalculación y rendering que el navegador necesita hacer.

Tipos

Existen varios tipos de contención que se pueden aplicar a un elemento. Aquí están los más comunes:

• contain: size; → Limita el tamaño del elemento, asegurando que el tamaño no dependa de su contenido.
• contain: layout; → Aísla el diseño dentro del contenedor, de manera que los cambios de diseño dentro del contenedor no afecten a elementos fuera de él.
• contain: style; → Limita los efectos de las propiedades de estilo (por ejemplo, color, font, etc.) dentro del contenedor.
• contain: paint; → Limita los efectos de la pintura y composiciones gráficas dentro del contenedor.
• contain: content; → Aplica todos los tipos anteriores de contención (size, layout, style, paint) en conjunto.

Ejemplo:

CSS.container { 
    contain: layout style;
}

En este ejemplo, el contenedor .container aísla sus efectos de layout y style, asegurando que no afecten a otros elementos fuera de él.

6. Propiedades de texto mejoradas

Las propiedades lógicas en CSS son una poderosa herramienta para controlar el flujo y la orientación del contenido de manera más efectiva. Estas propiedades son particularmente útiles para crear diseños que se adapten a diferentes direcciones de texto y modos de escritura.

Con estas propiedades, puedes asegurar que tu diseño sea flexible y compatible con una amplia variedad de idiomas y culturas.

direction, text-orientation y writing-mode.

direction

La propiedad direction define la dirección en la que el texto y otros elementos de bloque fluyen dentro de su contenedor. Es útil porque controlar la dirección del texto es crucial para soportar lenguajes que se leen de derecha a izquierda, como el árabe y el hebreo.

CSS.container { 
    direction: rtl;
}

En el ejemplo, el contenido dentro del contenedor .container fluirá de derecha a izquierda.

text-orientation

La propiedad text-orientation especifica la orientación del texto dentro de un elemento bloque cuando el contenido está en modo de escritura vertical. Es especialmente útil para lenguajes que pueden escribirse en direcciones verticales, como el japonés.

CSS.vertical-text { 
    writing-mode: vertical-rl;
    text-orientation: upright;
}

En el ejemplo, el texto dentro del elemento vertical-text se escribe de arriba a abajo y se orienta verticalmente en una posición erguida.

writing-mode

La propiedad writing-mode define si las líneas de texto y los bloques se colocan horizontalmente o verticalmente, y la dirección en la que progresan. Permite diseñar y adaptar el contenido a diversas orientaciones de escritura, facilitando el soporte para múltiples idiomas y estilos de presentación.

CSS.vertical-text { 
    writing-mode: vertical-rl;
}

En el ejemplo, el contenido dentro del elemento vertical-text se organiza verticalmente de derecha a izquierda.

Comparativa: Consultas de Contenedor CSS vs. Propiedades de Contención

Propósito:

• Contenedores de Consultas: Se centran en aplicar estilos basados en el tamaño del contenedor, lo cual es útil para la adaptabilidad y el diseño responsivo.
• Propiedades de Contención: Se centran en limitar los efectos de los elementos a su contenedor, mejorando el rendimiento y controlando el comportamiento del layout y el style.

Uso:

• Contenedores de Consultas: Utilizan la regla @container para definir estilos condicionales basados en el tamaño del contenedor.
• Propiedades de Contención: Utilizan la propiedad contain para definir qué efectos (layout, style, paint, size) se contienen dentro de un elemento.

Impacto

• Contenedores de Consultas: Facilitan el diseño modular y responsivo dentro de un contenedor específico.
• Propiedades de Contenciónn: Mejoran el rendimiento del navegador y controlan los efectos de diseño y rendering

Consejos

• Verificar su compatibilidad. Antes de implementar cualquier novedad del CSS, comprobaremos si alguna de las novedades del CSS está limitada por la versión del navegador y/o preferencias del usuario. Para ello contamos con un muy buen recurso en la web 'Can I Use' (¿Puedo utilizar?). Proporciona tablas de compatibilidad y estadísticas de uso actualizadas, lo que nos garantiza que nuestros diseños funcionen en varios navegadores y dispositivos.
• Tenemos más opciones con la regla @supports. Si es necesario utilizaremos la regla @supports para verificar la compatibilidad con el navegador y las preferencias del usuario, especialmente para la accesibilidad.

Conclusión

Este año 2024, es un año emocionante para el diseño web con CSS. Con estas nuevas características, podemos crear experiencias de usuario más ricas, flexibles y manejables. ¡Es hora de experimentar y crear nuevos diseños usando todo el potencial del CSS!

Cada desarrollo web es diferente. Ailon Webs estudia las mejores posibilidades para llevar adelante tu web. Consúltanos tu idea sin compromiso.

Solicita presupuesto sin compromiso