Interoperabilidad 2026 | Consejos CSS

Interop 2026 es oficialmente una realidad. Entonces, ¿conoces todas esas nuevas funciones CSS en las que hemos estado trabajando pero que siempre ponemos bajo la advertencia de “falta de soporte del navegador”? Los tres grandes: Blink (Chrome/Edge), WebKit (Safari) y Mozilla (Firefox), están trabajando juntos para brindarles soporte integral y consistente.

Puedes leer la publicación del blog tú mismo:

uno, si lo hay suficiente Especialmente entusiasmado con CSS:

posicionamiento del ancla

de nuestro guía turístico:

El anclaje CSS nos proporciona una interfaz sencilla para adjuntar elementos junto a otros elementos simplemente especificando los bordes que se conectarán directamente en CSS. También nos permite establecer una ubicación alternativa para que podamos evitar el problema de desbordamiento que acabamos de describir.

avanzado attr()

en realidad ya tenemos attr() Funcional desde hace 15 años aproximadamente. Pero ahora podremos pasar variables allí… ¡Con conversión de tipo!

Consulta de estilo de contenedor

ya podemos Consultar contenedores por “tipo” Pero sólo en tamaño. Sería mucho mejor cuando pudiéramos aplicar estilos basados ​​en otros estilos. explicar:

@container style((font-style: italic) and (--color-mode: light)) {
  em, i, q {
    background: lightpink;
  }
}

este contrast-color() Función

Es muy fácil obtener el contraste de color correcto entre el texto de primer plano y el fondo, pero esto es más bien una tarea manual y podemos usar consultas de medios para cambiar según el esquema de color actual. y contrast-color() (Siempre quiero escribirlo como color-contrast()tal vez porque ese era el nombre original) podemos cambiar dinámicamente color Entre blanco y negro.

button {
  --background-color: darkblue;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
}

Aspectos destacados de la personalización

¡Resalta todo! tenemos ::selection para siempre, pero ahora tenemos muchos otros:

Cuadros de diálogo y ventanas emergentes

¡Finalmente, una forma sin JavaScript (y declarativa) de establecer elementos en el nivel superior! Realmente los hemos analizado en profundidad a lo largo de los años.

Pseudoclase de medios

¿Cuántas veces has querido diseñar un <audio> o <video> ¿Elemento en función de su estado? Quizás en JavaScript, ¿verdad? Manejaremos varios estados en CSS:

• :playing
• :paused
• :seeking
• :buffering
• :stalled
• :muted
• :volume-locked

Me gusta este ejemplo Tomado del anuncio de WebKit:

video:buffering::after {
  content: "Loading...";
}

animación impulsada por desplazamiento

Bueno, todos queremos esto. Estamos hablando específicamente de animaciones que responden al desplazamiento. En otras palabras, existe una conexión directa entre el progreso del desplazamiento y el progreso de la animación.

#progress {
  animation: grow-progress linear forwards;
  animation-timeline: scroll();
}

captura de desplazamiento

No hay nada nuevo aquí, ¡pero solo para darles a todos una idea de cómo han cambiado las especificaciones a lo largo de los años!

este shape() Función

Esto es lo que ha estado haciendo Temani últimamente, su Convertidor de ruta SVG a forma Es un marcador obligatorio. este shape() Se pueden dibujar formas complejas mientras se recortan elementos. clip-path propiedad. A lo largo de los años, hemos tenido la capacidad de dibujar formas básicas; piense circle, ellipse()y polygon() – Pero no existe una forma “fácil” de dibujar formas más complejas. Ahora tenemos algo menos SVG que acepta unidades CSS, cálculos y más.

.clipped {
  width: 250px;
  height: 100px;
  box-sizing: border-box;
  background-color: blue;
  clip-path: shape(
    from top left,
    hline to 100%,
    vline to 100%,
    curve to 0% 100% with 50% 0%,
  );
}

Mira la transición

Hay dos tipos de transiciones de vista: dentro del archivo (transformaciones en la misma página) y entre archivos (o lo que a menudo llamamos transiciones de varias páginas). Las transiciones de la misma página se convirtieron en la base en 2025, y ahora los navegadores están trabajando en implementaciones compatibles de transiciones entre archivos.

CSS zoom propiedad

¡Oh, no me esperaba eso! Quiero decir, teníamos zoom A lo largo de los años –nuestro página del anuario Lanzado en 2011, pero como propiedad no estándar. Debo haber pasado por alto que es nuevo en Baseline 2024 y que se está trabajando en él como parte de Interop 2025. Continúa hasta este año.

zoom un poco como scale() Funciónpero en realidad afecta el diseño, mientras que scale() Es simplemente visual y trascenderá cualquier cosa que se interponga en su camino.

¡Esto es un paquete! Agregar marcador Panel de interoperabilidad 2026 Presta mucha atención a cómo van las cosas.