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.
![El panel con interoperabilidad de puntuaciones: 65, Investigaciones: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Vista previa de la tecnología de Safari: 79.](https://web.developers.google.cn/static/blog/interop-2024-midyear/image/interop-feb.png?hl=es-419)
![El panel con interoperabilidad de puntuaciones: 75, Investigaciones: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Vista previa de la tecnología de Safari: 88.](https://web.developers.google.cn/static/blog/interop-2024-midyear/image/interop-june.png?hl=es-419)
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.