Novedades de la Web

Rachel Andrew

Publicado el 20 de mayo de 2025

En la conferencia magistral de Novedades en la Web de Google I/O 2025, se compartieron todos los anuncios de Baseline, junto con un vistazo a algunas de las funciones que se incorporaron a Baseline este año. Fue un año increíble para la Web y, en este artículo, Baseline hace un resumen de todo lo que se mencionó, con todos los vínculos para obtener más información.

El panel de la plataforma web y las funciones web

En 2024, anunciamos el lanzamiento inicial del Panel de la plataforma web, que usa el conjunto de datos de web-features y te permite explorar todas las funciones que forman parte de Baseline.

Los datos de funciones web ahora están completos, con todas las funciones de la plataforma asignadas. A medida que se agregan funciones nuevas a Baseline cada mes, se actualizan los datos y todo esto se expone en el panel.

Herramientas para ayudarte a descubrir tu propio objetivo de referencia

Si bien puedes basar tu política de compatibilidad con navegadores en el objetivo cambiante de Baseline Widely available, como la agencia del Reino Unido Clearleft, también puedes adoptar un objetivo fijo basado en un año de Baseline. Ahora puedes usar tus propios datos del usuario junto con los datos de las funciones web para determinar el mejor objetivo para ti.

El año pasado, en I/O, anunciamos que RUMvision implementaría Baseline en su producto, y esta integración ya está disponible.

Como usa tus datos de RUM, te ayuda a identificar qué año de referencia adoptar en función de esos datos, en lugar de un promedio global. También puede ayudarte a determinar si la opción Ampliamente disponible de Baseline es adecuada para ti.

También puedes usar tus datos de Google Analytics para ver claramente qué porcentaje de tus usuarios admite cada objetivo de Baseline con el nuevo Verificador de Baseline de Google Analytics.

Estas son solo dos de las herramientas de una colección cada vez mayor que te ayudan a correlacionar tus datos de usuarios reales con Baseline.

Recientemente, el Grupo de la comunidad de DX en la Web lanzó una extensión para Netlify que muestra compatibilidad con diferentes años de Baseline y con la disponibilidad general en tus sitios para ayudarte a decidir qué segmentar en tus herramientas de compilación. Próximamente, se integrará con el producto Observatory RUM de Cloudflare y con Contentsquare.

Integrar los datos con tus propias herramientas

Los datos de las funciones web son abiertos y están disponibles para tus propias integraciones. Estamos tratando de facilitar esa tarea.

Usa la API de Web Platform Dashboard o consume los datos de funciones web directamente desde el paquete npm.

Ahora puedes asignar versiones del navegador a un destino de referencia con el módulo baseline-browser-mapping del grupo de la comunidad WebDX de W3C. Este módulo se puede usar en un entorno de JavaScript del servidor o descargando archivos JSON o CSV que se actualizan a diario desde el repositorio.

Estos datos incluyen asignaciones no solo para el conjunto principal de navegadores de Baseline, sino también para navegadores descendentes, como Samsung Internet, Opera, UC Browser y WebView de Android.

Descubre si tu objetivo de referencia admite las funciones

La información de referencia ahora se encuentra en la mayoría de las páginas de MDN y Can I Use, también se puede encontrar en el panel de Web Platform y en los artículos de web.dev y CSS Tricks. Sin embargo, todo esto requiere que busques asistencia. Sería mucho más útil tener la información de Baseline en tu IDE mientras escribes código y como parte de todas las demás herramientas que usas.

Nos complace informarte que muchas herramientas clave ahora tienen compatibilidad con Baseline integrada o se pueden integrar fácilmente.

browserslist-config-baseline

Muchas herramientas, como Babel y PostCSS, usan browserslist para determinar qué navegadores admitir.

Junto con el CG de WebDX y los miembros de la comunidad, el equipo de Chrome ayudó a lanzar una nueva herramienta llamada browserslist-config-baseline. Esto te permite configurar tus destinos de browserslist en términos de Baseline, como ampliamente disponible o años de Baseline.

