Chrome 123 beta

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 en la lista de ChromeStatus.com. Chrome 123 está en versión beta a partir del 21 de febrero de 2024. Puedes descargar la versión más reciente en Google.com para computadoras de escritorio o en Google Play Store para Android.

CSS

Esta versión agrega cinco funciones nuevas de CSS.

Función de color light-dark() de CSS

La función light-dark() en CSS permite a los desarrolladores adaptar más fácilmente el esquema de colores a la preferencia del usuario por el modo oscuro o claro.

Usa light-dark() para especificar dos valores de color diferentes dentro de una sola propiedad CSS. El navegador (o dispositivo) elegirá automáticamente el color apropiado según el valor color-scheme calculado del elemento. Por ejemplo, con el siguiente CSS:

  • Si el usuario seleccionó un tema claro, el elemento .target tendrá un fondo verde lima.
  • Si el usuario seleccionó un tema oscuro, el elemento .target tendrá un fondo verde.
html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

Modo de pantalla en pantalla de CSS

Se agregó compatibilidad con la función de medios display-mode de CSS para el valor picture-in-picture. Esto permite a los desarrolladores web escribir reglas de CSS específicas que solo se aplican cuando (parte de) la app web se muestra en el modo de pantalla en pantalla.

Obtén más información sobre esta función multimedia en la documentación de la pantalla en pantalla.

Propiedad align-content de CSS para bloques

La propiedad CSS align-content ahora es compatible con contenedores de bloques y celdas de tabla. Anteriormente, esta propiedad solo se admitía en elementos de cuadrícula y flex. Por ejemplo, display: block, display: list-item y display: table-cell ahora se pueden alinear con align-content.

Obtén más información en Compatibilidad con align-content en diseños de bloques y tablas.

La propiedad CSS field-sizing

Con la propiedad field-sizing, los desarrolladores pueden inhabilitar los tamaños predeterminados fijos de los controles de formulario y hacer que su tamaño dependa de su contenido. Esto proporciona una manera de crear campos de texto que crecen automáticamente.

La propiedad text-spacing-trim de CSS

Esta propiedad aplica el espacio entre caracteres a los caracteres de puntuación chinos, japoneses y coreanos (CJK) para producir una tipografía visualmente atractiva, como se define en JLREQ (Requisitos para el diseño de texto en japonés) y CLREQ (Requisitos para el diseño de texto en chino).

Muchos caracteres de puntuación CJK incluyen espaciado interno de glifos. Por ejemplo, el punto y el paréntesis de cierre del CJK suelen tener espacios internos de glifos en la mitad derecha de sus espacios de glifos para darles un avance constante como otros caracteres ideográficos. Sin embargo, cuando aparecen en una fila, los espacios internos de los glifos se vuelven excesivos. Esta función ajusta ese espaciado excesivo.

La propiedad text-spacing-trim acepta uno de los siguientes cuatro valores: normal, trim-start, space-all y space-first. Obtén más información en Presentamos cuatro nuevas funciones internacionales en CSS.

API web

Permite la creación de credenciales de WebAuthn en un iframe de origen cruzado

Esta función permite que los desarrolladores web creen credenciales de WebAuthn (es decir, credenciales de "clave pública", conocidas como llaves de acceso) en iframes de origen cruzado. Se requieren dos condiciones para esta nueva función:

  • El iframe tiene una política de permisos publickey-credentials-create-feature.
  • El iframe tiene una activación de usuario transitoria.

Esto permitirá a los desarrolladores crear llaves de acceso en situaciones de incorporación, como después de un flujo de aumento de identidad en el que el usuario de confianza proporciona una experiencia de identidad federada.

Paquete de funciones de informes de atribución

Chrome 123 agrega la personalización de datos del activador y los filtros de valores agregables a la API de Attribution Reporting, que se enfoca en lo siguiente:

  • Configuración adicional de la API para informes a nivel del evento, ya que admite la personalización de la cardinalidad y los valores de los datos del activador.
  • Configuración adicional de la API para informes de resumen a través de la compatibilidad con filtros en valores agregables

