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.
Dónde comenzamos
A principios de año, Chrome tenía una puntuación de compatibilidad experimental con navegadores de 83.
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>
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.
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.
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.
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.