Actualización de mitad de año de Interoperabilidad 2024

A medida que nos acercamos a la segunda mitad del año, es un buen momento para ver cómo Interop 2024 mejoró la interoperabilidad web este año.

A principios de año, Chrome tenía una puntuación de compatibilidad experimental con navegadores de 83.

El panel con las puntuaciones de interoperabilidad: 65, investigaciones: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
El panel de Interop 2024 en febrero de 2024.
El panel con las puntuaciones: Interoperabilidad: 75, Investigaciones: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Versión preliminar de tecnología de Safari: 88.
Panel de interoperabilidad de 2024 a fines de junio de 2024.

Hoy, esa puntuación es de 90, con una puntuación de 85 para los navegadores estables a partir del lanzamiento de Chrome 126 en junio. La puntuación general de interoperabilidad experimental aumentó 10 puntos, y en esta publicación se comparten algunas de las funciones que contribuyeron a esa puntuación.

Notificación emergente

El cuadro emergente se incorporó a la función Recientemente disponible de Baseline en abril de 2024. Los pop-ups son interesantes porque muchas de las funciones de la IU que debes compilar, por ejemplo, los menús, las herramientas de ayuda, las superposiciones para realizar selecciones y las IU de enseñanza, son tipos de pop-ups. Antes del popover, crear cualquiera de estas funciones implicaba mucho código personalizado. Código para asegurarse de que no se abrieran varios elementos a la vez o para habilitar la eliminación de la luz cuando el usuario hizo clic fuera del elemento. También es posible que hayas tenido dificultades con z-index para asegurarte de que un elemento de la IU permanezca sobre el resto de la interfaz.

Todas estas funciones y muchas más se incluyen en la API de popover, lo que ahorra tiempo de desarrollo y ayuda a crear interfaces más accesibles y de mejor rendimiento. Por ejemplo, el siguiente código crea un cuadro flotante con descarte claro, que cerrará automáticamente otros cuadros flotantes cuando se abran.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

Obtén más información en La API de popover llega a Baseline. Muchas aplicaciones ya están viendo los beneficios de los pop-overs. Tokopedia pudo reducir significativamente la cantidad de código de React aprovechando la función con un polyfill para navegadores que no son compatibles.

Propiedades personalizadas avanzadas con @property

La regla CSS @property te permite crear propiedades personalizadas avanzadas, con mucho más detalle que el nombre y el valor disponibles en las propiedades personalizadas estándar. Establece la sintaxis permitida para definir qué tipo de datos contiene esta propiedad, por ejemplo, color, número o longitud. Luego, establece si la propiedad se hereda y un valor inicial.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

Actualmente, la regla @property mejora la puntuación experimental de Firefox, lo que aumenta la puntuación estable cuando se lanza Firefox 128 a fines de este mes. También se une a Baseline Newly Available.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

Obtén más información en @property: otorga superpoderes a las variables de CSS.

La propiedad font-size-adjust

La propiedad font-size-adjust de CSS te permite modificar el tamaño de las letras minúsculas en relación con el tamaño de las mayúsculas. Esto es útil en situaciones en las que puede ocurrir un resguardo de fuente, ya que ayuda a garantizar que una fuente de resguardo siga siendo legible, en particular en tamaños de fuente pequeños.

Actualmente, la propiedad font-size-adjust se incluye en la puntuación experimental de Chrome. Sin embargo, aumentará la puntuación estable cuando se lance con Chrome 127 este mes. También se une a la sección Baseline Newly Available.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

text-wrap: balance

El uso de text-wrap: balance le indica al navegador que determine el mejor ajuste de línea equilibrado para el texto. Es especialmente útil para los encabezados, ya que evita que un encabezado se una a una sola palabra en la línea dos, por ejemplo.

Recientemente, Safari comenzó a admitir esta función, y otros navegadores están trabajando para corregir las pruebas fallidas y garantizar que esta función funcione bien en todos los navegadores.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source


Además de que estas funciones principales se volvieron interoperables, se realizaron muchas otras mejoras. Cada prueba que se aprueba representa un problema de interoperabilidad que no tendrás. Nos complace ver cuán cerca estamos de alcanzar el 100% para fin de año.