Versión beta de Chrome 133

Rachel Andrew

Fecha de publicación: 15 de enero de 2024

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 133 está en versión beta desde el 15 de enero de 2024. Puedes descargar la versión más reciente en Google.com para computadoras o en Google Play Store en Android.

CSS y la IU

Esta versión agrega siete funciones nuevas de CSS y la IU.

Función attr() avanzada de CSS

Implementa el aumento a attr() especificado en CSS de nivel 5, que permite tipos además de <string> y el uso en todas las propiedades de CSS (además de la compatibilidad existente con el pseudoelemento content).

Obtén más información en CSS attr() gets an upgrade.

Pseudoclase :open de CSS

La pseudoclase :open coincide con <dialog> y <details> cuando están en estado abierto, y coincide con <select> y <input> cuando están en modos que tienen un selector y el selector se muestra.

Consultas de contenedores de estado de desplazamiento de CSS

Usa consultas de contenedores para aplicar estilo a los descendientes de contenedores según su estado de desplazamiento.

El contenedor de consultas es un contenedor de desplazamiento o un elemento afectado por la posición de desplazamiento de un contenedor de desplazamiento. Se pueden consultar los siguientes estados:

  • stuck: Un contenedor posicionado fijo está atascado en uno de los bordes del cuadro de desplazamiento.
  • snapped: Un contenedor alineado con el ajuste de desplazamiento está actualmente ajustado horizontal o verticalmente.
  • scrollable: Indica si se puede desplazar un contenedor de desplazamiento en una dirección consultada.

Un nuevo container-type: scroll-state permite consultar contenedores.

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child {
    font-size: 75%;
  }
}

Obtén más información en CSS scroll-state().

text-box, text-box-trim y text-box-edge de CSS

Para lograr un equilibrio óptimo del contenido de texto, las propiedades text-box-trim y text-box-edge, junto con la propiedad abreviada text-box, permiten un control más preciso de la alineación vertical del texto.

La propiedad text-box-trim especifica los lados que se recortarán, arriba o abajo, y la propiedad text-box-edge especifica cómo se debe recortar el borde.

Estas propiedades te permiten controlar el espaciado vertical con precisión mediante las métricas de fuentes. Obtén más información en CSS text-box-trim.

El valor hint del atributo popover

La API de Popover especifica el comportamiento de dos valores del atributo popover: auto y manual. Esta función describe un tercer valor, popover=hint. Las sugerencias, que suelen asociarse con comportamientos de tipo "información sobre la herramienta", tienen comportamientos ligeramente diferentes. Principalmente, la diferencia es que una hint está subordinada a auto cuando se abren pilas anidadas de ventanas emergentes. Por lo tanto, es posible abrir una ventana emergente hint no relacionada mientras permanece abierta una pila existente de ventanas emergentes auto.

El ejemplo canónico es que un selector <select> está abierto (popover=auto) y se muestra una información sobre la herramienta activada por el cursor (popover=hint). Esa acción no cierra el <select> selector.

Mejoras en el invocador de ventanas emergentes y el posicionamiento de anclas

Agrega una forma imperativa de establecer relaciones de invocador entre las ventanas emergentes con popover.showPopover({source}). Permite que las relaciones de invocador creen referencias de elementos de anclaje implícitas.

La ventana emergente anidada dentro del invocador no debe volver a invocarla

En el siguiente caso, hacer clic en el botón activa correctamente la ventana emergente. Sin embargo, hacer clic en la ventana emergente después de eso no debería cerrarla.

<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>

Anteriormente, esto sucedía porque la ventana emergente hacía clic en el <button> y activaba el invocador, que alternaba la ventana emergente cerrada. Ahora, esto se cambió al comportamiento esperado.

API web

Animation.overallProgress

Proporciona a los desarrolladores una representación conveniente y coherente de qué tan avanzada está una animación en sus iteraciones y, sin importar la naturaleza de su línea de tiempo. Sin la propiedad overallProgress, debes calcular manualmente qué tan avanzada está una animación, teniendo en cuenta la cantidad de iteraciones de la animación y si el currentTime de la animación es un porcentaje del tiempo total (como en el caso de las animaciones basadas en el desplazamiento) o una cantidad de tiempo absoluta (como en el caso de las animaciones basadas en el tiempo).

El método pause() del objeto Atomics

Agrega el método pause() al objeto de espacio de nombres Atomics para indicarle a la CPU que el código actual está ejecutando un bloqueo de giro.

Informes de hash de CSP para secuencias de comandos

Las aplicaciones web complejas a menudo necesitan hacer un seguimiento de los subrecursos que descargan por motivos de seguridad.

En particular, los próximos estándares y prácticas recomendadas de la industria (por ejemplo, PCI-DSS v4) requieren que las aplicaciones web mantengan un inventario de todas las secuencias de comandos que descargan y ejecutan.

