Nuevo en la plataforma web en octubre

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

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

Gracias al trabajo de nuestros colaboradores de Microsoft, Chrome ahora puede interpolar valores grid-template-columns y grid-template-rows. Esto significa que los diseños de cuadrícula pueden realizar transiciones fluidas entre estados, en lugar de ajustarse en la mitad 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 específico de plataforma de visualización (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.
  • La opción selfBrowserSurface se puede usar 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 captura de audio relevante al usuario.

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.

Notificaciones push web para Safari

Safari 16.1 agrega compatibilidad con notificaciones push web 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. La llegada de los notificaciones web push a Safari significa que ahora están disponibles 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 incluye compatibilidad con el valor avoid de las propiedades de fragmentación de CSS break-before, break-after y break-inside cuando se imprime. Este valor le indica al navegador que evite las pausas 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 cambió el comportamiento de la vista del puerto 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, y se une a Chrome para convertirse en los dos navegadores que admiten 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