Interop 2025: otro año de mejoras en la plataforma web

Fecha de publicación: 13 de febrero de 2025

Después del gran éxito de Interop 2024, el proyecto regresa hoy con un nuevo conjunto de áreas de enfoque para 2025. Si bien no pudimos incluir todas las sugerencias que se hicieron este año, la lista final abarca la plataforma web, desde CSS hasta funciones relacionadas con el rendimiento.

Las áreas de enfoque para 2025

  • Posicionamiento de los anuncios fijos
  • backdrop-filter
  • Métricas web esenciales
  • Elemento <details>
  • Diseño
  • Módulos
  • Navigation API
  • Eventos del puntero y del mouse
  • Se quitaron los eventos de mutación
  • @scope
  • scrollend evento
  • API de Storage Access
  • text-decoration
  • URLPattern
  • API de View Transition
  • WebAssembly
  • Compatibilidad con la Web
  • WebRTC
  • Modos de escritura

Además, y como en años anteriores, hay un conjunto de áreas para investigar. Estas son áreas en las que no tenemos suficiente información ni pruebas para incluirlas como área de enfoque, pero el grupo considera que se debe hacer algo para llevarlas a un punto en el que podamos incluirlas.

  • Pruebas de accesibilidad
  • Pruebas de la API de Gamepad
  • Pruebas para dispositivos móviles
  • Pruebas de privacidad
  • WebVTT

Nos entusiasman todas estas funciones y las mejoras que el proyecto de este año traerá a la plataforma. Y, al igual que el año anterior, el proyecto hará que un conjunto completo de elementos del modelo de referencia esté disponible de forma nueva. En esta publicación, se comparte más información sobre algunas de las funciones de la lista, con vínculos a información para obtener más detalles.

Puedes seguir el panel de Interop 2025 en wpt.fyi/interop-2025 y, a medida que los elementos estén disponibles en el modelo de referencia, también aparecerán en la lista de Baseline 2025 en webstatus.dev.

Las puntuaciones al comienzo del proyecto: Interoperabilidad: 33, Investigaciones: 0, Chrome Canary: 91, Edge Dev: 88, Firefox Nightly: 52, Versión preliminar de tecnología de Safari: 55.
Panel de Interop 2025 (al 13 de febrero de 2025).

CSS y IU

Varias de las funciones incluidas en Interop 2025 son funciones que marcaste como importantes en la encuesta sobre el estado de CSS de 2024. Te ayudarán a crear experiencias del usuario más preciosas y de mejor rendimiento.

Posicionamiento de los anuncios fijos

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

Esta función te permite fijar un elemento posicionado a un ancla. Es particularmente útil cuando se muestran ventanas emergentes.

Un ancla con un elemento posicionado.

Si se incluye esta función en Baseline, será mucho más fácil crear interfaces de usuario sin tener que depender de bibliotecas de terceros. Obtén más información en nuestra documentación sobre el posicionamiento de anclas y también en MDN: Posicionamiento de anclas de CSS.

Transiciones de vista del mismo documento

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

También se incluyeron este año las transiciones de vista, específicamente las transiciones de vista del mismo documento, y la propiedad CSS view-transition-class.

Obtén más información sobre las transiciones de vistas en Transiciones de vistas del mismo documento para aplicaciones de una sola página y en la documentación de MDN para transiciones de vistas.

La propiedad backdrop-filter

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

La propiedad backdrop-filter está disponible como modelo de referencia desde septiembre de 2024. Te permite crear efectos detrás de tu contenido. Por ejemplo, para desenfocar o crear efectos que podrías esperar que solo estén disponibles en una aplicación de gráficos.

A pesar de ser en su mayoría interoperables, puedes ver en las pruebas fallidas de backdrop-filter que hay errores y problemas en esas implementaciones. Si bien es posible que estos problemas no sean un inconveniente para todos, sabemos que muchos de ustedes sí los encuentran. Sería genial que esta función funcionara muy bien.

El elemento <details>

