Se usó la API de Cloud Translation para traducir esta página.

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

CSS estable, potente y digno de herramientas que puedes usar actualmente.

Adam Argyle

Creo que todos los desarrolladores front-end deben saber que :has() es más que un "selector principal". el cómo y el por qué de una subgrid, cómo anidar con la sintaxis de CSS integrada, cómo dejar que la ajuste de texto del título del equilibrio del navegador y cómo usar las 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 debería conocer en 2023.

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

:has()

Navegadores compatibles

Origen

:has() llegó a todos los navegadores principales a fines del 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 adaptado al contenido, componentes inteligentes y se explican mucho más en este artículo de Jhey.

Se muestran 4 paneles, cada uno con una imagen y una leyenda.
Cada imagen muestra un cerebro activando cada vez más poder mental. El primer panel
dice :has(). El segundo panel dice Figma:has(caption) como un selector principal.
El tercer panel dice .layout:has(> :nth-child(5)) como selector de cantidad.
El cuarto panel dice html:has(#checked) .new-subject como selector de cambio de sujeto condicional.

Estos son algunos ejemplos del uso de :has() como selector superior. Tiene este nombre porque por lo general, el tema de un selector está al final, como ul li, donde li es el asunto y obtiene los estilos. Con :has(), el elemento al comienzo del selector se puede convertir del asunto. En el siguiente ejemplo, el botón tiene un espacio si hay un elemento en su interior. 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 largo deseado es cambiar un diseño en función de la cantidad de elementos que contiene. Esto ahora es posible con :has(), ya que puede mantener el contenedor como sujeto mientras se consulta la cantidad de elementos secundarios.

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

Otro ejemplo de nivel superior, en la que se cambian los estilos establecidos en todo el documento Cuando se habilita una casilla de verificación específica de la página:

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

Estos son casos de uso simples que no cambian el tema del selector. Si solo ves ejemplos, de esta manera, podrías pensar que :has() está limitado a ser un selector superior. Ten en cuenta lo siguiente: ejemplos. Estos buscan elementos basados en un principal en común y, luego, giran el selector a un niño en alguna parte de la página.

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

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

Esta se desliza hacia afuera del área de contenido principal cuando un panel de navegación lateral tiene una clase de .--is-open:

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

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

Prueba Codepen

Crea una subcuadrícula

subgrid

Navegadores compatibles

Origen

Durante muchos años, la comunidad web de front-end solicitó subgrid para completar y finalizar el popular y potente motor de diseño de cuadrícula de CSS. Ahora está disponible en los tres motores principales.

Si deseas obtener una visión general, obtén más información sobre la subcuadrícula aquí.

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 estilo CSS

nesting

Navegadores compatibles

Origen

La anidación de CSS integrada comenzó a estar disponible en todos los navegadores principales en 2023. Incluso actualicé mi sitio web para eliminar el proceso de compilación que compilaba la anidación y ahora envío una hoja de estilo más pequeña. Sí, las hojas de estilo anidadas son más pequeñas y todas las Herramientas para desarrolladores del navegador están listas para representarlo.

Aquí encontrarás una descripción general de la sintaxis de anidamiento de CSS. para ver todos los detalles. El siguiente ejemplo de código 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 titulares

balance

Navegadores compatibles

Origen

pretty

Navegadores compatibles

Origen

Sin text-wrap: balance, los desarrolladores y redactores de textos deben quedar en espera de las sugerencias de salto de línea como elementos <wbr> o . Es principalmente una batalla perdedora porque tan pronto como contenido se traduzca, haga zoom o modifique de alguna manera, no hay garantía de que las sugerencias de ajuste estarán en el lugar correcto para la nueva presentación del contenido.

Con el ajuste de texto equilibrado, puedes dejarle este trabajo al navegador. Puedes ver una comparación en el siguiente CodePen.

Usa unidades de consulta de contenedor

cqw

Navegadores compatibles

Origen

En la publicación del año pasado, se sugirió que todo desarrollador front-end debería saber cómo escribir un una consulta de contenedor. Si aún no has aprendido, haz que el 2024 sea el año para dar el salto. y también obtienes unidades de consulta en contenedores. En resumen, Ahmad Shadeed escribió un excelente artículo sobre las unidades de consulta de contenedores en 2021.

Existen seis nuevas unidades de contenedor contenido:

Una variante intercalada cqi.
Una variante de ancho cqw.
Una variante de bloque cqb.
Una variante de altura cqh.
Es una variante para la longitud que sea menor cqmin.
Es una variante para la longitud más grande de cqmax.

Considera una situación para animaciones intrínsecas y relativas a un contenedor. Un elemento secundario que se desliza fuera por completo 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 receptiva de contenedor y una imagen que se adapta a la orientación del contenedor, y se convertirá en la mitad del 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, probablemente te convenga revisa todas las unidades disponibles para ti en el 2024.