Embalaje CSS 2025 – Revista Smashing

Si divido la evolución de CSS en categorías, hemos ido mucho más allá de los requisitos. border-radius Parece que vivimos en el futuro. Actualmente vivimos en un momento en el que las plataformas nos brindan las herramientas no solo para modificar la capa visual, sino también para redefinir fundamentalmente la forma en que construimos interfaces. No creo que se pueda superar la cantidad de funciones anunciadas para 2024. Nunca he estado tan feliz de equivocarme.

El equipo de ChromeEnvoltura CSS 2025“Más que una simple lista de funciones; es un manifiesto para una web nativa y dinámica. Como alguien que ha pasado varios años documentando estas evoluciones, desde Definiendo la era “CSS5” a lo intrincado Utilidades de diseño modernas — Me encontré viendo el resumen de este año con una gran sensación de entusiasmo. Estamos viendo un cambio hacia una “ergonomía optimizada” y “interacciones de próxima generación” que nos permiten dejar de luchar con el código y comenzar a dar forma a las interfaces en su estado natural.

En este artículo podrás encontrar Obtenga un vistazo completo a las funciones principales en los informes de Chromeanalizado a través de mis experimentos recientes y esperanzas para el futuro de la plataforma.

La revolución de los componentes: finalmente, opciones nativas personalizables

Durante años hemos dependido de un montón de bibliotecas de JavaScript para diseñar menús desplegables, y esta plataforma finalmente resuelve este “problema de décadas”. Como detallé Me sumerjo en la historia de las opciones personalizables (y artículos relacionados), ha sido un largo camino que involucra Abrir interfaz de usuarionombres de cobertizos para bicicletas como <selectmenu> y <selectlist>y finalmente encontré una solución que reutilizó el existente <select> elemento.

introducir appearance: base-select es una base sólida. Nos permite personalizar completamente <select> Elementos, incluidos botones y menús desplegables (a través de ::picker(select)) — Utilice CSS estándar. Fundamentalmente, esto se construye teniendo en mente la mejora progresiva. Al agrupar nuestros estilos en consultas funcionales, garantizamos una experiencia perfecta en todos los navegadores.

Podemos optar por adoptar este nuevo comportamiento sin dañar los navegadores más antiguos:

select {
  /* Opt-in for the new customizable select */
  @supports (appearance: base-select) {
    &, &::picker(select) {
      appearance: base-select;
    }
  }
}

Es muy interesante un añadido fantástico que permite añadir contenido enriquecido como imágenes o logotipos a las opciones. Ahora podemos crear varias selecciones:

• Manifestación: Creé un Demostración de Poké Aventura muestra lo nuevo <selectedcontent> Element puede clonar contenido enriquecido de opciones (como un ícono de Pokéball) directamente en el botón.

Esta característica por sí sola marca un gran cambio en la forma en que creamos formularios, reduciendo las dependencias y la deuda técnica.

Históricamente, la creación de carruseles ha sido un punto de fricción entre desarrolladores y clientes. A los clientes les encantan, los desarrolladores temen el JavaScript necesario para hacerlos accesibles y eficaces. llegada ::scroll-marker y ::scroll-button() Los pseudoelementos cambian completamente esta dinámica.

Estas características nos permiten crear puntos de navegación y botones de desplazamiento utilizando únicamente CSS y vincularlos de forma nativa al contenedor de desplazamiento. Como escribí en mi blog, esto es Enamorándonos de la primera diapositiva. La capacidad de crear un control deslizante accesible y completamente funcional sin una sola línea de JavaScript no solo es conveniente; Esta es una victoria en el rendimiento. Hay algunos problemas de accesibilidad en torno a esta función y, si bien funcionan, estoy seguro de que depende de nosotros, los desarrolladores, hacer que funcione. La ventaja es que todos estos cambios en la interfaz de usuario son mucho más fáciles que la manipulación personalizada del DOM y el arrastre de etiquetas aria, pero estoy divagando…

Ahora podemos agrupar marcadores automáticamente usando scroll-marker-group Y use la posición del ancla para diseñar los botones, colocándolos exactamente donde queremos.

.carousel {
  overflow-x: auto;
  scroll-marker-group: after; /* Creates the container for dots */

  /* Create the buttons */
  &::scroll-button(inline-end),
  &::scroll-button(inline-start) {
    content: " ";
    position: absolute;
    /* Use anchor positioning to center them */
    position-anchor: --carousel;
    top: anchor(center);
  }

  /* Create the markers on the children */
  div {
    &::scroll-marker {
      content: " ";
      width: 24px;
      border-radius: 50%;
      cursor: pointer;
    }
    /* Highlight the active marker */
    &::scroll-marker:target-current {
      background: white;
    }
  }
}

Consulta de estado: ¿Está atascado el objeto adhesivo? ¿Algo animado se rompió de repente?

Durante mucho tiempo, nos faltó la capacidad de comprender una “Los elementos pegajosos están atascados” o “Los elementos elásticos están rotos” No se basa en el truco de IntersectionObserver. Chrome 133 introduce consultas de estado de desplazamiento, lo que nos permite consultar estos estados de forma declarativa.

estableciendo container-type: scroll-stateahora podemos diseñar niños según si están estancados, rotos o desbordados. Esta es una gran mejora en la “calidad de vida” que he estado esperando ansiosamente desde el Día CSS 2023. Incluso ha evolucionado mucho desde que también podemos ver la dirección del desplazamiento, ¡qué lindo!

Como un ejemplo simple: finalmente podemos aplicar una sombra paralela a un título. solo Cuando en realidad está pegado a la parte superior de la ventana gráfica:

