Modelo de referencia 2024: Más herramientas para ayudar a los desarrolladores web

Publicación: 10 de diciembre de 2024

El 2024 fue un año emocionante para el proyecto Baseline. Estamos a punto de completar el conjunto de datos subyacente y lanzamos herramientas como el panel de estado de la plataforma web y el widget de estado del modelo de referencia. Otros proyectos, como el Archivo de RUM, comienzan a adoptar Baseline. En esta publicación, se hace un repaso de Baseline en 2024.

¿Qué es Baseline?

El modelo de referencia etiqueta las funciones web que son compatibles con todos los navegadores principales en computadoras y dispositivos móviles. Si las funciones que se usan forman parte del modelo de referencia, puedes confiar en el nivel de compatibilidad del navegador.

El nuevo logotipo disponible con todos los navegadores que muestran que admiten una función.
Nuevo logotipo de referencia disponible que se muestra en la página de visibilidad del contenido de MDN.

Para obtener más detalles sobre las diferentes etiquetas de Baseline y cómo un componente web se convierte en Baseline, consulta el sitio de Baseline o mira el video Crea con confianza con Baseline.

El proyecto Baseline en 2024

El trabajo de web-features está completo en un 81%.

web-features es un esfuerzo por crear un catálogo compartido de funciones de la plataforma web. A cada componente se le asigna un grupo y una definición, y los datos de compatibilidad del modelo de referencia se registran en este conjunto de datos.

Este año, dedicamos mucho esfuerzo a avanzar en este trabajo. A partir de hoy, el 81% de las claves de funciones se asignan y se pueden consumir con el paquete npm web-features. web-features es la fuente de información de los estados de Baseline.

Nuevo panel de estado de la plataforma web

El panel de estado de la plataforma web proporciona estadísticas sobre la implementación de funciones de la plataforma web en diferentes navegadores. El panel se respalda con datos de web-features, por lo que la confiabilidad de este panel mejoró mucho a medida que el trabajo de las funciones web se volvió más completo.

Puedes hacer un seguimiento del progreso de funciones específicas o filtrar para ver un conjunto de funciones, como Base de referencia de 2024. Este panel complementa los recursos existentes, como Can I Use y los datos de compatibilidad de MDN, y ofrece una visión más amplia de la evolución de la plataforma web.

Para obtener más información sobre el panel, consulta Anuncio del panel de la plataforma web. Se agregaron más filtros desde el lanzamiento, como group: y snapshot:. Por ejemplo, snapshot:ecmascript-2023 te mostrará las funciones incluidas en ES2023.

Widget de <baseline-status>

El componente web <baseline-status> también usa los datos de componentes web y ya está listo para usarse en tus propios sitios y diapositivas. Instálalo desde npm y, luego, usa el componente cada vez que menciones una función.

Widget de estado de Baseline renderizado como una imagen.
Widget <baseline-status>.

Obtén más información para usar el componente web de estado del modelo de referencia.

Sitio oficial y logotipos

Baseline es propiedad del grupo comunitario WebDX del W3C y, este año, creamos una página oficial para el proyecto Baseline.

Si adoptas Baseline en tu proyecto, escribes sobre él o das una charla sobre él, puedes enviar una solicitud de extracción para que tu proyecto aparezca en la página de Baseline en uso.

Cuando uses Baseline en tu proyecto, consulta los lineamientos de uso del nombre y el logotipo. Los logotipos tienen licencia para que los uses cuando quieras mostrar el estado de las funciones web.

El proyecto de interoperabilidad hizo que muchas funciones de Baseline estén disponibles recientemente.

El proyecto Interop es un esfuerzo multinavegador para mejorar la interoperabilidad de la Web. Las funciones de este proyecto están orientadas a la implementación en varios navegadores, lo que acelera el tiempo para que se conviertan en el modelo de referencia recientemente disponible. Durante Interop 2024, Shadow DOM declarativo, font-size-adjust, requestVideoFrameCallback y text-wrap: balance llegaron al modelo de referencia 2024, y muchos otros están muy cerca de completarse.

