Actualización sobre Interop 2026: las funciones de CSS y de los navegadores que por fin se pueden utilizar con total seguridad

Respuesta breve: Las funciones web de Interop 2026 más seguras que se pueden implementar ahora son las que ya se encuentran en «Baseline Newly available», incluidas las consultas de tamaño de contenedor, :has(), Popover y transiciones de vista dentro del mismo documento. Interop 2026 sigue activo, por lo que características como los registros de elementos personalizados con ámbito limitado, JSPI para Wasm y algunas partes de las transiciones de vista entre documentos deben someterse a pruebas más exhaustivas antes de eliminar las soluciones alternativas.

Novedades web de Interop 2026: qué ha cambiado para los desarrolladores

Interop 2026 es la sexta edición de la iniciativa de compatibilidad entre navegadores en la que participan representantes de Apple, Google, Igalia, Microsoft y Mozilla. Su objetivo práctico es, en el mejor sentido posible, bastante sencillo: conseguir que el mismo código web se comporte de la misma manera en Chrome, Edge, Firefox y Safari.

Las áreas prioritarias para 2026, anunciadas el 12 de febrero de 2026, abarcan el CSS attr(), contrast-color(), consultas de tipo «container», resaltados personalizados, cuadros de diálogo y ventanas emergentes, «fetch», IndexedDB, JSPI para WebAssembly, pseudoclases multimedia, la API de navegación, registros de elementos personalizados con ámbito, animaciones controladas por el desplazamiento, ajuste al desplazamiento, CSS shape(), View Transitions, Web Compat, WebRTC y WebTransport. Es un abanico muy amplio, pero la intención de la búsqueda es sencilla: quieres saber qué características web de Interop 2026 se pueden utilizar con seguridad sin que tu código acabe convertido en un montón de excepciones del navegador.

Algunas ya están listas. Otras están a punto de estarlo. Hay algunas que resultan interesantes, pero siguen siendo el tipo de funcionalidad que se deja para la mejora progresiva, en lugar de formar parte de una interfaz de usuario fundamental para el negocio. Si quieres tener una visión más amplia centrada en CSS, la guía complementaria de Nuevas funciones de CSS que vale la pena utilizar en 2026 es una siguiente parada muy útil.

¿Qué significa «Baseline» en el desarrollo web?

«Baseline» es el indicador más claro con el que cuentan los desarrolladores para evaluar la compatibilidad entre navegadores en 2026. Una función pasa a estar disponible como «Baseline» cuando es compatible con todos los navegadores principales: Chrome en ordenador y Androide, Edge, Firefox en ordenador y Android, y Safari en macOS e iOS.

«Disponible de forma generalizada» significa que han transcurrido 30 meses desde la fecha en que se hizo interoperable. La diferencia es importante. «Recién disponible» indica que, a menudo, se puede lanzar para usuarios de navegadores modernos; «disponible de forma generalizada» indica que el riesgo es menor para bases de usuarios grandes y de adopción más lenta, como colegios, administraciones públicas, bancos o parques informáticos de empresas.

Este es el cálculo concreto que muchos equipos pasan por alto. Las consultas de tamaño de contenedor pasaron a estar disponibles en la versión «Baseline» en febrero de 2023. Si sumamos 30 meses, llegamos a agosto de 2025, momento en el que ya estarán disponibles de forma generalizada en la versión «Baseline». CSS :has() «Newly» salió al mercado en diciembre de 2023, por lo que alcanzará los 30 meses de vida alrededor de junio de 2026. «Popover» salió al mercado en enero de 2025, por lo que no alcanzará ese mismo umbral de 30 meses hasta alrededor de julio de 2027.

Eso no significa que Popover no sea seguro. Significa que tu tolerancia hacia los navegadores más antiguos debería determinar hasta qué punto te arriesgas. Sinceramente, para una página web pública en 2026, yo utilizaría Popover con una solución alternativa antes que seguir implementando en todas partes un script de menú personalizado tan pesado.

Las funciones que puedes lanzar con total confianza

