Descubre algunas de las interesantes funciones que se incorporaron a los navegadores web estables y beta durante noviembre de 2022.
Versiones del navegador estable
En noviembre, Firefox 107 y Chrome 108 se volvieron estables. Veamos qué significa esto para la plataforma web.
Cambio en el comportamiento de la viewport de diseño en Chrome para Android
Existe un cambio en el comportamiento de la viewport de diseño a partir de Chrome 108 en Android cuando se muestra el teclado en pantalla. Si deseas obtener más información, consulta Prepárate para los cambios de comportamiento de cambio de tamaño del viewport que se implementarán en Chrome en Android.
Nuevas unidades de viewport
Además, en Chrome 108 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, lo que significa que ahora contamos con interoperabilidad en los tres motores de navegador principales para estas unidades.
Consulta Las unidades de viewport grande, pequeño y dinámico.
Navegadores compatibles
- 108
- 108
- 101
- 15.4
La propiedad abreviada de CSS contain-intrinsic-size es compatible con Firefox 107, junto con la versión abreviada contain-intrinsic-width, contain-intrinsic-height y las propiedades lógicas contain-intrinsic-block-size y contain-intrinsic-inline-size.
Estas se aplican para especificar el tamaño de un elemento de la IU que está sujeto a la 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 contención de tamaño.
Compatibilidad con la palabra clave avoid de la fragmentación de CSS
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;
}
Esta adición se debe a que se agregó compatibilidad con impresiones mediante LayoutNG, lo que brinda una experiencia moderna y con menos errores. Obtén más información sobre LayoutNG.
API de Federated Credential Management
La API de Federated Credential Management (FedCM) proporciona una abstracción de 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 identificación para acceder a sitios web. La FedCM está implementando la versión 108 de Chrome. Obtén más información en esta entrada de blog sobre el anuncio de FedCM.
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. Debido a las fechas de lanzamiento, la única nueva versión beta de este mes es Firefox 108, con Safari 16.2 beta aún en curso.
Firefox 108 admite 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 una unidad.
La implementación de 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 consulta del contenedor: cqw, cqh, cqi, cqb, cqmin y cqmax. Estas son unidades de longitud relacionadas con el tamaño de un contenedor de consultas.
Parte de la serie de novedades en la Web