Con esto, cualquier herramienta que tome un destino de browserslist ahora se puede expresar en términos de Baseline.

Obtén más información en Cómo usar Baseline con browserslist.

Modelo de referencia en verificadores de código: ESLint y Stylelint

Recientemente, se hizo posible usar Baseline con verificadores de código gracias a algunas herramientas nuevas en el espacio de los verificadores, comenzando con ESLint para CSS.

ESLint básico tiene una regla use-baseline. Puedes establecer este valor en tu objetivo de referencia preferido y recibirás una advertencia cuando uses funciones más recientes que tu objetivo. Puedes elegir cómo resolver esas advertencias: reemplazar esa función por elementos primitivos o suprimir la advertencia del verificador de código, lo que es una solución perfectamente válida cuando sabes que estás usando una función de vanguardia de forma segura, por ejemplo, si se trata de una mejora progresiva.

De forma predeterminada, ESLint no mostrará advertencias si se usan funciones más recientes dentro de los bloques @supports, ya que los navegadores no compatibles no los evaluarán de todos modos.

Para tus necesidades de revisión de HTML, también hay un complemento de la comunidad llamado html-eslint.

Stylelint admite oficialmente un complemento llamado stylelint-plugin-use-baseline. Esta regla se comporta igual que la regla de ESLint para CSS, pero se ejecuta en Stylelint.

Muchos linters también tienen complementos para IDE, por lo que puedes obtener comentarios inmediatos sobre el estado de Baseline mientras codificas a través de subrayados ondulados.

Baseline en VS Code y JetBrains WebStorm

Muchos IDE admiten desde hace tiempo una forma de colocar el cursor sobre una función en tu editor y ver la lista de versiones del navegador compatibles.

Sin embargo, puede ser bastante difícil comprender si esa función es realmente segura de usar. Debes analizar mentalmente si faltan navegadores importantes en esa lista y qué tan nueva es la versión del navegador.

Para solucionar ese problema, nos asociamos con el IDE más popular que usan millones de desarrolladores web, VS Code, para integrar los datos de Baseline directamente en estas tarjetas de desplazamiento.

Ahora puedes colocar el cursor sobre una función y se te indicará si se considera básica y durante cuánto tiempo, o si hay navegadores importantes que aún no la implementan por completo.

Las funciones compatibles incluyen propiedades CSS, elementos HTML y atributos HTML. Obtén más información en Visual Studio Code ahora admite Baseline.

Esta integración significa que cualquier IDE basado en VS Code también se beneficiará de estas tarjetas de desplazamiento.

Además, nos complace anunciar que JetBrains implementará tarjetas de desplazamiento en su IDE de JavaScript y TypeScript de WebStorm.

La Web mejora más rápido que nunca

Esperamos que Baseline te ayude a aprovechar el hecho de que la Web interoperable está mejorando más rápido que nunca.

Puedes usar el panel de la plataforma web para ver todas las funciones que se convirtieron en Baseline Newly available en los últimos doce meses, desde Google I/O 2024.

También hay varias funciones que puedes tener la certeza de que estarán disponibles en Baseline muy pronto, ya que se incluyen en el proyecto Interop 2025. Puedes leer sobre todas las funciones incluidas en Interop2025: Otro año de mejoras en la plataforma web.

Modos de escritura lateral

Ya vimos una función que se convirtió en Baseline Newly available: los valores sideways-rl y sideways-lr para la propiedad writing-mode de CSS. Si usas un modo de escritura vertical solo para fines de diseño, es probable que los valores laterales sean los que debas usar.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Posicionamiento del ancla

La posición del ancla se lanzó en Chrome 125. Te permite vincular la posición de un elemento a un ancla, por ejemplo, cuando abres una sugerencia con un botón.

Ahora se incluye en Interop 2025, por lo que deberíamos verlo unirse a Baseline este año.

Métricas web esenciales: LCP y INP

API de LCP

API de Event Timing (para el INP)

