Nuevos tipos y espacios de color de CSS, funciones trigonométricas de CSS y la API de View Transitions.
A menos que se indique lo contrario, los siguientes cambios se aplican a la versión más reciente del canal beta de Chrome para Android, ChromeOS, Linux, macOS y Windows. Obtén más información sobre las funciones que se indican aquí a través de los vínculos proporcionados o de la lista en ChromeStatus.com. Chrome 111 es una versión beta a partir del 9 de febrero de 2023. Puedes descargar la versión más reciente en Google.com para computadoras de escritorio o en Google Play Store para Android.
CSS
Nuevos tipos de colores y espacios de CSS
Todas las funciones que se describen en el nivel 4 de colores del CSS ahora están habilitadas. Esto incluye cuatro tipos de colores independientes del dispositivo (lab, Oklab, lch y Oklch), la función color() y los espacios de color definidos por el usuario para gradientes y animaciones.
Lee la Guía de colores de CSS de alta definición para obtener información sobre estos nuevos tipos y espacios de color.
La función color-mix()
También se envía la función increíblemente útil color-mix() de CSS Color 5. Esta función permite mezclar un porcentaje de un color en otro, en cualquier espacio de color compatible. En el siguiente ejemplo, se mezcla el 10% de blue en white en SRGB.
.item {
background-color: color-mix(in srgb, blue 10%, white);
}
Selectores CSS 4 Pseudoclase :nth-child(an + b of S)
Extiende :nth-child(an + b) y :nth-last-child() para tomar un selector. Por ejemplo, :nth-child(3 of .c) es el tercer .c en un elemento superior determinado. Para obtener más información, lee la publicación Más control sobre las selecciones de :nth-child() con la sintaxis of S.
Unidades de fuente raíz de CSS
Agrega unidades de fuente raíz: rex, rch, ric y rlh a la unidad de fuente raíz existente de rem.
Funciones trigonométricas de CSS
Se agregaron las funciones trigonométricas sin(), cos(), tan(), asin(), acos(), atan(), atan2() a las expresiones matemáticas de CSS.
Consultas de contenedores de diseño para propiedades personalizadas de CSS
Agrega la función style() a las reglas @container para que se puedan aplicar estilos según los valores calculados de las propiedades personalizadas de un elemento superior.
La propiedad baseline-source
La propiedad baseline-source permite que los desarrolladores web especifiquen si un cuadro a nivel de línea debe usar el modelo de referencia first o last para la alineación dentro de un cuadro de línea.
API web
La cadena de permisos y la política de permisos window-management
Chrome 111 agrega window-management como alias para las cadenas de permisos y políticas de permisos window-placement. Esto forma parte de un esfuerzo más amplio para cambiar el nombre de las cadenas, lo que, en última instancia, dará de baja y quitará window-placement. El cambio de terminología mejora la longevidad del descriptor a medida que la API de Window Management evoluciona con el tiempo.
API de Media Session: Acciones de presentación de diapositivas
Se agregaron acciones previousslide y nextslide a la API de Media Session existente.
ArrayBuffer con tamaño modificable y SharedArrayBuffer con tamaño expandible
Extiende los constructores de ArrayBuffer para que tomen una longitud máxima adicional que permita el crecimiento y la reducción de búferes en su lugar. Del mismo modo, SharedArrayBuffer se extiende para tomar una longitud máxima adicional que permite el crecimiento in situ.
Reglas de especulación: clave de la política de referencia
Esto extiende la sintaxis de las reglas de especulación para permitir que los desarrolladores especifiquen la política de referencia que se usará con las solicitudes especulativas activadas por las reglas de especulación. Esto también reintroduce el requisito de "política de referencia lo suficientemente estricta".
Transmisión de Shadow DOM declarativo
Esto agrega compatibilidad con la transmisión, ya que adjunta la raíz de sombra en la etiqueta de plantilla de apertura, en lugar de la de cierre.
API de View Transitions
Permite crear transiciones pulidas en aplicaciones de una sola página (SPA) tomando instantáneas de vistas y permitiendo que el DOM cambie sin superponerse entre estados. Usa transiciones de vista para crear transiciones personalizadas o usa una compaginación simple predeterminada para mejorar la experiencia del usuario.
Consulta el artículo para desarrolladores de Chrome para obtener más información y ejemplos de transiciones que te ayudarán a comenzar.
Extensiones de codificación de video escalable de WebRTC
Esta extensión define un método estándar para elegir entre las posibles configuraciones de codificación de video escalable (SVC) en una pista de video WebRTC saliente.
Atributo enabledFeatures de WebXR
Muestra el conjunto de funciones que se habilitaron para este XRSession, según lo especifica XRSessionInit, y las funciones implícitas que requiere la especificación para el modo y las funciones determinados. Para una sesión otorgada, contendrá todos los requiredFeatures, pero puede ser un subconjunto de optionalFeatures. La mayoría de las funciones tienen formas alternativas de detectar si se otorgaron. Sin embargo, en el caso de algunas funciones, la señal de si se habilitó o no puede estar estrechamente relacionada con los datos de una función que no está disponible en este momento, en lugar de que los datos nunca estén disponibles. Cuando consultas enabledFeatures, puedes determinar si se deben mostrar sugerencias útiles (por ejemplo, para mejorar o iniciar el seguimiento) o si una función nunca se admitirá en la sesión actual.
Pruebas de origen en curso
En Chrome 111, puedes habilitar las siguientes pruebas de origen nuevas.
Prueba de baja para quitar la omisión del CSP de connect-src en la API de pagos web
Se dejó de admitir la capacidad de la API de Web Payment para omitir la política CSP de connect-src cuando se recuperaba el manifiesto. Después de esta baja, la política CSP connect-src de un sitio deberá permitir la URL de la forma de pago especificada en una llamada a PaymentRequest, así como cualquier otra URL que el método encadena para recuperar su manifiesto.
Esta función de omisión se quita en Chrome 111 con una prueba de origen inverso de 111 a 113 para los desarrolladores que necesiten volver a habilitar temporalmente la omisión. Para habilitar esta opción, regístrate en la prueba de baja inversa para la omisión del CSP de connect-src.
Pantalla en pantalla de documentos
La API de Document Picture-in-Picture es una nueva API para abrir una ventana siempre en la parte superior que se puede propagar con contenido HTML arbitrario. Esta es una expansión de la API de pantalla en pantalla existente que solo permite que un elemento HTMLVideoElement se coloque en una ventana de PIP. Esto permite que los desarrolladores web proporcionen una mejor experiencia de PiP a los usuarios.
Lee la documentación sobre la Pantalla en pantalla de documentos.
Regístrate en la prueba de origen de la función Pantalla en pantalla de documentos.
Bajas y eliminaciones
Esta versión de Chrome presenta las bajas y eliminaciones que se indican a continuación. Visita ChromeStatus.com para ver las listas de baja planificada, baja actual y eliminación anterior.
Esta versión de Chrome quita tres funciones.
Se quitó PaymentInstruments.
PaymentInstruments es la API web que admite la instalación no JIT de apps de pago (consulta https://w3c.github.io/payment-handler/). Se diseñó con la suposición de que el navegador almacenaría los detalles reales del instrumento de pago, lo que no resultó ser cierto, y tiene algunas filtraciones de privacidad. Tampoco se envió a ningún otro navegador, y no hemos visto ningún interés por parte de otros proveedores de navegadores. Por lo tanto, esta API dejó de estar disponible y se quitó.
Se quitó el bypass de CSP de connect-src en la API de Web Payment
Se da de baja la capacidad de la API de Web Payment para omitir la política de CSP de connect-src cuando recupera el manifiesto. Después de esta eliminación, la política de CSP de connect-src de un sitio deberá permitir la URL de la forma de pago especificada en una llamada a PaymentRequest, así como cualquier otra URL que el método encadena para recuperar su manifiesto.
Consulta la información de las pruebas de origen para conocer un método para habilitar una prueba de baja que te permita tener más tiempo para realizar los cambios necesarios debido a esta eliminación.
Identidad del comerciante en el evento canmakepayment
El evento del trabajador de servicio canmakepayment le permite al comercio saber si el usuario tiene una tarjeta registrada en una app de pagos instalada. Solía pasar de forma silenciosa el origen del comercio y los datos arbitrarios a un trabajador de servicio desde el origen de la app de pagos. Esta comunicación entre orígenes se produjo en la construcción de PaymentRequest en JavaScript, no requirió un gesto del usuario y no mostró ninguna interfaz de usuario. Este pasaje de datos silencioso se quitó del evento canmakepayment y del intent IS_READY_TO_PAY de Android).