Esta función se basa en CSP y la API de Reporting para informar las URLs y los hashes (para CORS/mismo origen) de todos los recursos de secuencia de comandos que carga el documento.

Movimiento de preservación del estado DOM

Agrega un DOM primitivo (Node.prototype.moveBefore) que te permite mover elementos alrededor de un árbol DOM sin restablecer el estado del elemento.

Cuando se mueve en lugar de quitar y, luego, insertar, se conserva el siguiente estado:

  • <iframe> elementos permanecen cargados.
  • El elemento activo permanece enfocado.
  • Las ventanas emergentes, la pantalla completa y los diálogos modales permanecen abiertos.
  • Las transiciones y animaciones de CSS continúan.

Expone el atributo attributionsrc en <area>

Alinea la exposición del atributo attributionsrc en <area> con el comportamiento de procesamiento existente del atributo, incluso cuando no se expuso.

Además, tiene sentido admitir el atributo en <area>, ya que ese elemento es una superficie de navegación de primera clase, y Chrome ya lo admite en las otras superficies de <a> y window.open.

Expone renderTime de origen cruzado más grueso en el tiempo del elemento y LCP (sin importar Timing-Allow-Origin)

Las entradas de tiempo del elemento y LCP tienen un atributo renderTime, alineado con el primer fotograma en el que se pintó una imagen o un texto.

Actualmente, este atributo está protegido para imágenes de origen cruzado, ya que requiere un encabezado Timing-Allow-Origin en el recurso de imagen. Sin embargo, esa restricción es fácil de evitar (por ejemplo, mostrando una imagen de origen cruzado y de mismo origen en el mismo fotograma).

Dado que esto ha sido una fuente de confusión, en su lugar, planeamos quitar esta restricción y, en su lugar, aumentar todos los tiempos de renderización en 4 ms cuando el documento no esté aislado en orígenes cruzados. Esto parece lo suficientemente grueso como para evitar filtrar información útil sobre el tiempo de decodificación de imágenes de origen cruzado.

Revierte responseStart y presenta firstResponseHeadersStart

Con las sugerencias tempranas 103 habilitadas, las respuestas tienen dos marcas de tiempo:

  • Cuando llegan las sugerencias tempranas (103)
  • Cuando llegan los encabezados finales (p.ej., 200)

Cuando Chrome 115 se lanzó firstInterimResponseStart para permitir la medición de estas dos marcas de tiempo, también cambiamos el significado de responseStart (que usa el Time to First Byte (TTFB)) para que signifique "los encabezados finales". Esto creó un problema de compatibilidad web con navegadores y herramientas que no realizaron un cambio similar para esta métrica de uso frecuente.

Chrome 133 revierte este cambio de responseStart para resolver este problema de compatibilidad y, en su lugar, presenta firstResponseHeadersStart para permitir que los sitios midan el tiempo hasta los encabezados finales, mientras conservan la definición original de TTFB.

La interfaz FileSystemObserver

La interfaz FileSystemObserver notifica a los sitios web los cambios en el sistema de archivos. Los sitios observan los cambios en los archivos y directorios a los que el usuario otorgó permiso previamente en el dispositivo local del usuario o en el sistema de archivos de bucket (también conocido como el sistema de archivos privado de origen) y reciben notificaciones sobre la información básica de los cambios, como el tipo de cambio.

Suspensión en el modo Ahorro de energía

Cuando el modo Ahorro de energía esté activo, Chrome suspenderá un "grupo de contexto de navegación" que estuvo oculto y silenciado durante más de cinco minutos si algún subgrupo de marcos del mismo origen dentro de él supera un umbral de uso de CPU, a menos que ocurra lo siguiente:

  • Proporcione funcionalidad de videoconferencia o audio (detectada mediante la identificación de un micrófono, una cámara o una pantalla, una ventana, la captura de una pestaña o una RTCPeerConnection con un RTCDataChannel "abierto" o un MediaStreamTrack "en vivo").
  • Controle un dispositivo externo (detectado con el uso de WebUSB, Web Bluetooth, WebHID o Web Serial).
  • Tenga un bloqueo web o una conexión IndexedDB que bloquee una actualización de versión o una transacción en una conexión diferente.

La suspensión consiste en pausar la ejecución. Se define formalmente en la API de Page Lifecycle.

El umbral de uso de CPU se calibrará para suspender aproximadamente el 10% de las pestañas en segundo plano cuando el modo Ahorro de energía esté activo.

Varios mapas de importación

Actualmente, los mapas de importación deben cargarse antes que cualquier módulo ES, y solo puede haber un mapa de importación por documento. Eso los hace frágiles y potencialmente lentos para usar en situaciones reales: cualquier módulo que se cargue antes de ellos interrumpe toda la app y, en las apps con muchos módulos, se convierten en un gran recurso de bloqueo, ya que primero debe cargarse todo el mapa para todos los módulos posibles.

Esta función permite varios mapas de importación por documento, ya que los une de una manera coherente y determinista.