Empecemos por las consultas de tamaño de contenedor. Alcanzaron el nivel «Baseline» en febrero de 2023 y, para 2026, ya no serán nada novedosas. Los diseños basados en componentes son el caso de uso más evidente: tarjetas, barras laterales, mosaicos de productos, paneles de control y widgets incrustados que deben adaptarse al espacio del que disponen, en lugar de a toda la ventana gráfica.

CSS :has() Es el segundo gran logro. Desde diciembre de 2023 está disponible en Baseline, y a mediados de 2026 ya se ha consolidado de hecho en la categoría más segura para muchos equipos. El estilo «parent-aware» elimina el uso de JavaScript en pequeños problemas de estado de la interfaz de usuario, como aplicar estilo a un grupo de formularios cuando contiene un campo no válido o modificar una tarjeta cuando incluye un campo de entrada seleccionado.

Popover es una función más reciente, pero muy útil. Pasó a formar parte de Baseline en enero de 2025, y el material de web.dev sobre Baseline utiliza «dialog» y «popover» como ejemplos de funciones que están pasando a un uso práctico en producción. Los menús, las sugerencias didácticas, los controles desplegables y las superposiciones ligeras funcionan mejor cuando es el navegador el que se encarga de gestionar gran parte del comportamiento, en lugar de que cada equipo tenga que volver a resolver por su cuenta cuestiones como el enfoque, el cierre y el apilamiento.

Las transiciones de vista dentro del mismo documento también pasaron a ser «Baseline» y estarán disponibles a partir de 2025, según el anuncio de Interop 2026 publicado en web.dev. En 2026, los datos de «Can I Use» sobre las transiciones de vista en un mismo documento indican que son compatibles con las versiones actuales de Chrome y Edge 150, Safari y Safari para iOS 18+, Firefox 152, Samsung Internet 23+ y el navegador de Android 150, mientras que Opera Mini y el navegador de KaiOS no son compatibles. Para el tráfico general, esto es suficiente para utilizarlo como mejora.

Característica	Estado inicial o de apoyo	Consejos prácticos para 2026
Consultas sobre el tamaño de los contenedores	Baseline: ya disponible en febrero de 2023	En términos generales, el umbral de «amplia disponibilidad» de 30 meses se situaba en torno a agosto de 2025.
CSS :has()	Baseline: disponible a partir de diciembre de 2023	Úsalo para la lógica de estilo; comprueba el rendimiento de selectores complejos en DOM de gran tamaño.
Popover	Baseline: disponible a partir de enero de 2025	Utilízalo con un sistema de compatibilidad progresiva para los navegadores más antiguos y los dispositivos menos habituales.
Transiciones de vista dentro del mismo documento	Baseline: disponible a partir de 2025	Se utiliza para pulir la navegación; garantiza la usabilidad de las páginas incluso con las transiciones desactivadas.
Transiciones de vista entre documentos	Parte del trabajo de Interop 2026; se ha informado de que Safari 18.2 es compatible	Trátalo como una mejora progresiva hasta que tus datos analíticos confirmen la cobertura de los navegadores.

¿Podré utilizar las transiciones de vista en 2026?

Sí, siempre y cuando las consideres una mejora y no la estructura principal de tu aplicación. La API de transición de vistas ya está documentada en MDN —última modificación el 19 de junio de 2026— y abarca tanto las aplicaciones de una sola página como las de varias páginas, con animaciones predeterminadas, además de opciones de personalización y la posibilidad de saltarlas.

Las novedades web de Interop 2026 sitúan las transiciones de vista en el centro del trabajo de compatibilidad de este año. El alcance previsto para el 12 de febrero de 2026 incluye la mejora de las transiciones de vista dentro de un mismo documento, blocking="render", , :active-view-transition-type(), y las transiciones entre vistas de distintos documentos.

El explorador de funciones «View Transitions», alojado en Chrome y actualizado el 25 de marzo de 2026, indica que la compatibilidad con las aplicaciones de página única (SPA) está disponible a partir de Chrome 111, Safari 18 y Firefox 144. En cuanto a los tipos «SPA plus», indica que son compatibles con Chrome 125+, Safari 18.2+ y Firefox 147+, mientras que la compatibilidad con MPA se indica para Chrome 126+ y Safari 18.2+.

