Se usó la API de Cloud Translation para traducir esta página.

Nuevo en la plataforma web en octubre

Descubre algunas de las interesantes funciones que se incorporaron a los navegadores web estables y beta durante octubre de 2022.

Rachel Andrew

Versiones del navegador estable

En octubre, Firefox 106, Chrome 107 y Safari 16.1 se volvieron estables. Veamos qué significa esto para la plataforma web.

Animación de recorridos de cuadrícula

Gracias al trabajo de nuestros colaboradores de Microsoft, ahora Chrome puede interpolar los valores grid-template-columns y grid-template-rows. Esto significa que los diseños de cuadrícula pueden pasar de un estado a otro de forma fluida, en lugar de ajustarse al punto medio de una animación o transición.

Coloca el cursor sobre los avatares para ver la animación. Este ejemplo es del artículo Diseños de cuadrícula animada de CSS, en el que puedes obtener más información.

Navegadores compatibles

Elementos agregados a `getDisplayMedia()`

Además, en Chrome se agregaron algunas incorporaciones a getDisplayMedia() que tienen como objetivo evitar compartir en exceso la pantalla por accidente.

La opción displaySurface puede indicar que la aplicación web prefiere ofrecer un tipo de superficie de visualización específico (pestañas, ventanas o pantallas).
La opción surfaceSwitching indica si Chrome debe permitir que el usuario alterne de forma dinámica entre las pestañas compartidas.
Se puede usar la opción selfBrowserSurface para impedir que el usuario comparta la pestaña actual. Esto evita el efecto de "salón de espejos".
La opción systemAudio garantiza que Chrome solo ofrezca al usuario capturas de audio relevantes.

Safari 16.1 también admite getDisplayMedia, lo que agrega compatibilidad para capturar una ventana específica de Safari.

Pruebas de compatibilidad con la tecnología de fuentes y las funciones de CSS

Firefox agregó las funciones font-tech() y font-format() para incluir consultas con @supports. En el siguiente ejemplo, se prueba la compatibilidad con fuentes COLRv1.

@supports font-tech(color-COLRv1) {

}

Puedes encontrar más ejemplos en MDN.

Desplazarse al fragmento de texto

Safari 16.1 admite el fragmento de desplazamiento de texto, que agrega compatibilidad para navegar a una URL con un fragmento de texto específico especificado.

Compatibilidad con AVIF

Safari 16 incluía compatibilidad con imágenes AVIF fijas, mientras que Safari 16.1 es compatible con imágenes AVIF animadas en macOS Ventura, iOS 16 y iPadOS 16.

Web Push para Safari

Safari 16.1 ofrece compatibilidad con Web Push en Safari en macOS Ventura. Estas APIs usan las APIs de Push y Notifications. Puedes obtener más información al respecto en el artículo Meet Web Push. El destino web push en Safari significa que ahora está disponible en los tres motores principales.

Versiones del navegador Beta

Las versiones de navegador beta te ofrecen una vista previa de los elementos que estarán disponibles en la próxima versión estable del navegador. Es un buen momento para probar nuevas funciones, o eliminaciones, que podrían afectar a tu sitio antes de que el mundo la implemente. Las nuevas versiones beta de este mes son Chrome 108, Firefox 107 y Safari 16.2.

Chrome 108 admite el valor avoid de las propiedades de fragmentación de CSS break-before, break-after y break-inside durante la impresión. Este valor indica al navegador que evite fallas antes, después o dentro del elemento al que se aplica. Por ejemplo, el siguiente CSS evita que una cifra se rompa durante un salto de página.

figure {
    break-inside: avoid;
}

Chrome 108 comenzará a lanzar un cambio en la forma en que se comporta el desbordamiento en los elementos reemplazados, lo que puede causar cambios visuales en algunas circunstancias. Lee el artículo Cambios en el desbordamiento de elementos reemplazados en CSS para obtener más detalles y descubrir cómo abordar los problemas que observas.

Existe un cambio en el comportamiento de la viewport de diseño en Chrome para Android cuando se muestra el teclado en pantalla. Lee el artículo Prepárate para los cambios de comportamiento de cambio de tamaño del viewport que se implementarán en Chrome para Android para obtener más información y saber cómo prepararte para la estabilidad de este envío el próximo mes.

Además, en Chrome se encuentran las nuevas unidades de viewport de CSS. Estas incluyen unidades pequeñas (svw, svh, svi, svb, svmin, svmax), grandes (lvw, lvh, lvi, lvb, lvmin, lvmax), dinámicas (dvw, dvh, dvi, dvb, dvmin, dvmax) y lógicas (vi, vb). Estas unidades ya están implementadas en Firefox y Safari.

Firefox 107 habilita la compatibilidad con fuentes COLRv1, y Chrome admite esta tecnología de fuentes. También en fuentes, Chrome 108 agrega compatibilidad con las funciones font-tech() y font-format() para incluir consultas con @supports.

Firefox también incluye compatibilidad con contain-intrinsic-size y se une a Chrome para crear dos navegadores compatibles con esta función.

Safari 16.2 Beta incluye muchas correcciones de CSS, como el tamaño y el ajuste de desplazamiento.

Parte de la serie de novedades en la Web