Encabezados de acceso al almacenamiento

Ofrece una forma alternativa para que las incorporaciones autenticadas habiliten las cookies no particionadas. Estos encabezados indican si las cookies no particionadas se incluyen (o se pueden incluir) en una solicitud de red determinada y permiten que los servidores activen los permisos de "acceso al almacenamiento" que ya se otorgaron. Dar una forma alternativa de activar el permiso de "acceso al almacenamiento" permite el uso de recursos que no son iframe y puede reducir la latencia de las incorporaciones autenticadas.

Admite la creación de ClipboardItem con Promise<DOMString>

ClipboardItem, que es la entrada del método write() asíncrono del portapapeles, ahora acepta valores de cadena además de Blobs en su constructor. ClipboardItemData puede ser un Blob, una cadena o una promesa que se resuelva en un Blob o una cadena.

WebAssembly Memory64

La propuesta de memory64 agrega compatibilidad con memorias WebAssembly lineales con un tamaño superior a 2^32 bits. No proporciona instrucciones nuevas, sino que extiende las instrucciones existentes para permitir índices de 64 bits para memorias y tablas.

​​API de Web Authentication: método PublicKeyCredential getClientCapabilities()

El método PublicKeyCredential getClientCapabilities() te permite determinar qué funciones de WebAuthn admite el cliente del usuario. El método muestra una lista de capacidades compatibles, lo que permite a los desarrolladores adaptar las experiencias y los flujos de trabajo de autenticación según la funcionalidad específica del cliente.

WebGPU: Formatos de vértices de 1 componente (y unorm8x4-bgra)

Agrega formatos de vértices adicionales que no están presentes en la versión inicial de WebGPU debido a la falta de compatibilidad o a versiones antiguas de macOS (que ya no son compatibles con ningún navegador). Los formatos de vértices de 1 componente permiten que las aplicaciones soliciten solo los datos necesarios cuando antes debían solicitar al menos dos veces más para los tipos de datos de 8 y 16 bits. El formato unorm8x4-bgra hace que sea un poco más conveniente cargar colores de vértices codificados en BGRA mientras se mantiene el mismo sombreador.

Algoritmo X25519 de la API de Web Cryptography

El algoritmo "X25519" proporciona herramientas para realizar un acuerdo de claves con la función X25519 especificada en [RFC7748]. El identificador del algoritmo "X25519" se puede usar en la interfaz SubtleCrypto para acceder a las operaciones implementadas: generateKey, importKey, exportKey, deriveKey y deriveBits.

Nuevas pruebas de origen

En Chrome 133, puedes habilitar las siguientes pruebas de origen nuevas origin trials.

Inhabilitar la suspensión en el modo Ahorro de energía

Esta prueba de inhabilitación permite que los sitios inhabiliten el comportamiento de suspensión en el modo Ahorro de energía que se incluye en Chrome 133.

Bajas y retiros

Esta versión de Chrome presenta las bajas y los retiros que se indican a continuación. Visita ChromeStatus.com para obtener listas de bajas planificadas, bajas actuales y retiros anteriores.

Esta versión de Chrome da de baja una función.

Da de baja el límite maxInterStageShaderComponents de WebGPU

El maxInterStageShaderComponents limit está obsoleto debido a una combinación de factores. La fecha de retiro prevista es Chrome 135.

  • Redundancia con maxInterStageShaderVariables: Este límite ya cumple un propósito similar, ya que controla la cantidad de datos que se pasan entre las etapas del sombreador.
  • Discrepancias menores: Si bien existen pequeñas diferencias en la forma en que se calculan los dos límites, estas diferencias son menores y se pueden administrar de manera eficaz dentro del límite maxInterStageShaderVariables.
  • Simplificación: Quitar maxInterStageShaderComponents optimiza la interfaz del sombreador y reduce la complejidad para los desarrolladores. En lugar de administrar dos límites separados con diferencias sutiles, pueden enfocarse en el maxInterStageShaderVariables más adecuado y completo.

Esta versión de Chrome quita dos funciones.

Anteriormente, cuando se recuperaba previamente un recurso con <link rel=prefetch>, Chrome ignoraba su semántica de caché (es decir, max-age y no-cache) para el primer uso en cinco minutos, para evitar la recuperación. Ahora, Chrome quita este caso especial y usa la semántica normal de caché HTTP.

Esto significa que los desarrolladores web deben incluir encabezados de almacenamiento en caché adecuados (Cache-Control o Expires) para ver los beneficios de <link rel=prefetch>.

Esto también afecta a <link rel=prerender> no estándar.

Quita el inicio de la página de bienvenida de Chrome con las pestañas de la primera ejecución de las preferencias iniciales

Incluir chrome://welcome en la propiedad first_run_tabs del archivo initial_preferences ya no tendrá ningún efecto. Se quitó porque esa página es redundante con la experiencia de primera ejecución que se activa en plataformas de computadoras de escritorio.