Las cifras aclaran la decisión. Si el 92% de tus visitantes utiliza navegadores compatibles con el «same-document» y el código de transición añade 8 KB de JavaScript más CSS, la compensación suele ser aceptable a cambio de una experiencia similar a la de una aplicación. Si el 35% de tus usuarios utiliza WebViews integradas, versiones antiguas de Firefox para empresas, Opera Mini o el navegador KaiOS, ese mismo código debería ser estrictamente opcional.

Una trampa sutil: las transiciones pueden ocultar un funcionamiento lento de la página. Una transición visual atractiva entre rutas no solucionará la lentitud en la recuperación de datos, los tirones en el diseño o los componentes con un renderizado excesivo. Combina la API con los presupuestos de rendimiento, no con la estética. Si también estás prestando atención a las capacidades gráficas y de cálculo del navegador, la misma mentalidad de mejora progresiva se aplica a temas como WebGPU para gráficos del navegador y la IA, aunque se trate de una parte diferente de la plataforma.

¿Qué aspectos aún necesitan soluciones alternativas en Interop 2026?

Algunas de las funciones web de Interop 2026 resultan interesantes porque reducen las antiguas limitaciones, no porque sean seguras de inmediato para todos los sitios web. Las consultas de tipo «container» son un ejemplo de ello. WebKit informó de que Safari 18.0 incluía consultas de tipo «container», y que Safari ya había implementado muchas características de Interop 2026, pero su uso generalizado en producción sigue requiriendo pruebas en todo el conjunto de navegadores principales.

contrast-color() Es otra opción tentadora. WebKit ha indicado que tanto Safari como Firefox incorporarán esta compatibilidad en 2025, y la función forma parte de la lista de prioridades de Interop 2026. La promesa es clara: elegir colores de primer plano legibles en función del contraste con el fondo. El riesgo también es evidente: las decisiones sobre el color afectan a la accesibilidad, a los sistemas de marca y a casos extremos como los degradados o los temas dinámicos, así que no elimines todavía las comprobaciones manuales.

Las animaciones controladas por el desplazamiento y el «scroll snap» deben tratarse con cuidado. WebKit ha indicado que Safari 26.0 incluye compatibilidad con las animaciones controladas por el desplazamiento, y que el «scroll snap» también es un área prioritaria para 2026. El problema no es solo la compatibilidad de los navegadores, sino también la comodidad del usuario, sus preferencias en cuanto al movimiento y la forma en que los efectos de desplazamiento pueden interferir con las tecnologías de apoyo o la navegación por teclado si se implementan sin cuidado.

Los registros de elementos personalizados con ámbito son aún más especializados. WebKit informó de que Safari 26.0 fue el primer navegador en incorporarlos, lo cual es impresionante, pero que el primer navegador en admitirlos no garantiza la seguridad de la interoperabilidad. Se trata principalmente de una característica de los sistemas de diseño y los componentes web, y solo tiene sentido si la arquitectura de tus componentes ya está madura.

Para los equipos que trabajan en el ámbito de WebAssembly, JSPI para Wasm entra dentro de la misma categoría: es importante, técnico y no es algo que se pueda dar por sentado en todos los casos. Si tu hoja de ruta incluye Wasm en el navegador, elabora un plan de compatibilidad independiente; la visión general de WebAssembly en 2026 es el mejor lugar para atar esos cabos.

Cómo saber cuándo una función del navegador es, por fin, segura

La seguridad de una función no es una simple cuestión de «sí» o «no». Se trata de una decisión sobre el producto en la que se tienen en cuenta, de forma conjunta, la compatibilidad con los navegadores, el público objetivo, los modos de fallo y los costes de mantenimiento. A marketing Una página puede ser más llamativa que un proceso de presentación de la declaración de la renta.

