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 mencionadas aquí a través de los vínculos proporcionados o en la lista en ChromeStatus.com. Chrome 111 está en 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 color y espacios de CSS
Todas las funciones descritas en el nivel de color 4 de CSS ahora están habilitadas. Esto incluye cuatro tipos de colores 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 información sobre estos nuevos tipos de color y espacios.
La función color-mix()
También se está enviando la función color-mix() increíblemente útil del color 5 de CSS. Esta función permite combinar un porcentaje de un color con otro, en cualquier espacio de color admitido. En el siguiente ejemplo, se mezcla un 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 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 bajo un elemento superior determinado. Para obtener más información, consulta la entrada 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ños para propiedades personalizadas de CSS
Agrega la función style() a las reglas @container para permitir aplicar estilos según los valores calculados de las propiedades personalizadas de un elemento principal.
La propiedad baseline-source
La propiedad baseline-source permite a los desarrolladores web especificar 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.
APIs web
La string de política de permisos y permisos de window-management
En Chrome 111, se agrega window-management como alias para las cadenas de permisos y políticas de permisos window-placement. Esto forma parte de un esfuerzo mayor para cambiar el nombre de las strings, que finalmente dejará de estar disponible y se 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: Cómo presentar acciones de diapositivas
Agrega las acciones previousslide y nextslide a la API de sesiones multimedia existente.
ArrayBuffer puede cambiar de tamaño y puede aumentarse SharedArrayBuffer
Extiende los constructores ArrayBuffer para tomar una longitud máxima adicional que permita el crecimiento y la reducción in situ de los búferes. De manera similar, SharedArrayBuffer se extiende para tomar una longitud máxima adicional que permite 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 que los desarrolladores puedan especificar la política de referente que se usará con las solicitudes especulativas activadas por reglas de especulación. Esto también vuelve a introducir el requisito de "política de referentes lo suficientemente estricta".
Shadow DOM declarativo de transmisión
Esto agrega compatibilidad para la transmisión, ya que se adjunta la shadow root a la apertura, en lugar de la etiqueta de plantilla de cierre.
API de View Transitions
Permite la creación de transiciones perfeccionadas en aplicaciones de una sola página (SPA) al tomar instantáneas de las vistas y permitir que el DOM cambie sin superposición entre los estados. Usa View Transitions para crear transiciones personalizadas o usa un simple encadenado predeterminado para mejorar la experiencia del usuario.
Para obtener más información y ejemplos de transiciones que te ayudarán a comenzar, consulta el artículo para desarrolladores de Chrome.
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 las funciones implícitas requeridas por la especificación para el modo y las funciones determinados. En el caso de 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 algunas funciones, el indicador de si una función se habilitó o no puede vincularse estrechamente con los datos de una función que no está disponible en el momento, en lugar de que los datos nunca estén disponibles. Cuando consultas enabledFeatures, puedes determinar si se debe mostrar alguna sugerencia útil (por ejemplo, para mejorar o comenzar a hacer un seguimiento) o si nunca se admitirá una función 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 de la CSP de connect-src en la API de Web Payment
La API de Web Payment ya no permite omitir la política de CSP connect-src cuando se recupera el manifiesto. Después de esta baja, la política de CSP connect-src de un sitio deberá permitir la URL de la forma de pago especificada en una llamada de 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 la versión 111 a la 113 para los desarrolladores que necesiten volver a habilitar la omisión temporalmente. Si quieres habilitar esta opción, regístrate en la prueba de baja inversa de la omisión de CSP de connect-src.
Pantalla en pantalla del documento
La API de Document Picture-in-Picture es una nueva API que permite abrir una ventana siempre visible que se puede rellenar 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 a los desarrolladores web ofrecer una mejor experiencia de PIP a los usuarios.
Lee la documentación sobre Pantalla en pantalla del documento.
Regístrate en la prueba de origen del documento pantalla en pantalla.
Bajas y eliminaciones
Esta versión de Chrome presenta las bajas y las eliminaciones que se indican a continuación. Visita ChromeStatus.com para ver una lista de las bajas planificadas, las bajas actuales y las eliminaciones anteriores.
En esta versión de Chrome, se quitan tres funciones.
Quitar PaymentInstruments
PaymentInstruments es la API web que respalda las instalaciones de aplicaciones de pago que no sean de JIT (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 cual no resultó ser cierto, y tiene algunas filtraciones de privacidad. Además, no se ha enviado a ningún otro navegador y no hemos observado ningún interés de otros proveedores de navegadores. Por lo tanto, esta API dejó de estar disponible y se quitó.
Se quitó la omisión de la CSP connect-src en la API de Web Payment.
La API de Web Payment ya no puede omitir la política de CSP connect-src cuando se recupera el manifiesto. Después de esta eliminación, la política de CSP connect-src del sitio deberá permitir la URL de la forma de pago especificada en una llamada de PaymentRequest, así como cualquier otra URL que el método encadena para recuperar su manifiesto.
Consulta la información en las pruebas de origen para conocer un método para habilitar una prueba de baja y más tiempo para realizar los cambios necesarios debido a esta eliminación.
Identidad del comercio en canmakepayment evento
El evento del service worker canmakepayment informa al comercio si el usuario tiene una tarjeta registrada en una app de pagos instalada. Se utiliza para pasar, de forma silenciosa, el origen y datos arbitrarios del comercio a un service worker desde el origen de la app de pago. Esta comunicación de origen cruzado se produjo durante 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).