Medición de atribución web y de aplicación cruzada

Extiende la API de Attribution Reporting para permitir atribuir las conversiones que se producen en la Web a eventos que se producen fuera del navegador, dentro de otras aplicaciones.

La propuesta aquí aprovecha la compatibilidad a nivel del SO para la atribución. En particular, le brinda al desarrollador la opción de permitir que los eventos en la Web móvil se puedan unir a los eventos de Privacy Sandbox de Android, aunque también se podría implementar la compatibilidad con otras plataformas.

blocking=render en secuencias de comandos de módulos intercalados

Este es un pequeño cambio que quita una limitación artificial de <script blocking="render">. Antes de este cambio, <script blocking="render"type="module"> requiere un atributo src, incluso si este src es un URI de datos. Esta es una restricción innecesaria, ya que las secuencias de comandos de módulos intercalados que importan otras secuencias de comandos aún deberían poder bloquear la renderización.

El motivo de esto es que las transiciones de vista entre documentos a menudo dependen de secuencias de comandos que bloquean la renderización para la personalización, por lo que facilitar la creación de secuencias de comandos que bloquean la renderización admitiría esta función.

Modo Picture-in-Picture de documentos: Permite que la API de focus() enfoque el abridor.

Ahora puedes usar opener.focus() desde una ventana de pantalla en pantalla de un documento para enfocar la pestaña a nivel del sistema que es propietaria de la ventana de pantalla en pantalla del documento.

Esto permite a los desarrolladores volver a mostrar la pestaña original en primer plano cuando sea necesario. Por ejemplo, cuando el usuario necesita acceder a una experiencia de IU que no se ajusta a la ventana de pantalla en pantalla más pequeña.

Sintaxis de with para importar atributos

Los atributos de importación son una función de JavaScript que permite anotar declaraciones de importación, por ejemplo, import xxx from "mod" with { type: "json" }. Originalmente, Chrome envió una versión anterior de la propuesta (en Chrome 91) con assert como palabra clave. Esta versión se actualizó para usar with debido a algunos cambios necesarios durante la integración con HTML para módulos JSON y CSS.

jitterBufferTarget

El atributo jitterBufferTarget permite que las aplicaciones especifiquen una duración objetivo en milisegundos de contenido multimedia para que el búfer de jitter RTCRtpReceiver contenga. Esto influye en la cantidad de almacenamiento en búfer que realiza el usuario-agente, lo que, a su vez, afecta las retransmisiones y la recuperación de pérdida de paquetes. Alterar el valor objetivo permite que las aplicaciones controlen la compensación entre la demora de la reproducción y el riesgo de quedarse sin fotogramas de audio o video debido al jitter de la red.

Tiempo de fotogramas de animación largos

La API de Long Animation Frames es una extensión de la API de Long Tasks. Mide la tarea junto con su actualización de renderización posterior y agrega información como secuencias de comandos de larga duración, tiempo de renderización y tiempo dedicado al diseño y estilo forzados, conocido como fragmentación de diseño.

Los desarrolladores pueden usar esto como un diagnóstico de "lentitud", que se mide con la INP, encontrando las causas de la congestión del subproceso principal, que suele ser la causa de una mala INP.

La interfaz NavigationActivation agrega navigation.activation. Esto almacena el estado de cuándo se activó el documento actual (por ejemplo, cuándo se inicializó o se restableció desde la caché de atrás/adelante).

Esto significa que los desarrolladores pueden ofrecer páginas personalizadas según el lugar desde el que navegó el usuario. Por ejemplo, ejecuta una animación diferente si llegaron desde la página principal.

evento pagereveal

El evento pagereveal se activa en el objeto de ventana de un documento en la primera oportunidad de renderización después de que un documento se carga inicialmente, se restablece desde la caché de atrás hacia adelante o se activa desde una renderización previa.

Un autor de la página puede usarlo para configurar una experiencia de entrada a la página, como una transición de vista desde un estado anterior.

PointerEvent.deviceId para la escritura con varios lápices

