Nuevo en la plataforma web en octubre

Descubre algunas de las interesantes funciones que llegaron a los navegadores web estables y beta en octubre de 2022.

Rachel Andrew

Versiones estables del navegador

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

Animación de las pistas de cuadrícula

Gracias al trabajo de nuestros colaboradores en Microsoft, Chrome ahora puede interpolar los valores grid-template-columns y grid-template-rows. Esto significa que los diseños de cuadrícula pueden realizar una transición fluida entre estados, en lugar de ajustarse en el punto intermedio de una animación o transición.

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

Navegadores compatibles

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

Agregaciones a getDisplayMedia()

También en Chrome, se agregaron algunas funciones a getDisplayMedia() que tienen como objetivo evitar la sobrecompartición accidental cuando se comparte la pantalla.

  • La opción displaySurface puede indicar que la app 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 cambie de forma dinámica entre las pestañas compartidas.
  • Se puede usar la opción selfBrowserSurface para evitar que el usuario comparta la pestaña actual. Esto evita el efecto "pasillo de espejos".
  • La opción systemAudio garantiza que Chrome solo ofrezca al usuario la captura de audio relevante.

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

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

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

@supports font-tech(color-COLRv1) {

}

Puedes encontrar más ejemplos en MDN.

Desplazarse al fragmento de texto

Safari 16.1 incluye compatibilidad con el desplazamiento al fragmento 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 estáticas AVIF, y Safari 16.1 incluye compatibilidad con imágenes animadas AVIF en macOS Ventura, iOS 16 y iPadOS 16.

Web Push para Safari

Safari 16.1 ofrece compatibilidad con Web Push a Safari en macOS Ventura. Para ello, se usan las APIs de Push y Notifications. Puedes obtener más información sobre esto en el artículo Meet Web Push. El aterrizaje web push en Safari significa que ahora está disponible en los tres motores principales.

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 a tu sitio antes de que el resto del mundo obtenga esa versión. 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 cuando se imprime. Este valor indica al navegador que evite la interrupción antes, después o dentro del elemento al que se aplica. Por ejemplo, el siguiente CSS evita que una figura se corte en un salto de página.

figure {
    break-inside: avoid;
}

Chrome 108 comienza a implementar 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 A change to overflow on replaced elements in CSS para obtener más detalles y ver cómo abordar cualquier problema que veas.

Se produce un cambio en el comportamiento de la ventana de visualización de diseño en Chrome para Android cuando se muestra el teclado en pantalla. Lee Prepárate para los cambios en el comportamiento del cambio de tamaño del viewport que llegarán a Chrome para Android para obtener más información y saber cómo prepararte para que esta versión estable se lance el próximo mes.

También en Chrome, se encuentran las nuevas unidades de viewport de CSS. Entre ellas, se incluyen las 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 se une a Chrome en la compatibilidad con esta tecnología de fuentes. También en las fuentes, Chrome 108 agrega compatibilidad con las funciones font-tech() y font-format() para las consultas de funciones con @supports.

Firefox también agrega compatibilidad con contain-intrinsic-size, uniendo a Chrome para crear dos navegadores que admitan esta función.

La versión beta 16.2 de Safari incluye varias correcciones de CSS, como el tamaño y el ajuste del desplazamiento.

Parte de la serie de artículos para principiantes en la Web