Interop 2027: las novedades de CSS que ya puedes usar hoy

Interop 2027 se está planificando ahora mismo, y casi todo el CSS de la lista de deseos ya funciona en Chrome y Edge. Parte de él se puede publicar hoy, siempre que la página siga viéndose bien sin él. Aquí repasamos cinco funciones del top 10 de Josh W. Comeau, dónde está cada una y una separación sencilla: usar ya o esperar.

Qué es Interop, con un ejemplo

Interop es un proyecto anual en el que los grandes fabricantes de navegadores (Google, Apple, Microsoft y Mozilla, junto con Igalia y Bocoup) acuerdan áreas de trabajo y las abordan juntos. El ejemplo de Comeau es Subgrid: Firefox lo lanzó en 2019, los demás apenas se movieron durante años, entró en Interop 2023 y al terminar ese año ya estaba en todos los navegadores modernos. Para 2027, Mozilla ha abierto una clasificación donde los desarrolladores votan lo que quieren, y el equipo piensa usarla para elegir las áreas.

Una sola línea de soporte sirve para todo lo que sigue y tiene ficha en caniuse. Los recuadros de Comeau, a octubre de 2026, dicen lo mismo en todos los casos: soportado en Chrome 155 y Edge 154, sin soporte en Firefox 157 ni Safari 27. Así que la pregunta nunca es «¿funciona en todas partes?», sino «¿qué pasa donde no funciona?».

Úsala hoy: corner-shape

corner-shape cambia cómo border-radius une dos lados. En lugar del cuarto de círculo puedes pedir squircle, bevel, notch o scoop. A diferencia de clip-path, cambia la propia border box, así que bordes, outlines y sombras siguen la nueva esquina. Comeau la llama una mejora progresiva perfecta: Firefox y Safari simplemente mantienen la esquina redondeada.

.card {
  border-radius: 16px;
  corner-shape: bevel;
}

Si quieres ajustar primero el radio, el generador de border-radius te da el valor y el bisel va encima. Para formas que deben verse iguales en todos los navegadores hoy, la herramienta sigue siendo clip-path, con lo que implica para las sombras.

Úsala hoy, detrás de @supports: interpolate-size

interpolate-size: allow-keywords permite una transición de height: 0 a height: auto, el acordeón que todos hemos imitado con JavaScript. Comeau señala que está en Chrome desde 2024, y su consejo es concreto: mete la transición en una consulta @supports, porque si no, los navegadores sin soporte reciben un pequeño retraso extra.

html {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  details::details-content {
    height: 0;
    overflow: hidden;
    transition: height 300ms, content-visibility 300ms;
    transition-behavior: allow-discrete;
  }
  details:open::details-content {
    height: auto;
  }
}

Con cuidado: reading-flow y las consultas scroll-state

reading-flow resuelve un problema real de accesibilidad. El orden de tabulación sigue al DOM, así que una cuadrícula que se reordena en el móvil lleva a quien usa el teclado por los elementos en un orden que ya no coincide con la pantalla. reading-flow: grid-rows hace que el foco siga las filas visibles, y reading-order da un control más fino. Publícala, pero no dependas de ella todavía: en Firefox y Safari el orden sigue siendo el del DOM, que por tanto debe seguir teniendo sentido.

Las consultas de contenedor scroll-state le dicen al CSS cuándo un encabezado con position: sticky está pegado, o si un contenedor aún puede desplazarse hacia arriba o hacia abajo. En los demás navegadores el encabezado simplemente no cambia de aspecto, y eso suele bastar.

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .header-content { border-bottom: 1px solid; }
}

Espera: las funciones CSS

@function te deja definir tu propia función CSS con parámetros y un result, y llamarla como --gradient-to-transparent(red). Es lo más emocionante de la lista y lo peor para publicar como mejora progresiva, porque una función suele producir un valor del que depende el diseño. Donde no hay soporte, la declaración se descarta y la propiedad vuelve al valor anterior. Apréndela ya, pero déjala fuera del CSS de producción hasta que llegue a más de un motor.

La lista de Comeau tiene otras cinco propuestas, entre ellas border-shape, las decoraciones de huecos con la propiedad rule, las animaciones activadas por scroll y una función inherit() propuesta que, según él, ningún navegador implementa aún.

Siguiente paso: elige una tarjeta o un acordeón de tu sitio, añade corner-shape o el bloque de interpolate-size y ábrelo en Firefox o Safari para comprobar que nada se rompe. Después, vota en la clasificación de Interop 2027. Fuente: Josh W. Comeau, The Future of CSS: My top 10 picks for Interop 2027.