A medida que los dispositivos con capacidades avanzadas de entrada de plumas se vuelven cada vez más comunes, es importante que la plataforma web siga evolucionando para admitir por completo estas funciones avanzadas y desbloquear experiencias enriquecidas para los usuarios finales y los desarrolladores. Uno de esos avances es la capacidad del digitalizador de un dispositivo para reconocer más de un dispositivo de pluma que interactúa con él de forma simultánea. Esta función es una extensión de la interfaz PointerEvent para incluir un atributo nuevo, deviceId, que representa un identificador único persistente en la sesión y aislado del documento que un desarrollador puede usar de forma confiable para identificar plumas individuales que interactúan con la página.

Verificaciones de acceso a red privada para solicitudes de navegación: modo de solo advertencia

Antes de que el sitio web A navegue a otro sitio B en la red privada del usuario, esta función hace lo siguiente:

  1. Comprueba si la solicitud se inició desde un contexto seguro.
  2. Envía una solicitud preliminar y comprueba si B responde con un encabezado que permita el acceso a la red privada.

Ya existen funciones para los subrecursos y trabajadores, pero esta adición es específicamente para las solicitudes de navegación.

Estas verificaciones se realizan para proteger la red privada del usuario. Dado que esta función es el modo de "solo advertencia", no rechazará las solicitudes si falla alguna de las verificaciones. En su lugar, se mostrará una advertencia en las Herramientas para desarrolladores para ayudarlos a prepararse para la aplicación forzosa.

Sugerencia de cliente Sec-CH-UA-Form-Factor

Esta sugerencia indica el "factor de forma" del usuario-agente o dispositivo, de modo que el sitio pueda adaptar su respuesta.

API de enrutamiento estático de Service Worker

Esta API permite a los desarrolladores configurar el enrutamiento y descargar tareas simples que realizan los trabajadores del servicio. Si la condición coincide, la navegación se realiza sin iniciar trabajadores del servicio ni ejecutar JavaScript, lo que permite que las páginas web eviten penalizaciones de rendimiento debido a intercepciones de trabajadores del servicio. Para obtener más información, consulta la entrada de blog anterior sobre esta API.

Actualización de Shared Storage

Esta actualización admite la ejecución de worklets de origen cruzado sin tener que crear un iframe.

Codificación de contenido zstd

Zstandard, o zstd, es un mecanismo de compresión de datos que se describe en RFC8878. Es un algoritmo de compresión sin pérdida rápido que se orienta a situaciones de compresión en tiempo real a nivel de zlib y mejores relaciones de compresión. El token zstd se agregó como un token de codificación de contenido registrado por la IANA.

Si agregas compatibilidad con zstd como Content-Encoding, ayudarás a que las páginas se carguen más rápido y usen menos ancho de banda, y a que se dedique menos tiempo, CPU y energía a la compresión en nuestros servidores, lo que reducirá los costos de los servidores.

Nuevas pruebas de origen

En Chrome 123, puedes habilitar las siguientes pruebas de origen nuevas.

Integración de promesas de JavaScript de WebAssembly

Para admitir aplicaciones responsivas escritas con WebAssembly, es necesario proporcionar funciones que permitan suspender y reanudar los programas de WebAssembly.

El caso de uso inicial principal de la integración de promesas es permitir que los programas de WebAssembly cuya fuente se base en APIs síncronas usen APIs asíncronas que son cada vez más comunes en la plataforma web.

Regístrate en la prueba de origen de integración de promesas.

Eliminaciones

Chrome 123 quita la siguiente función.

El alias window-placement para el permiso y la política de permisos window-management

En Chrome 111, se agregó window-management como alias para las cadenas de permisos y políticas de permisos de window-placement. Esto formaba parte de un esfuerzo más amplio para cambiar el nombre de las cadenas, lo que, en última instancia, dejó obsoleto y quitó window-placement. El cambio de terminología mejora la longevidad del descriptor a medida que la API de Window Management evoluciona con el tiempo.

Las advertencias de baja del alias window-placement comenzaron en Chrome 113 y ahora se quitarán.