Nuevos tipos de color 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 enumeran aquí a través de los vínculos proporcionados o de la lista en ChromeStatus.com. Chrome 111 está beta desde el 9 de febrero de 2023. Puedes descargar la versión más reciente en Google.com para computadoras o desde Google Play Store para Android.
CSS
Nuevos tipos de colores y espacios de CSS
Se habilitaron todas las funciones descritas en el nivel de color 4 de CSS. Esto incluye cuatro tipos de color independientes del dispositivo (lab, Oklab, Lch y Oklch), la función color() y 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 más información sobre estos nuevos tipos de colores y espacios.
La función color-mix()
La función color-mix() increíblemente útil de CSS Color 5 también incluye envíos. Esta función permite mezclar un porcentaje de un color con otro, en cualquier espacio de color admitido. En el siguiente ejemplo, se combina un 10% de blue en white en SRGB.
.item {
background-color: color-mix(in srgb, blue 10%, white);
}
Selectores CSS 4 seudoclase :nth-child(an + b de 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 de un elemento superior determinado. Para obtener más información, consulta la entrada Obté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() y atan2() a las expresiones matemáticas de CSS.
Cómo aplicar diseño a las consultas de contenedores para las propiedades personalizadas de CSS
Agrega la función style() a las reglas @container para permitir la aplicación de estilos basados en los valores calculados de las propiedades personalizadas de un elemento principal.
La propiedad baseline-source
La propiedad baseline-source permite que los desarrolladores web especifiquen si un cuadro de nivel intercalado 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 política de permisos y permisos de window-management
Chrome 111 agrega window-management como alias para las cadenas de la política de permisos y el permiso window-placement. Esto forma parte de un esfuerzo mayor por cambiar el nombre de las cadenas dando de baja y quitando window-placement eventualmente. 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: Cómo presentar acciones de diapositivas
Agrega las acciones previousslide y nextslide a la API de Media Session existente.
ArrayBuffer de tamaño ajustable y SharedArrayBuffer expandible
Extiende los constructores ArrayBuffer para que tengan una longitud máxima adicional que permita el crecimiento y la reducción de los búferes en el lugar. De manera similar, SharedArrayBuffer se extiende para tener una longitud máxima adicional que permita el crecimiento en el lugar.
Reglas de especulación: clave de política de referencia
Esto extiende la sintaxis de las reglas de especulación para permitir que los desarrolladores especifiquen la política de URL de referencia que se usará con las solicitudes especulativas activadas por las reglas de especulación. Esto también vuelve a introducir la "política de URL de referencia lo suficientemente estricta" un requisito de seguridad.
Shadow DOM declarativo de transmisión
Esto agrega compatibilidad con la transmisión, ya que se adjunta la shadow root en la etiqueta de la plantilla de apertura, en lugar de la de cierre.
API de View Transitions
Permite la creación de transiciones pulidas en aplicaciones de una sola página (SPA) al capturar instantáneas de las vistas y permitir que el DOM cambie sin ninguna superposición entre estados. Usa transiciones de vistas para crear transiciones personalizadas o utiliza un ajuste predeterminado simple de encadenado 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 posibles configuraciones de Codificación de video escalable (SVC) en una pista de video de WebRTC saliente.
Atributo enabledFeatures de WebXR
Muestra el conjunto de funciones que se habilitaron para este XRSession según lo especificado en XRSessionInit y los atributos implícitos que requiere la especificación para el modo y las funciones determinadas. 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, para algunos atributos, el indicador de si un atributo se habilitó o no puede relacionarse estrechamente con los datos de un atributo que no están disponibles en este momento, en lugar de que los datos nunca estén disponibles. Si consultas enabledFeatures, puedes determinar si se debe mostrar alguna sugerencia útil (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 la eliminación de la omisión de CSP de connect-src en la API de Web Payment
La API de Web Payment dejó de estar disponible para omitir la política de CSP connect-src cuando se recuperaba el manifiesto. Después de esta baja, la política de CSP connect-src de un sitio deberá admitir la URL de la forma de pago especificada en una llamada a PaymentRequest, así como cualquier otra URL que encadena el método para recuperar su manifiesto.
Esta función de omisión se quitará en Chrome 111 con una prueba de origen inverso de la versión 111 a la 113 para los desarrolladores que necesiten volver a habilitar temporalmente la omisión. Si quieres habilitar esta opción, regístrate en la prueba de baja inversa de la omisión de la CSP de connect-src.
Pantalla en pantalla en documentos
La API de pantalla en pantalla del documento es una API nueva que permite abrir una ventana siempre activa que se puede completar con contenido HTML arbitrario. Esta es una expansión de la API de pantalla en pantalla existente que solo permite que un 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 de Pantalla en pantalla para documentos.
Regístrate en la prueba de origen del modo pantalla en pantalla del documento.
Bajas y eliminaciones
Esta versión de Chrome incluye las bajas y las eliminaciones que se indican a continuación. Visita ChromeStatus.com para consultar las listas de bajas planificadas, bajas actuales y eliminaciones anteriores.
Esta versión de Chrome quita tres funciones.
Quitar PaymentInstruments
PaymentInstruments es la API web que respalda la instalación de apps de pago que no son JIT (consulta https://w3c.github.io/payment-handler/). Se diseñó con el supuesto 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ó en ningún otro navegador ni observamos interés de otros proveedores de navegadores. Por lo tanto, esta API dejó de estar disponible y se quitó.
Quita la evasión del CSP connect-src en la API de Web Payment
Da de baja la capacidad de la API de Web Payment para omitir la política de CSP connect-src cuando se recupera el manifiesto. Después de esta eliminación, la política de CSP de connect-src de un sitio deberá admitir la URL de la forma de pago especificada en una llamada de PaymentRequest, así como cualquier otra URL que encadena el método para recuperar su manifiesto.
Consulta la información sobre las pruebas de origen a fin de conocer un método para participar en una prueba de baja, lo que te dará más tiempo para realizar los cambios necesarios debido a esta eliminación.
Identidad del comercio en el evento canmakepayment
El evento del service worker canmakepayment le permite al comercio saber si el usuario tiene una tarjeta registrada en una app de pagos instalada. Se utilizaba para pasar silenciosamente el origen del comerciante y los datos arbitrarios a un service worker desde el origen de la app de pago. Esta comunicación de origen cruzado ocurrió en la construcción de PaymentRequest en JavaScript, no requirió un gesto del usuario y no mostró ninguna interfaz de usuario. Se quitó este pasaje de datos silencioso del evento canmakepayment y del intent IS_READY_TO_PAY de Android.