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

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

Adam Argyle

Creo que todo desarrollador de frontend debería saber que :has() es más que un "selector superior", el cómo y el por qué de un subgrid, cómo anidar con sintaxis CSS integrada, cómo permitir que el navegador equilibre el texto del encabezado y cómo usar unidades de consulta de contenedor.

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

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

:has()

Navegadores compatibles

• 105
• 105
• 121
• 15.4

Origen

:has() llegó a todos los navegadores principales a fines de 2023. Este nuevo selector parece pequeño e inocente, pero te sorprenderás de todos los casos de uso que puede desbloquear: juegos, reactividad, diseño consciente del 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 superior. Recibió este nombre porque, por lo general, el sujeto de un selector está al final, como ul li, en el que li es el sujeto y obtiene los estilos. Con :has(), el elemento al comienzo del selector puede convertirse en el asunto. 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 en su interior.

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

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

Un selector deseado desde hace mucho tiempo es cambiar un diseño según la cantidad de elementos que tiene. Esto ahora es posible con :has(), ya que puede mantener el contenedor como sujeto mientras consulta la cantidad de elementos secundarios.

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

Otro ejemplo de nivel superior, cambia 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 superior. Sin embargo, ten en cuenta los siguientes ejemplos. Estos buscan algo basado en un ancestro común y, luego, pivotan el sujeto del selector a un elemento secundario en algún lugar más abajo en 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 desliza el área de contenido principal cuando un panel lateral tiene una clase de .--is-open:

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

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

Probar en Codepen

Cómo crear una subcuadrícula

subgrid

Navegadores compatibles

• 117
• 117
• 71
• 16

Origen

Durante muchos años, la comunidad web de frontend solicitó una subred para ayudar a completar y terminar el motor de diseño de cuadrícula CSS 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 obtener 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;
  }
}

Anida el CSS

nesting

Navegadores compatibles

• 120
• 120
• 117
• 17.2

Origen

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 compilaba el anidamiento, y ahora envío un diseño de página más pequeño. Sí, los diseños de página con anidamiento son más pequeños y todas las herramientas para desarrolladores del navegador están listas para representarlos.

Puedes encontrar una descripción general de la sintaxis de anidamiento 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;
  }
}

Permite que el navegador equilibre los títulos

balance

Navegadores compatibles

• 114
• 114
• 121
• 17.5

Origen

pretty

Navegadores compatibles

• 117
• 117
• x
• x

Origen

Sin text-wrap: balance, los desarrolladores y los redactores de textos deben usar sugerencias de saltos de línea, como elementos <wbr> o ­. En general, es una batalla perdida porque, en cuanto el contenido se traduce, se acerca o se modifica de alguna manera, no hay garantía de que esos atajos de unión estén en el lugar correcto para la nueva presentación del contenido.

Con el ajuste de texto equilibrado, puedes dejar que el navegador realice esta tarea. Puedes ver una comparación en el siguiente Codepen.

Usa unidades de consulta de contenedores

cqw

Navegadores compatibles

• 105
• 105
• 110
• 16

Origen

En la publicación del año pasado, se sugirió que todo desarrollador de frontend debería saber cómo escribir una consulta de contenedor. Si aún no lo hiciste, haz que 2024 sea el año en que des el paso y también revises las unidades de consulta de contenedores. Como resumen, Ahmad Shadeed escribió un excelente artículo sobre las unidades de consulta de contenedores en 2021.

Hay seis unidades de consulta de contenedor que son nuevas:

1. Una variante intercalada cqi.
2. 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 pequeña cqmin.
6. Una variante para la longitud más grande cqmax.

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

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

Esta es una tarjeta con tipografía responsiva del contenedor y una imagen que se adapta a la orientación del contenedor, y se reduce a la mitad de su tamaño 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, te recomendamos que repases todas las unidades disponibles en 2024.