A fines del año pasado, Interop 2023 concluyó. Este esfuerzo de los proveedores de navegadores y otros terceros tiene como objetivo crear una Web más interoperable, con menos diferencias entre los navegadores para confundirte. Esta publicación comparte los resultados finales, y también algunas de las funciones favoritas del equipo de Chrome.
Las puntuaciones finales
Es genial ver tanto el color verde. Compara esto con las puntuaciones a principios de 2023, y hemos recorrido un largo camino, ya que cada navegador ha experimentado un gran aumento en la puntuación.
¿Qué nos entusiasma?
Encuentra la lista completa de áreas de enfoque de 2023 en el panel de Interoperabilidad 2023. Algunas áreas de enfoque, como :has(), las consultas de contenedores y el atributo inert, cubrieron una función completa. Otros, por ejemplo, el trabajo en Flexbox, abordaron algunas fallas de prueba sutiles en una función existente en varios navegadores.
:has()
"Por último, se creó un selector superior para CSS. Ya se hizo casi desde el primer día, y, finalmente, tenerla en todos los navegadores es fantástico y significa que los desarrolladores deben ejecutar menos JavaScript para emular este selector".—Thomas Steiner, ingeniero de Relaciones con Desarrolladores de Chrome.
Hubo mucho entusiasmo acerca de la seudoclase funcional :has(), porque aportó a la plataforma una solicitud clave de los desarrolladores. que te proporciona un selector superior, que te permite seleccionar un elemento según los elementos que estén dentro de él. Sin embargo, puede usarse para mucho más. Como se explica en Unido con CSS, puedes seleccionar mucho más que un elemento superior y hasta hacer selecciones laterales.
:has() de CSS: conectorUna Kravets, ingeniera de Relaciones con Desarrolladores del equipo de Chrome, explica lo siguiente:
"El selector :has() es una de las funciones de CSS más flexibles y potentes que se encuentran disponibles recientemente. Con él, puedes diseñar cualquier elemento superior en función de la presencia, el estado o, incluso, la cantidad de elementos secundarios. Pero lo que es más es que puedes combinarlo con otras combinaciones para crear elementos del mismo nivel y obtener un nuevo nivel de control de estilo sobre tu IU. Es una función tan flexible. Ya he visto muchísimas demostraciones 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 tenían problemas debido a la falta de compatibilidad cuando se les preguntó en la encuesta sobre el estado de CSS en 2023.
Por lo tanto, no somos los únicos entusiasmados por tenerla disponible.
Puedes escuchar a Una y a Adam Argyle hablar sobre has() en The CSS Podcast y, luego, obtener más información sobre :has() en estas publicaciones de la comunidad web.
- Conoce el selector
:has()de CSS con ejemplos - Bloqueo de desplazamiento con
:has() - Un caso de uso para CSS
:has()
Consultas de contenedores
El 2023 fue un año increíble para las cosas que antes se consideraban imposibles. Además de :has(), la plataforma web finalmente obtuvo compatibilidad entre navegadores para las consultas de contenedores. Has solicitado consultas de contenedores (o elementos) desde
2011, solo un año después de que se presentara el concepto de diseño responsivo. ya está aquí, y disponible en todos los principales motores de navegadores.
Una y Adam hablaron sobre las consultas de contenedores en el Podcast de CSS y, en Una, en un episodio de Diseño en el navegador. La comunidad también ha compartido muchos consejos e ideas.
- Las consultas de contenedores ya están aquí
- Unidades de consulta de contenedores y tipografía fluida
Subcuadrícula
Subgrid es mi inclusión favorita en Interoperabilidad de 2023. Te permite definir una cuadrícula en un elemento superior y, luego, usar los tamaños de segmento definidos en ese elemento superior en las cuadrículas anidadas dentro de esa cuadrícula principal. Gracias al trabajo de los ingenieros de la plataforma web de Microsoft Edge, subgrid comenzó a estar disponible en todos los motores de navegador principales durante 2023 para aumentar la puntuación de Chrome y ofrecer esta emocionante función a todo el mundo.
La ingeniera de Relaciones con Desarrolladores de Chrome, Adriana Jara, me contó cómo la cuadrícula y la subcuadrícula facilitan la creación de una gran IU,
"No me gustan las imágenes y los diseños, mantener una apariencia coherente y adaptarme a las pantallas. Pero con la cuadrícula y la 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 favorita porque aborda la necesidad básica de crear un sitio web que brinde a los usuarios una experiencia aceptable sin necesidad de tener mucha experiencia".
Escribí algunos casos de uso para la subcuadrícula en un artículo sobre 12 Days of Web y, al igual que con las otras funciones de esta publicación, puedes escuchar un episodio de un podcast de CSS sobre este tema. También hay muchos recursos de toda la Web.
- Más información sobre la subcuadrícula de CSS
- Video: Diseños fáciles y más coherentes con subcuadrícula
- Diseño de contenido con cuadrícula y subcuadrícula de CSS
Funciones y espacios de color
No fue de sorpresa que Adam Argyle, desarrollador de CSS de Chrome, me dijo que los espacios de color y las funciones eran su función favorita.
"Goodbye awkward HSL channel value variable math; Hello just-in-time item-at-liners" Las nuevas funciones y espacios de color no solo resuelven problemas del flujo de trabajo del color, sino que también brindan acceso a colores y gradientes más avanzados, confiables y llamativos. Descubre cómo desbloquear algunas habilidades y simplificarte la vida al mismo tiempo. Añade ese condimento de interoperabilidad para hacer que este plato sea delicioso.
Adam creó contenido increíble para ayudarte a comprender estas funciones nuevas, como la Guía de colores de CSS de alta definición y gradient.style, y habla sobre las funciones de color en el podcast de CSS.
Es emocionante tener estas funciones disponibles en todos los motores de navegador principales. Obtén más información en estos excelentes artículos.
A la espera de Interoperabilidad 2024
Una vez que las funciones se vuelven interoperables, se vuelven parte de Baseline, que estará disponible recientemente. Es emocionante ver la cantidad de funciones nuevas que se incorporaron a este grupo durante 2023, en gran parte debido al trabajo de todos los involucrados en Interoperabilidad de 2023. Pronto será el momento de anunciar las áreas de enfoque seleccionadas para 2024, y todos esperamos con ansias ver lo mucho mejor que puede mejorar la plataforma web este año.