5 fragmentos de CSS que todo desarrollador front-end debe conocer en 2024

CSS estable, potente y digno de tu caja de herramientas que puedes usar hoy mismo.

Adam Argyle

Creo que todos los desarrolladores de frontend deberían saber que :has() es más que un "selector principal", el cómo y el porqué de un subgrid, cómo anidar con la sintaxis CSS integrada, cómo permitir que el navegador equilibre el ajuste de texto del encabezado y cómo usar unidades de consultas de contenedores.

Esta publicación es una continuación de los 6 fragmentos de CSS que todo desarrollador de frontend debe conocer en 2023 del año pasado.

CSS:has(.potential-beyond-being-a-parent-selector)

:has() se lanzó en todos los navegadores principales a fines de 2023. Este nuevo selector parece pequeño e inocente, pero te sorprenderá la cantidad de casos de uso que puede desbloquear: juegos, reactividad, diseño adaptable al contenido, componentes inteligentes y mucho más que se explora en este artículo de Jhey.

A continuación, se muestran algunos ejemplos del uso de :has() como selector principal. Recibió este nombre porque, por lo general, el sujeto de un selector se encuentra al final, como ul li, en el que li es el sujeto y recibe los estilos. Con :has(), el elemento al comienzo del selector puede convertirse en el sujeto. En el siguiente ejemplo, el botón tiene un espacio si hay un elemento dentro con una clase de .icon. La tarjeta cambia de orientación si hay una imagen dentro.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

Un selector muy deseado es el que permite cambiar un diseño según la cantidad de elementos que contiene. Ahora es posible con :has(), ya que puede mantener el contenedor como sujeto mientras consulta la cantidad de hijos.

main:has(> :nth-child(5)) {…}

Otro ejemplo de nivel superior es cambiar los estilos establecidos en todo el documento cuando se habilita una casilla de verificación específica en la página:

html:has(#dark-mode:checked) {…}

Estos son casos de uso simples que no cambian el sujeto del selector. Si solo observas ejemplos como este, podrías pensar que :has() se limita a ser un selector principal. Sin embargo, ten en cuenta los siguientes ejemplos. Estas verificaciones buscan algo basado en un ancestro común y, luego, cambian el sujeto del selector a un elemento secundario en algún lugar más profundo de la página.

Este muestra un elemento de error de formulario si alguna de sus entradas no es válida:

form:has(:user-invalid) .error {
  display: block;
}

Este ejemplo desliza el área de contenido principal cuando un sidenav tiene una clase de .--is-open:

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

Aquí tienes una demostración divertida que usa :has() como selector principal, :has() con consultas de cantidad y consultas de contenedor para crear un diseño de cuadrícula que puede mostrar de forma elegante de 1 a 12 elementos en orientaciones vertical u horizontal:

Cómo crear una subcuadrícula

Durante muchos años, la comunidad web de frontend solicitó la subcuadrícula para ayudar a completar y finalizar el motor de diseño de cuadrícula CSS, que es muy popular y potente. Ahora está disponible en los tres motores principales.

Obtén más información sobre la subcuadrícula aquí si quieres ver una descripción general.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

Anidamiento al estilo de CSS

El anidamiento de CSS integrado estuvo disponible en todos los navegadores principales en 2023. Incluso actualicé mi sitio web para quitar el proceso de compilación que eliminaba la anidación, y ahora publico una hoja de estilo más pequeña. Sí, las hojas de estilo con anidación son más pequeñas y todas las herramientas para desarrolladores del navegador están listas para representarlas.

Puedes encontrar una descripción general de la sintaxis de anidación de CSS aquí para obtener todos los detalles. En el siguiente ejemplo de código, se muestra un ejemplo de sintaxis.

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

Permitir que el navegador equilibre los títulos

Sin text-wrap: balance, los desarrolladores y redactores de textos publicitarios deben recurrir a sugerencias de saltos de línea, como los elementos <wbr> o ­. En la mayoría de los casos, es una batalla perdida, ya que, en cuanto el contenido se traduce, se amplía o se modifica de alguna manera, no hay garantía de que esas sugerencias de ajuste se encuentren en el lugar correcto para la nueva presentación del contenido.

Con el ajuste de texto equilibrado, puedes dejar este trabajo en manos del navegador. Puedes ver una comparación en el siguiente Codepen.

Usa unidades de consulta de contenedor

En la publicación del año pasado, se sugirió que todos los desarrolladores de front-end deberían saber cómo escribir una consulta de contenedor. Si aún no lo has hecho, hazlo en 2024 y consulta también las unidades de consulta de contenedores. A modo de resumen, Ahmad Shadeed escribió un excelente artículo sobre las unidades de consultas de contenedores en 2021.

Hay seis nuevas unidades de consulta de contenedor:

1. Es una variante intercalada cqi.
2. Es una variante de ancho cqw.
3. Una variante de bloque cqb.
4. Una variante de altura cqh.
5. Una variante para la longitud más corta cqmin.
6. Una variante para la longitud que sea mayor cqmax.

Considera una situación para las animaciones relativas y las intrínsecas a un contenedor. Un elemento secundario que se desliza por completo fuera de su contenedor con 100cqi, es decir, el 100% del tamaño intercalado del contenedor.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

A continuación, se muestra una tarjeta con tipografía adaptable al contenedor y una imagen que se adapta a la orientación del contenedor, y se reduce a la mitad si la orientación es horizontal.

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

Si estas unidades son nuevas para ti, probablemente sea una buena idea revisar todas las unidades disponibles para ti en 2024.