Nuevo en la plataforma web en noviembre

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

Rachel Andrew

Versiones estables del navegador

En noviembre, Firefox 107 y Chrome 108 se volvieron estables. Veamos qué significa esto para la plataforma web.

Un cambio en el comportamiento del viewport de diseño en Chrome para Android

Hay un cambio en el comportamiento del viewport de diseño a partir de Chrome 108 en Android cuando se muestra el teclado en pantalla. Para obtener más información, consulta el artículo Prepárate para los cambios de comportamiento de cambio de tamaño de viewports que se implementarán en Chrome para Android.

Nuevas unidades de viewport

También en Chrome 108, se incluyen 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, lo que significa que ahora tenemos interoperabilidad entre los tres motores de navegador principales para estas unidades.

Lee Las unidades de viewport grandes, pequeñas y dinámicas.

La propiedad CSS abreviada contain-intrinsic-size es compatible con Firefox 107, junto con las propiedades contain-intrinsic-width y contain-intrinsic-height de formato largo, y las propiedades lógicas contain-intrinsic-block-size y contain-intrinsic-inline-size.

Se aplican para especificar el tamaño de un elemento de la IU que está sujeto a contención de tamaño. Esto permite que un usuario-agente determine el tamaño de un elemento sin necesidad de renderizar sus elementos secundarios. Son útiles cuando un elemento está sujeto a retención de tamaño.

Compatibilidad con la palabra clave avoid de fragmentación de CSS

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;
}

Esta incorporación se debe a la inclusión de la compatibilidad con la impresión mediante LayoutNG, lo que brinda una experiencia moderna y menos problemática. Obtén más información sobre LayoutNG.

API de Federated Credential Management

La API de Federated Credential Management (FedCM) proporciona una abstracción para los flujos de identidad federada en la Web. Expone un diálogo mediado por el navegador que permite a los usuarios elegir cuentas de proveedores identificados para acceder a sitios web. FedCM se enviará en Chrome 108. Obtén más información al respecto en la entrada de blog sobre el anuncio de FedCM.

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. Debido a las fechas de lanzamiento, la única versión beta nueva de este mes es Firefox 108, y la versión beta de Safari 16.2 aún está en curso.

Firefox 108 admite los atributos height y width para el elemento <source> cuando es secundario de un elemento <picture>. Estos atributos aceptan la altura o el ancho de la imagen, en píxeles, como un número entero sin unidad.

Se está implementando la consulta de contenedores en Firefox. Detrás de la marca layout.css.container-queries.enabled en Firefox 108 beta, encontrarás las unidades de longitud de la consulta del contenedor: cqw, cqh, cqi, cqb, cqmin y cqmax. Estas son unidades de longitud en relación con el tamaño de un contenedor de consultas.

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