Descubre algunas de las funciones interesantes que se lanzaron en los navegadores web estables y beta durante noviembre de 2022.
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 Prepárate para los cambios en el comportamiento del cambio de tamaño del viewport que llegarán a 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.
Navegadores compatibles
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 de identidad para acceder a sitios web. FedCM se envía en Chrome 108. Obtén más información en la entrada de blog del 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.
La implementación de las consultas de contenedores está en curso 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 consulta.
Parte de la serie de artículos para principiantes en la Web