El elemento <details> es un widget de divulgación que se puede expandir para revelar contenido adicional. El elemento <details> está disponible en el modelo de referencia de forma general. Sin embargo, hay varias funciones relacionadas que se agregaron más recientemente que hacen que <details> sea más útil.

  • Los pseudoelementos CSS ::marker y ::details-content
  • Usar content-visibility para activar o desactivar el contenido en lugar de display
  • Expande automáticamente el elemento <details> con coincidencias de búsqueda en la página.
  • El atributo hidden="until-found", que 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

La regla de @scope de CSS

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

La regla de @scope te permite definir el alcance de tus selectores en un subárbol del DOM o incluso elegir entre un límite superior e inferior en el árbol. Por ejemplo, el siguiente CSS solo selecciona elementos <img> dentro de un elemento con una clase de .card.

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

En el siguiente ejemplo, se usan un límite superior y uno inferior. El elemento <img> solo se selecciona si está entre el elemento con una clase de .card y fuera del elemento con una clase de .card__content.

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

Encuentra más ejemplos de cómo puedes usar @scope en Limita el alcance de tus selectores con la @scope at-rule de CSS y en la documentación de @scope en MDN.

El evento scrollend

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

Sin el evento scrollend, no hay una forma confiable de detectar que se completó un desplazamiento. Lo mejor que puedes hacer es usar setTimeout() para verificar si el desplazamiento se detuvo durante un período. Esto hace que se parezca más a un evento de pausa del desplazamiento, no a un evento de finalización del desplazamiento.

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 y también en la documentación de MDN para scrollend.

La propiedad text-decoration

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

La propiedad text-decoration es una abreviatura de text-decoration-line, text-decoration-color, text-decoration-style y text-decoration-thickness. Se considera que está disponible en todos los navegadores de referencia. Sin embargo, en Safari, la única propiedad de abreviatura sin prefijo que funciona es text-decoration-line. Esto es lo que se abordará durante 2025.

Modos de escritura

La propiedad writing-mode de CSS tiene varios valores posibles, muchos de los cuales están diseñados para diseñar secuencias de comandos que se muestran verticalmente. Sin embargo, a veces, deseas diseñar el texto verticalmente como parte de un diseño, en lugar de por motivos de compatibilidad con el idioma. Los valores sideways-lr y sideways-rl están diseñados para esto, pero tienen una baja compatibilidad con los navegadores. Esto debería solucionarse durante 2025.

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

Además, se incluyen las propiedades CSS lógicas overflow-inline y overflow-block. Estos permiten controlar lo que sucede cuando el contenido desborda los cuadros, independientemente del modo de escritura.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

Métricas web esenciales

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

La interoperabilidad de 2025 incluye las métricas Largest Contentful Paint (LCP) y Interaction to Next Paint (INP) mediante la implementación de la API de LargestContentfulPaint y la API de Event Timing en todos los navegadores. La métrica Cambio de diseño acumulado (CLS) no está dentro del alcance.

API de LCP

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

API de Event Timing (para INP)

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: not supported.
  • Safari: not supported.

Source

WebAssembly (Wasm)

La API de WebAssembly te permite cargar código de WebAssembly, un formato de instrucciones binarias portátiles. Puede permitirte hacer acciones como ejecutar una aplicación de blog completa, incluidos todos los requisitos del servidor, en el navegador.

Este año, el trabajo se enfocará en las siguientes funciones:

  • Cadenas integradas de JavaScript: Para que las funciones de cadena integradas de WebAssembly reflejen un subconjunto de la API de cadenas de JavaScript, de modo que se pueda llamar a ellas sin código de unión de JavaScript.
  • Integración de búferes de tamaño variable: Para integrar WebAssembly en código JavaScript que usa búferes de tamaño variable.

Eliminación de funciones

Este año, el proyecto incluye la eliminación de la plataforma. Los eventos de mutación dejaron de estar disponibles y se reemplazaron por la API de Mutation Observer, que tiene un mejor rendimiento y está disponible en el modelo de referencia. Chrome quitó estos eventos en Chrome 126, y este área de enfoque es quitarlos de todos los navegadores.

Para comprender el historial y por qué se quitarán estos eventos, lee Se quitarán los eventos de mutación de Chrome.

Más información

Las descripciones de la lista completa de funciones se pueden encontrar en el archivo README del proyecto. Además, lee las publicaciones de las otras empresas que trabajan en Interop 2025.