Nuevo usuario de la plataforma web en agosto

Descubre algunas de las funciones interesantes que se lanzaron en los navegadores web estables y beta durante agosto de 2024.

En agosto de 2024, Firefox 129 y Chrome 128 se volvieron estables. En esta publicación, se analizan las nuevas funciones que se agregaron a la plataforma web.

Actualizaciones del formato de Ruby

El elemento <ruby> de HTML es una herramienta potente para mejorar la presentación de texto, especialmente para los idiomas del este de Asia. Este elemento te permite mostrar anotaciones fonéticas o cualquier otra información complementaria sobre o junto al texto base. A partir de Chrome 128, la anotación rubí puede dividirse en líneas y puedes aplicarle diseño con la propiedad CSS ruby-align.

Obtén más información en <ruby> de línea interrumpida y la propiedad ruby-align de CSS.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

PointerEvent.deviceProperties para la tinta de varios lápices

Este cambio, que se envía en Chrome 128, proporciona una forma segura y confiable de identificar plumas individuales (punteros) que interactúan con la pantalla para establecer colores o formas de pluma específicos para cada dispositivo que interactúa con el digitalizador. Extiende la interfaz PointerEvent para incluir un atributo nuevo: deviceProperties. Contiene el atributo uniqueId, que representa un identificador único persistente en la sesión y aislado del documento que puedes usar de forma confiable para identificar plumas individuales que interactúan con la página.

Promise.try

También en Chrome 128, Promise.try facilita la administración de errores con promesas. Hay un patrón en el que tienes una función, f. Esta función puede ser asíncrona y mostrar una promesa, o no. Para usar la semántica de Promise y controlar los errores en ambos casos, une la función en una promesa. Por lo general, esto se logra con new Promise(resolve => resolve(f())).

Promise.try es una forma más directa de lograr lo mismo. Te permite iniciar una cadena de promesas que captura todos los errores en los controladores .catch en lugar de tener que controlar los flujos de excepciones síncronos y asíncronos.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

Anima los efectos de entrada

Firefox 129 incluye dos funciones de CSS que se usan para animar efectos de entrada, y estas funciones ahora están disponibles en Baseline.

La regla @starting-style define los estilos iniciales de un elemento antes de que se renderice en la página. Esto es obligatorio para los elementos que se animan desde display: none, ya que necesitan un estado desde el que animarse.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Los efectos de entrada también requieren la animación de propiedades discretas, aquellas que no pueden interpolar entre valores. Esto ahora se puede lograr con transition-behavior: allow-discrete o el valor allow-discrete en tu abreviatura de transición. Esto también es compatible con Firefox 129.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

Obtén más información en Ahora en Baseline: anima los efectos de entrada.

Agregaciones a PerformanceResourceTiming

Firefox 129 agrega las propiedades contentType y responseStatus de la interfaz PerformanceResourceTiming. Estos indican el tipo de contenido del recurso recuperado y el código de estado de la respuesta HTTP que se muestra cuando se recupera el recurso, respectivamente.

contentType

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

Métodos toJSON() de geolocalización

También en Firefox 129, se incluyen GeolocationCoordinates.toJSON() y GeolocationPosition.toJSON().

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

WebDriver BiDi

Firefox 129 ahora es compatible con WebDriver BiDi. Esto significa que puedes usar Puppeteer con Chrome o Firefox para las automatizaciones. Obtén más información en WebDriver BiDi listo para producción en Firefox, Chrome y Puppeteer y en Anuncio de la compatibilidad oficial de Puppeteer con Firefox.

Versiones beta del navegador

Las versiones beta del navegador te brindan una vista previa de lo que estará disponible en la próxima versión estable del navegador. Es un buen momento para probar funciones nuevas o eliminaciones que podrían afectar tu sitio antes de que el resto del mundo obtenga esa versión. Las nuevas versiones beta son Firefox 130 y Chrome 129. La versión beta de Safari 18 aún está en curso. Estas versiones ofrecen muchas funciones excelentes a la plataforma. Consulta las notas de la versión para obtener todos los detalles. Estos son solo algunos aspectos destacados.

Firefox 130 admite el atributo name del elemento <details> que agrupa elementos <details>, en el que solo se puede abrir un elemento dentro de un grupo a la vez. Esto te permite crear un acordeón exclusivo sin usar JavaScript.

Chrome 129 agrega la propiedad interpolate-size y la función calc-size() de CSS.

La propiedad interpolate-size de CSS permite que una página habilite animaciones y transiciones de palabras clave de tamaño intrínseco de CSS, como auto, min-content y fit-content, en los casos en que esas palabras clave se puedan animar.

La función calc-size() de CSS es una función de CSS similar a calc(). Sin embargo, también admite operaciones en exactamente una palabra clave de tamaño compatible. Actualmente, las palabras clave de tamaño admitidas son auto, min-content, max-content y fit-content.

También en Chrome 129, se incluye Intl.DurationFormat, que proporciona un método para dar formato a las duraciones, por ejemplo, "1 hora, 40 minutos y 30 segundos", que admite varias configuraciones regionales.