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

Rachel Andrew

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

Dónde empezamos

Al principio del año Chrome tuvo una puntuación de asistencia para navegadores experimentales de 83.

Hoy, ese puntaje es de 90, con un puntaje de 85 para los navegadores estables hasta el lanzamiento de Chrome 126 en junio. La puntuación general de la interoperabilidad experimental ha aumentado 10 puntos, y en esta publicación se comparten algunas de las funciones que contribuyeron a esa puntuación.

Notificación emergente

Popover pasó a formar parte de Baseline Newly Disponible en abril de 2024. El anuncio emergente es emocionante porque muchas de las funciones de IU que debes crear, por ejemplo, los menús, los cuadros de información, las superposiciones para realizar selecciones y la enseñanza de las IUs son tipos de ventana emergente. Antes de la ventana emergente, para crear cualquiera de estas funciones se requería mucho código. Código para asegurarte de que varios elementos no estaban abiertos a la vez, o para habilitar descartarlos cuando el usuario hace clic fuera del elemento. También puedes tener tuviste con z-index, para asegurarte de que un elemento de la IU se mantuviera en la parte superior del resto de la interfaz.

Todas estas funciones y muchas más se incluyen en el API de Popover, ahorrando tiempo de desarrollo, y ayudan a crear interfaces con mejor rendimiento y accesibilidad. Para ejemplo, el siguiente código crea una ventana emergente con la opción para descartar con luz, que cerrar automáticamente otras ventanas emergentes cuando se abren.

<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>

Obtenga más información en la API de Popover llega a Baseline. Muchos aplicaciones ya están viendo los beneficios de Popover. Tokopedia pudo reducir de forma significativa la cantidad de código de React. con la función y con polyfill para los navegadores no compatibles.

Propiedades personalizadas avanzadas con @property

La regla de CSS @property te permite crear propiedades personalizadas avanzadas, con más detalles que el nombre y el valor disponibles en las propiedades personalizadas estándar. Establece la sintaxis permitida para definir el tipo de datos que contiene esta propiedad como un color, un número o una longitud. Luego, establece si la propiedad 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. y se aumentará la puntuación estable cuando se lance Firefox 128 a finales de este mes. También se une Baseline recientemente disponible.

Obtén más información en @property: otorgar 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 minúsculas letras en relación con el tamaño de las letras mayúsculas. Esto es útil en situaciones donde podría ocurrir una fuente de reserva, ya que ayuda a garantizar que una fuente de reserva siga siendo sean legibles, sobre todo en tamaños de fuente pequeños.

Actualmente, la propiedad font-size-adjust se incluye en la puntuación experimental para Chrome, pero aumentará la puntuación estable cuando se lance con Chrome 127 de este mes. También se une al modelo Baseline Newly available.

text-wrap: equilibrio

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

Recientemente, se agregó compatibilidad con Safari, y otros navegadores están trabajando para solucionar este problema. y fallar las pruebas para garantizar que esta función funcione bien en todos los navegadores.

Además de que estas funciones principales sean interoperables, muchas otras se implementaron mejoras. Cada prueba aprobada representa un de interoperabilidad con el que no te encontrarás. Estamos ansiosos por ver puede alcanzar esa puntuación del 100% antes de fin de año.