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í en los vínculos proporcionados o en la lista en ChromeStatus.com. Chrome 123 está en fase beta a partir del 21 de febrero de 2024. Puedes descargar la versión más reciente en Google.com para computadoras o en Google Play Store para Android.
CSS
En esta versión, se agregan 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 con mayor facilidad el esquema de colores a las preferencias de un usuario por el modo oscuro o claro.
Usa light-dark() para especificar dos valores de color diferentes dentro de una sola propiedad de CSS. El navegador (o dispositivo) elegirá automáticamente el color apropiado según el valor de color-scheme calculado del elemento. Por ejemplo, con el siguiente CSS:
- Si el usuario seleccionó un tema claro, el elemento
.targettendrá un fondo verde lima. - Si el usuario seleccionó un tema oscuro, el elemento
.targettendrá un fondo verde.
html {
color-scheme: light dark;
}
.target {
background-color: light-dark(lime, green);
}
Modo de visualización 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 la app web se muestra en el modo de pantalla en pantalla (parte de ella).
Obtén más información sobre esta función de contenido multimedia en la documentación de pantalla en pantalla.
Propiedad de CSS deAlign-content para bloques
La propiedad align-content de CSS ahora es compatible con contenedores de bloques y celdas de tablas. Anteriormente, esta propiedad solo era compatible con los elementos flexibles y de cuadrícula. 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 field-sizing de CSS
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 forma de crear campos de texto que crecen automáticamente.
La propiedad text-spacing-trim de CSS
Esta propiedad aplica el interletraje a los caracteres de puntuación chinos, japoneses y coreanos (CJK) para producir la tipografía visualmente agradable según la definición de 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 del glifo. Por ejemplo, el punto final de CJK y el paréntesis de cierre de CJK suelen tener espaciados internos de glifos en la mitad derecha de sus espacios glifo, para darles un avance constante como otros caracteres ideográficos. Sin embargo, cuando aparecen en una fila, los espacios del glifo interno se vuelven excesivos. Esta función ajusta un 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.
APIs web
Permitir la creación de credenciales de WebAuthn en un iframe de origen cruzado
Esta función permite a los desarrolladores web crear 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 capacidad:
- El iframe tiene una política de permisos
publickey-credentials-create-feature. - El iframe tiene activación transitoria del usuario.
Esto permitirá a los desarrolladores crear llaves de acceso en situaciones incorporadas, como después de un flujo de aumento de identidad en el que la parte 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 filtros de valor agregable a la API de Attribution Reporting en función de los siguientes aspectos:
- Ofrece una configuración adicional de la API para los informes a nivel del evento mediante la compatibilidad con la personalización de los valores y la cardinalidad de datos del activador.
- Ofrece una configuración adicional de la API para los informes de resumen mediante la compatibilidad con filtros en valores agregables.
Medición de atribución entre apps y la Web
Extiende la API de Attribution Reporting para permitir atribuir las conversiones que ocurren en la Web a los eventos que ocurren fuera del navegador y dentro de otras aplicaciones.
Esta propuesta aprovecha la compatibilidad a nivel del SO para la atribución. En particular, le brinda al desarrollador la opción de permitir que se unan eventos de la Web móvil con eventos de Privacy Sandbox de Android, aunque también se podría implementar 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 del 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 renderizarse.
Esto se debe a que las transiciones de vistas entre documentos suelen depender 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 sería compatible con esta función.
Pantalla en pantalla del documento: Permite que la API de focus() enfoque el menú de apertura
Ahora puedes usar opener.focus() desde una ventana de pantalla en pantalla de un documento para llevar el enfoque a nivel del sistema a la pestaña que posee la ventana de pantalla en pantalla del documento.
Esto permite a los desarrolladores volver a colocar la pestaña original en primer plano cuando sea necesario. Por ejemplo, cuando el usuario necesita acceder a una experiencia de IU que no cabe en la ventana de pantalla en pantalla más pequeña.
Sintaxis de los atributos with de importación
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 que se deben realizar algunos cambios durante la integración con HTML para los 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 se mantenga el búfer de jitter RTCRtpReceiver. 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. Modificar el valor objetivo permite que las aplicaciones controlen la compensación entre la demora en la reproducción y el riesgo de quedarse sin fotogramas de audio o video debido al jitter de la red.
Tiempo de fotograma de animación largo
La API de Long Animation Frames es una extensión de la API de Long Tasks. Mide la tarea junto con la 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 el estilo forzados, lo que se conoce como paginación excesiva de diseños.
Los desarrolladores pueden usar esto como diagnóstico de la "lentitud", que se mide por INP, cuando encuentran las causas de la congestión del subproceso principal, que suele ser la causa de un INP incorrecto.
NavigationActivation
La interfaz de NavigationActivation agrega navigation.activation. Almacena el estado acerca de cuándo se activó el documento actual (por ejemplo, cuándo se inicializó o se restableció desde la memoria caché 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 proviene de la página principal.
evento de revelación de página
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 memoria caché atrás/adelante o se activa desde una renderización previa.
El autor de la página puede usarla para configurar una experiencia de entrada de página, como una transición de vistas desde un estado anterior.
PointerEvent.deviceId para la escritura multitexto
A medida que los dispositivos con capacidades de entrada de lápiz avanzadas son cada vez más frecuentes, es importante que la plataforma web continúe evolucionando para admitir por completo estas funciones avanzadas con el fin de ofrecer experiencias enriquecidas tanto para los usuarios finales como para los desarrolladores. Un ejemplo de ese avance es la capacidad del digitalizador de un dispositivo para reconocer más de un bolígrafo que interactúa con él en simultáneo. Esta función es una extensión de la interfaz PointerEvent para incluir un nuevo atributo, deviceId, que representa un identificador único de sesión persistente, aislado en documentos que un desarrollador puede usar de forma confiable para identificar bolígrafos individuales que interactúan con la página.
Verificaciones de acceso a la 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:
- Comprueba si la solicitud se inició desde un contexto seguro.
- Envía una solicitud preliminar y verifica 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 generará fallas en las solicitudes si falla alguna de las verificaciones. En su lugar, se mostrará una advertencia en Herramientas para desarrolladores para ayudar a los desarrolladores a prepararse para la aplicación forzosa que se avecina.
Sugerencia de cliente para el factor de forma Sec-CH-UA
Esta sugerencia indica el "factor de forma" del usuario-agente o del 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 también descargar tareas simples que realizan los service workers. Si la condición coincide, la navegación se produce sin iniciar service workers ni ejecutar JavaScript, lo que permite que las páginas web eviten penalizaciones de rendimiento debido a intercepciones de service worker. Para obtener más información, consulta la entrada de blog anterior sobre esta API.
Actualización del almacenamiento compartido
Esta actualización admite la ejecución de trabajos 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 descrito en RFC8878. Es un algoritmo de compresión rápido sin pérdidas que se orienta a situaciones de compresión en tiempo real al nivel de zlib y mejores relaciones de compresión. El token zstd se agregó como un token de codificación de contenido registrado en IANA.
Agregar compatibilidad con zstd como codificación de contenido ayudará a cargar las páginas más rápido y usar menos ancho de banda, así como a dedicar menos tiempo, CPU y energía a la compresión en nuestros servidores, lo que reduce los costos del servidor.
Pruebas de origen nuevas
En Chrome 123, puedes habilitar las siguientes pruebas de origen nuevas.
Integración de promesas de JavaScript para WebAssembly
Para admitir las aplicaciones responsivas escritas con WebAssembly, es necesario proporcionar funciones que permitan suspender y reanudar los programas de WebAssembly.
El caso de uso inicial principal para la integración de promesa 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 para la prueba de origen de la integración de promesas.
Eliminaciones
En Chrome 123, se quita la siguiente función.
El alias window-placement para los permisos y la política de permisos window-management
En Chrome 111, se agregó window-management como alias para las cadenas de permisos y de políticas de permisos de window-placement.
Esto fue parte de un esfuerzo mayor para cambiar el nombre de las cadenas, ya que finalmente dio de baja window-placement y se quitó. El cambio de terminología mejora la longevidad del descriptor a medida que evoluciona la API de Window Management con el tiempo.
Las advertencias de baja para el alias window-placement comenzaron en Chrome 113 y ahora se quitarán.