Celebra una Web más interoperable con Interoperabilidad 2023

Al final del año pasado, concluyó la Interoperabilidad 2023. Este esfuerzo de parte del navegador proveedores y otras partes pretende crear una Web más interoperable, con menos entre los navegadores para confundirte. Esta publicación comparte los resultados finales, y también algunas de las funciones favoritas del equipo de Chrome.

Captura de pantalla de las puntuaciones experimentales del navegador Interoperabilidad general: 95. Investigaciones: 85. Chrome/Edge: 99. Firefox: 98. Safari: 97.
Puntuaciones finales para las versiones experimentales de navegadores al 31 de enero de 2024. Consulta wpt.fyi/interop-2023

Es genial ver tanto color verde; si lo comparamos con las puntuaciones a principios de 2023, hemos recorrido un largo camino, con cada navegador tuvieron un gran aumento en la puntuación.

¿Qué nos entusiasma?

Encuentra la lista completa de áreas de enfoque para 2023 en el panel de Interoperabilidad 2023. Algunas áreas de enfoque, como :has(), las consultas de contenedores y el atributo inert abarcaban toda una función. Otros, Por ejemplo, el trabajo en Flexbox tuvo que ver con algunas pruebas fallidas sutiles en un función existente en varios navegadores.

:has()

Navegadores compatibles

  • 105
  • 105
  • 121
  • 15.4

Origen

"Por último, un selector superior para CSS. Esto se solicitó casi desde el primer día, y finalmente tenerlo en todos los navegadores es fantástico, y significa que los desarrolladores necesitan ejecutar menos JavaScript para emular este selector".—Thomas Steiner, ingeniero de Relaciones con Desarrolladores de Chrome.

Ha habido un gran entusiasmo sobre la pseudoclase funcional, :has(), porque llevó a la plataforma una solicitud clave de los desarrolladores. Integra te proporciona un selector de elemento superior, puedes seleccionar un elemento según los elementos que se en su interior. Sin embargo, puede usarse para mucho más. Como se explica en el artículo Unido a CSS, puedes seleccionar mucho más que un elemento principal y hasta hacer selecciones giradas.

Demostración de :has() de CSS: Conector

Una Kravets, ingeniero de Relaciones con Desarrolladores del equipo de Chrome explica:

"El selector :has() es una de las funciones de CSS disponibles más flexibles y potentes. Con ella, puedes aplicar diseño a cualquier elemento superior en función de la presencia, el estado o la cantidad par de elementos secundarios. Pero lo más importante es que puedes combinarla con otros combinadores para darle estilo a elementos del mismo nivel y realmente obtener un nuevo nivel de control de estilo sobre tu IU. Es una función muy flexible. Ya he visto muchas demostraciones geniales que reducen la necesidad de utilizar secuencias de comandos adicionales para aprovechar la potencia de :has()”.

Como me recordó Philip Jägenstedt, un ingeniero de software de Chrome, :has() era la principal función con la que los desarrolladores tuvieron dificultades debido a la falta de compatibilidad cuando se les pidió en la encuesta sobre el estado de CSS del 2023. No somos las únicas personas entusiasmadas de tenerla disponible.

Puedes escuchar a Una, junto con Adam Argyle, hablar sobre has() en el podcast de CSS y, luego, obtener más información sobre :has() de estas publicaciones de la comunidad web

Consultas de contenedores

Navegadores compatibles

  • 105
  • 105
  • 110
  • 16

Origen

El 2023 resultó ser un gran año para cosas que antes se consideraban imposibles. En además de :has(), la plataforma web finalmente obtuvo compatibilidad entre navegadores para las consultas de contenedores. Has estado solicitando consultas de contenedores (o elementos) desde de 2011, solo un año después de que se presentara el concepto de diseño adaptable. Ahora, ya que está aquí y disponible en todos los principales motores de navegador.

Una y Adam conversaron sobre las consultas de contenedores en el podcast de CSS, y Una los presentó en un episodio de Cómo diseñar en el navegador La comunidad también compartió muchas sugerencias y ideas.

Subcuadrícula

Navegadores compatibles

  • 117
  • 117
  • 71
  • 16

Origen

Subgrid es mi inclusión favorita en Interoperabilidad 2023. Te permite definir una cuadrícula en una elemento superior y luego usarás los tamaños de segmento que se definen en ese elemento superior, en cuadrículas anidadas dentro de esa cuadrícula principal. Gracias al trabajo de la Web de Microsoft Edge ingenieros de plataforma, subgrid comenzó a estar disponible en los principales motores de navegadores durante 2023 para mejorar la puntuación para Chrome esta emocionante función para todos.

Adriana Jara, ingeniera de Relaciones con Desarrolladores de Chrome, me comentó cómo la red facilitó la creación de una gran IU,

"No tengo un problema con las imágenes, los diseños, mantener una apariencia coherente y adaptarme a las pantallas. Pero con cuadrícula y subcuadrícula de alguna manera es posible crear un diseño que funcione en varios tamaños de pantalla y se adapte automáticamente al contenido. Es mi preferida porque aborda una necesidad básica de crear un sitio web que brinde a los usuarios una experiencia decente sin mucha experiencia”.

Escribí algunos casos de uso para Subgrid en un artículo sobre 12 Days of Web y, al igual que con las otras funciones. en esta publicación, puedes escuchar un episodio de podcast de CSS. También hay muchos recursos en toda la Web.

Espacios de color y funciones

Navegadores compatibles

  • 111
  • 111
  • 113
  • 15

Origen

No es de extrañar que el desarrollador de CSS de Chrome Adam Argyle me haya dicho que los espacios de color y las funciones su característica favorita,

"Goodbye indoor HSL channel value math; Presentamos las frases de una sola línea sobre la variante de color justo a tiempo. Los nuevos espacios de color y funciones no solo resuelven problemas en el flujo de trabajo del color, sino que brindan acceso a colores y gradientes más avanzados, confiables y vibrantes. Desbloquear algunas habilidades y, al mismo tiempo, simplificarte la vida al mismo tiempo. Añade el condimento de interoperabilidad para que este plato sea colorido y delicioso".

Adam creó contenido increíble para que comprendas estas novedades funciones, como la Guía de colores de CSS de alta definición y gradient.style, y sobre funciones de color en el podcast de CSS.

Es emocionante tener estas funciones disponibles en todos los principales motores de navegador. Obtén más información en estos artículos geniales.

Esperamos con ansias la Interoperabilidad de 2024

Una vez que los atributos se vuelven interoperables, se vuelven parte Baseline, nueva función disponible. Es emocionante ver la cantidad de nuevos de atributos que se incorporaron a este grupo durante 2023, en gran parte debido a la de todos los involucrados en la Interoperabilidad 2023. Pronto será el momento de anunciar las áreas de enfoque seleccionadas para 2024 y todos esperamos ver cómo mucho mejor que la plataforma web este año.