Estadísticas de RUM

La página de estadísticas del Archivo de RUM fue la primera herramienta en integrar Baseline. Puedes ver cuántos usuarios se incluyen en cada año de referencia según sus datos. Esto puede ayudarte a elegir un año de Baseline para tu proyecto en lugar de adoptar el Baseline ampliamente disponible.

Consulta Integración del modelo de referencia con el archivo de RUM para obtener más información.

Serie de videos This Is Baseline

Para brindarte una explicación breve y rápida de las funciones nuevas de Baseline, publicamos una serie de videos llamada #thisisbaseline. Obtén información sobre nuevos métodos de Set, la API de Screen Wake Lock, la subcuadrícula CSS y mucho más en menos de 60 segundos.

Mira todos los videos de This Is Baseline aquí.

Ven a chatear con nosotros en persona.

El equipo asistió a muchas conferencias este año para presentarte Baseline,escuchar tu opinión y responder tus preguntas. Estas son algunas de las charlas que presentamos.

Mira la presentación de Rachel en FITC Web Unleashed en octubre, la sesión de Pete en connect.tech y la charla de Mariko en JSNation en noviembre. Además, esperamos verte en algunos eventos geniales en 2025.

Qué incluye el modelo de referencia de 2024

A medida que termina el año, sabemos qué funciones forman parte del Baseline 2024. Estos son algunos aspectos destacados.

@property

Las propiedades personalizadas de CSS (también conocidas como variables de CSS) son una función ampliamente disponible. La capacidad de definir propiedades personalizadas con un tipo, valores predeterminados y herencia mediante la regla@property es compatible con todos los navegadores principales desde julio de 2024.

Nuevos métodos de Set

Set forma parte de JavaScript desde ES2015, pero este año se agregaron más métodos para ejecutar operaciones matemáticas en conjuntos, como intersection y union, que son compatibles con todos los navegadores principales.

AVIF

AVIF es un formato de imagen moderno que, por lo general, tiene una mejor compresión que otros formatos de imagen, como WebP, JPEG, PNG y GIF. Desde enero de 2024, todos los navegadores principales admiten AVIF.

…y mucho más

Por supuesto, hay muchas más funciones que se convirtieron en Baseline este año. Puedes consultar las funciones que se incorporaron al modelo de referencia durante 2024 aquí.

Conclusión

Cuando anunciamos el proyecto Baseline en mayo de 2022, solo era un concepto y una definición inicial de Baseline. En esta publicación, se destaca solo parte del trabajo realizado para convertir Baseline en algo que pueda ser parte del flujo de trabajo de todos los desarrolladores.

Queremos agradecer el arduo trabajo que todos realizaron en el proyecto Baseline.

Personas que contribuyeron a web-features: Victor Allen, Dietrich Ayala, Daniel Beck, Patrick Brosset, Sondra Eby, Adriana Jara, Mariko Kosaka, Pete LePage, Florian Scholz, James Stuckey Weber y queengooborg (vinilo)

Widget <baseline-status>: Ewa Gasperowicz y el equipo de DevRel de Chrome

Panel de estado de la plataforma web: Panos Astithas, Kyle Ju, James Scott, Daniel Smith y Jason Xu

Equipo de Baseline de Google: Aaron Abbarno, Rachel Andrew, Tony Conway, Philip Jägenstedt, Adriana Jara, Mariko Kosaka, Pete LePage, Nandu Nair, Ali Spivak y Kadir Topal

Agradecimientos especiales a: Alexis Deveria en CanIUse, Claas Augner, Hermina Condei, Florian Dieminger, Ruth John, Leo McArdle en MDN, Nic Jansma y Robin Marx en RUM Archive, colaboradores del proyecto de interoperabilidad, Apple, Firefox, Igalia, Microsoft, Open Web Docs, OddBird y miembros del grupo comunitario de WebDX.