Las Métricas web pueden ayudarte a cuantificar la experiencia de tu sitio y a identificar oportunidades de mejora. La iniciativa de Métricas web tiene como objetivo simplificar el panorama y ayudar a los sitios a enfocarse en las métricas más importantes, es decir, las Métricas web esenciales.

Interop 2025 incluye las métricas de Largest Contentful Paint (LCP) y Interaction to Next Paint (INP) a través de la implementación de la API de LargestContentfulPaint y la API de Event Timing en todos los navegadores.

Mejoras en el elemento <details>

El elemento <details> ya está disponible de forma general en Baseline. Se incluyó en Interop 2025 porque hay varias funciones que hacen que los widgets de divulgación con <details> sean más útiles.

El elemento <details> contiene un elemento <summary>, que es la parte visible en la página cuando el elemento <details> está contraído. Fuera de <summary>, se encuentra el contenido del elemento <details>, que está oculto hasta que el usuario hace clic en el resumen.

Una de las cosas que se están haciendo interoperables durante Interop 2025 es ocultar el contenido con content-visibility en lugar de display, lo que significa que, si no se expande, el contenido no se renderizará en absoluto.

El seudoelemento ::marker también forma parte del trabajo de Interop 2025. El seudoelemento ::marker te permite aplicar diseño al triángulo de divulgación del elemento <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Luego, otro seudoelemento: ::details-content.

::details-content representa el contenido, la parte del elemento details que se expande y se contrae, y te permite aplicarle diseño.

[open]::details-content {
  border: 5px dashed hotpink;
}

También hay algunas mejoras interesantes, como la expansión automática del elemento <details> con coincidencias de la función Buscar en la página y la incorporación del valor until-found del atributo hidden de HTML a Baseline Newly available. Esto oculta un elemento hasta que se encuentra con la búsqueda en la página del navegador o se navega directamente a él siguiendo un fragmento de URL.

CSS @scope

La regla @scope de CSS te permite limitar el alcance de tus selectores. Si estableces una raíz de alcance con @scope, todas las reglas de estilo anidadas dentro de la regla @ solo se aplicarán a ese árbol del DOM.

Por ejemplo, si solo deseas segmentar los elementos <img> dentro de un elemento con una clase de .card, entonces .card se convertiría en la raíz del alcance.

@scope (.card) {
    img {
        border-color: green;
    }
}

Obtén más información en Limita el alcance de tus selectores con la regla @scope de CSS.

scrollend

Otra función que reduce la complejidad y mejora las interfaces de desplazamiento es scrollend. Sin el evento scrollend, no hay una forma confiable de detectar que se completó un desplazamiento.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Con el evento scrollend, el navegador realiza toda esta difícil evaluación por ti.

document.onscrollend = event => {…}

Consulta más ejemplos en Scrollend, un nuevo evento de JavaScript.

Transiciones de vista en el mismo documento

Por último, pero no menos importante, las transiciones de vista forman parte de Interop 2025. El trabajo implica transiciones de vistas en el mismo documento, por lo que también se incluyen las de las apps de una sola página y las clases de transiciones de vistas.

Sigue el panel de Interop 2025 para ver cómo se desarrolla el proyecto a medida que avanza el año.

Las funciones incluidas en Interop 2025 no serán lo único que se incorporará a Baseline este año, pero su inclusión en los proyectos nos da una buena señal de que se priorizarán y llegarán pronto.

Apenas estamos comenzando

Fue un año emocionante para Baseline, y avanzamos mucho desde nuestros anuncios del año pasado. Ahora, la propagación de datos de funciones web está completa. Esto abrió las compuertas y permitió la creación de herramientas para desarrolladores. Recién estamos comenzando, y si tienes un producto o una herramienta de código abierto que se beneficiaría de incluir estos datos, nos encantaría saber de ti.

Mantente al tanto de web.dev, ya que seguiremos publicando anuncios sobre nuevas herramientas y tutoriales para ayudarte a aprovechar todo lo que ofrece la Web.