1. Comprueba primero el estado de la línea de base, utilizando «Recién disponible» y «Ampliamente disponible» como señales independientes.
2. Compara la compatibilidad con tus propios datos analíticos, no solo con la cuota de mercado global de los navegadores.
3. Decide qué ocurre cuando la función falla: ¿una tarea fallida, un diseño menos pulido o ninguna diferencia visible?
4. Opta por la mejora progresiva para pulir la interfaz de usuario, sobre todo en lo que respecta a las animaciones y las ventanas emergentes.
5. Elimina los «polyfills» antiguos solo después de haberlos probado en dispositivos reales, incluidos Safari para iOS y Firefox para Android.

Las mejores funciones web de Interop 2026 te permiten eliminar código. Las consultas de contenedores sustituyen a los oyentes de cambio de tamaño. :has() Elimina las clases de estado de pequeño tamaño. Popover puede sustituir a una capa superpuesta de desarrollo propio. Las transiciones de vista pueden sustituir a partes de una biblioteca de animaciones de enrutamiento, pero solo si no dependes de esa biblioteca para otras tareas de gestión de estados.

Hay un contraargumento, y es válido: añadir nuevas API de la plataforma puede crear una segunda forma de hacer lo mismo. Un equipo que cuente con una biblioteca de componentes estable de React, Vue o Svelte puede preferir la coherencia frente a las funciones nativas durante otro ciclo de lanzamiento. No estoy de acuerdo en el caso de funciones de estilo sencillas como las consultas de contenedor, pero en lo que respecta a las transiciones de vista en una aplicación madura, la paciencia puede salir más barata que la rotación de usuarios.

Las pruebas son más importantes que la fecha de anuncio. Microsoft describió Interop 2026 como la sexta edición del proyecto; Mozilla indicó que se presentaron más de 150 propuestas y que se seleccionaron 20 áreas de interés de entre 33 propuestas, además de cuatro áreas de investigación; y Apple, Google, Igalia, Microsoft y Mozilla participan en el proyecto. Una señal clara. Pero sigue sin ser un sustituto de ejecutar tus propios flujos en los navegadores que tus usuarios abren realmente.

Preguntas frecuentes

¿En qué consisten las funciones web de Interop 2026?

Las funcionalidades web de Interop 2026 son las capacidades de los navegadores seleccionadas por los representantes de Apple, Google, Igalia, Microsoft y Mozilla para el trabajo específico en materia de interoperabilidad en 2026. Entre ellas se incluyen CSS, las API de los navegadores, el trabajo relacionado con WebAssembly, las redes, los medios y las áreas de compatibilidad.

¿«Baseline» equivale a una compatibilidad total con los navegadores?

No. «Baseline: recién disponible» significa que la función es compatible con el conjunto básico de navegadores, mientras que «Baseline: ampliamente disponible» significa que han transcurrido 30 meses desde ese momento. Se trata de un indicador práctico de compatibilidad, no de una garantía de que todos los navegadores antiguos o WebView integrados sean compatibles con la función.

¿Debería sustituir JavaScript por CSS? :has() ¿Y ahora qué?

En muchos casos relacionados con el diseño, sí. CSS :has() Se ha convertido en «Baseline». Está disponible desde diciembre de 2023, por lo que es una buena opción para sustituir los pequeños botones de activación/desactivación de clase DOM, siempre y cuando compruebes el rendimiento de los selectores en páginas de gran tamaño.

¿Son seguras las transiciones de vista entre documentos en un entorno de producción?

Úsalas como mejora progresiva en 2026. Según se indica en los recursos de View Transitions, Safari 18.2 y Chrome 126+ son compatibles, pero el proyecto Interop 2026 sigue mejorando el comportamiento entre documentos en los distintos navegadores.

¿Qué aspectos de Interop 2026 deberían evitar precipitarse los equipos empresariales?

Hay que tener cuidado con los registros de elementos personalizados con ámbito, JSPI para Wasm, las funciones avanzadas de transición de vistas y las animaciones controladas por el desplazamiento. Aunque pueden resultar útiles, requieren comprobaciones de compatibilidad más rigurosas y un comportamiento de recambio más claro que las consultas de contenedor o :has().