.header-container {
  container-type: scroll-state;
  position: sticky;
  top: 0;

  header {
    transition: box-shadow 0.5s ease-out;
    /* The query checks the state of the container */
    @container scroll-state(stuck: top) {
      box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px;
    }
  }
}

• Manifestación: uno título pegajoso La sombra sólo se aplica cuando realmente está pegada.

• Manifestación: uno Lista de temas de Pokémon Utiliza consultas de estado de desplazamiento combinadas con posicionamiento de ancla para mover el marco sobre el carácter capturado actualmente.

Ergonomía optimizada: lógica en CSS

La sección Optimización de la ergonomía de CSS Wrapped destaca las características que hacen que nuestro flujo de trabajo sea más intuitivo. Tres características son transformadoras de la forma en que escribimos la lógica:

1. if() declaración
   Finalmente tenemos declaraciones condicionales en CSS. este if() La función actúa como el operador ternario de una hoja de estilo, lo que nos permite aplicar valores basados ​​en medios, soporte o consultas de estilo en línea. Esto reduce la necesidad de información detallada. @media Bloqueo para cambios de propiedad única.
2. @function Función
   Finalmente podemos mover algo de lógica a un lugar diferente, lo que da como resultado algunos archivos más limpios, lo cual es una característica real de calidad de vida.
3. sibling-index() y sibling-count()
   Estas funciones de conteo de árboles resuelven el problema de intercalar elementos animados o con estilo según el tamaño de la lista. mientras exploro Diseñar a los hermanos nunca ha sido tan fácil con CSSlo que elimina la necesidad de codificar propiedades personalizadas (p. ej. --index: 1) en nuestro HTML.

Ejemplo: calcular el diseño

Ahora podemos escribir fórmulas matemáticas concisas. Por ejemplo, intercalar la animación de una tarjeta que entra en pantalla es sencillo:

.card-container > * {
  animation: reveal 0.6s ease-out forwards;
  /* No more manual --index variables! */
  animation-delay: calc(sibling-index() * 0.1s);
}

Incluso intenté usar estas funciones y trigonometría para colocar elementos en un círculo perfecto sin ningún JavaScript.

• Manifestación: poner artículos en circulo perfecto usar sibling-index, sibling-county el nuevo CSS @function característica.

Mi lista de tareas pendientes de CSS: funciones que no puedo esperar para probar

Mientras he estado ocupado esculpiendo selecciones y transiciones, el informe “CSS Wrapped 2025” está lleno de otras ventajas que aún no he tenido la oportunidad de usar en CodePen. Estos ocupan un lugar destacado en mi próxima lista de experimentos:

Consulta de contenedor ancla

Utilicé anclaje CSS para los botones en la demostración del carrusel, pero “CSS Wrapped” resalta la evolución de esto: Consulta de contenedor ancla. Esto resuelve un problema que teníamos con la información sobre herramientas: si el navegador volteaba la información sobre herramientas de arriba a abajo debido a limitaciones de espacio, la “flecha” a menudo apuntaba en la dirección incorrecta. Consulta utilizando contenedores anclados (@container anchored(fallback: flip-block)), podemos diseñar el elemento según la posición alternativa que el navegador realmente elija.

Grupo de transición de vista anidada

Las transiciones de vista son una revolución, pero vienen con compensaciones específicas: aplanan el árbol de elementos, lo que a menudo rompe las transformaciones 3D o se desborda:recorta. Siempre sentí que le faltaba algo y esta podría ser la respuesta. Al usar view-transition-group: nearestfinalmente podemos anidar grupos de transición.

Esto nos permite mantener efectos de recorte o rotaciones 3D durante las transiciones, algo que antes no era posible porque los elementos se elevaban al nivel superior.

.card img {
  view-transition-name: photo;
  view-transition-group: nearest; /* Keep it nested! */
}

Tipografía y formas

Finalmente, el experto en ergonomía que había en mí estaba ansioso por probar. Recorte del cuadro de textoque promete eliminar los molestos espacios en blanco adicionales encima y debajo del contenido del texto (interlineado) para, en última instancia, lograr una alineación vertical perfecta. Para la creatividad, corner-shape y shape() Las funciones están abriendo diseños no rectangulares, permitiendo “cubos” y rutas complejas que responden a variables CSS. Dicho esto, ¡no puedo esperar a ver un diseño lleno de ardillas!

Un futuro prometedor

Estamos presenciando un mundo CSS puede manejar lógica, estado e interacciones complejas que anteriormente eran dominio de JavaScript.. Características como moveBefore (Conservar el estado DOM del iframe/vídeo) y attr() (El uso de colores y tipos de cuadrícula distintos de las cadenas) solidifica aún más esta realidad.

Si bien algunas de estas características son actualmente experimentales o específicas de Chrome, el impulso es innegable. Tenemos que esperar un soporte continuo de todos los navegadores a través de iniciativas como Interop para garantizar que estas características se conviertan en la base. Dicho esto, tener un motor de navegador es tan importante como tener todas estas excelentes funciones en Chrome First. Estas nuevas funciones deben analizarse, modificarse y probarse antes de que lleguen al navegador.

Ahora es un buen momento para adentrarse en CSS. Ya no nos limitamos a diseñar documentos; Diseñamos documentos. Estamos utilizando un conjunto de herramientas nativo más potente que nunca para crear aplicaciones dinámicas, ergonómicas y potentes.

Continuemos esta nueva era y corramos la voz.

Esto es envoltura CSS!

(gg, yk)