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 indican aquí a través de los vínculos proporcionados o de la lista en ChromeStatus.com. Chrome 133 está en versión beta a partir del 15 de enero 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 y IU
Esta versión agrega siete funciones nuevas de CSS y IU.
Función attr() avanzada de CSS
Implementa la ampliación a attr() especificada en el nivel 5 de CSS, que permite tipos además de <string> y su uso en todas las propiedades CSS (además de la compatibilidad existente con el pseudoelemento content).
Obtén más información en CSS attr() recibe una actualización.
Pseudoclase :open de CSS
La pseudoclase :open coincide con <dialog> y <details> cuando están en su estado abierto, y coincide con <select> y <input> cuando están en modos que tienen un selector y este se muestra.
Consultas de contenedores de estado de desplazamiento de CSS
Usa consultas de contenedor para aplicar diseño a los elementos secundarios de los contenedores según su estado de desplazamiento.
El contenedor de consulta 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 con posición fija se pega a uno de los bordes del cuadro de desplazamiento.snapped: Un contenedor alineado con el ajuste de desplazamiento se ajusta 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 scroll-state() de CSS.
CSS text-box, text-box-trim y text-box-edge
Para lograr un equilibrio óptimo del contenido de texto, las propiedades text-box-trim y text-box-edge, junto con la propiedad de abreviatura 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 la fuente. Obtén más información en text-box-trim de CSS.
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 "ventana de información", tienen comportamientos ligeramente diferentes. En primer lugar, la diferencia es que un hint está subordinado a auto cuando se abren pilas anidadas de popovers. Por lo tanto, es posible abrir un cuadro emergente hint no relacionado mientras una pila existente de cuadros emergentes auto permanece abierta.
El ejemplo canónico es que se abre un selector <select> (popover=auto) y se muestra un cuadro de información (popover=hint) activado por el desplazamiento del mouse. Esa acción no cierra el selector <select>.
Mejoras en el llamador de ventanas emergentes y el posicionamiento de anclas
Agrega una forma imperativa de establecer relaciones de invocador entre los popovers con popover.showPopover({source}). Habilita las relaciones de invocador para crear referencias de elementos de ancla implícitas.
El cuadro emergente anidado dentro del llamador no debería volver a invocarlo.
En el siguiente caso, hacer clic en el botón activa correctamente el cuadro emergente. Sin embargo, hacer clic en el cuadro emergente después de eso no debería cerrarlo.
<button popovertarget=foo>Activate
<div popover id=foo>Clicking me shouldn't close me</div>
</button>
Esto sucedía antes porque el clic del cuadro emergente se mostraba en <button> y activaba el llamador, que cambiaba el estado del cuadro emergente a cerrado. Ahora se cambió al comportamiento esperado.
API web
Animation.overallProgress
Proporciona a los desarrolladores una representación conveniente y coherente de qué tan lejos avanzó una animación a lo largo de sus iteraciones, independientemente de la naturaleza de su cronograma. Sin la propiedad overallProgress, debes calcular manualmente cuánto avanzó 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 impulsadas por el desplazamiento) o una cantidad de tiempo absoluta (como en el caso de las animaciones impulsadas por el tiempo).
El método pause() del objeto Atomics
Agrega el método pause() al objeto del 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 suelen necesitar 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 valores hash (para CORS o mismo origen) de todos los recursos de secuencia de comandos que carga el documento.
Movimiento que conserva el estado del DOM
Agrega una primitiva de DOM (Node.prototype.moveBefore) que te permite mover elementos por un árbol de DOM sin restablecer el estado del elemento.
Cuando se mueve en lugar de quitar y agregar, se conserva el siguiente estado:
- Los elementos
<iframe>permanecen cargados. - El elemento activo permanece enfocado.
- Los diálogos emergentes, de pantalla completa y modales permanecen abiertos.
- Las transiciones y animaciones de CSS continúan.
Exponer 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 estaba expuesto.
Además, tiene sentido admitir el atributo en <area>, ya que ese elemento es una plataforma de navegación de primera clase, y Chrome ya lo admite en las otras plataformas de <a> y window.open.
Se expone un renderTime de varios orígenes más detallado en el tiempo de los elementos y el LCP (independientemente de Timing-Allow-Origin).
El tiempo de los elementos y las entradas de 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 las 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 del mismo origen y de origen cruzado en el mismo marco).
Como esto ha sido una fuente de confusión, planeamos quitar esta restricción y, en su lugar, aumentar en 4 ms todos los tiempos de renderización cuando el documento no esté aislado de varios orígenes. Esto parece ser lo suficientemente detallado como para evitar filtrar información útil sobre el tiempo de decodificación de imágenes de varios orígenes.
La interfaz de 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 les otorgó permiso anteriormente, en su dispositivo local o en el sistema de archivos de Bucket (también conocido como sistema de archivos privado de origen) y reciben notificaciones sobre la información básica de los cambios, como el tipo de cambio.
Inmovilización en el modo de ahorro de energía
Cuando el Ahorro de energía está activo, Chrome inmoviliza 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 la CPU, a menos que cumpla con las siguientes condiciones:
- Proporciona funcionalidad de videoconferencia (detectada a través de la identificación de un micrófono, una cámara o la captura de una pantalla, una ventana o una pestaña, o una RTCPeerConnection con un RTCDataChannel "abierto" o un MediaStreamTrack "en vivo").
- Controla un dispositivo externo (detectado con WebUSB, Web Bluetooth, WebHID o Web Serial).
- Contiene un bloqueo web o una conexión IndexedDB que bloquea una actualización de versión o una transacción en una conexión diferente.
La inmovilización consiste en pausar la ejecución. Se define formalmente en la API de Page Lifecycle.
El umbral de uso de la CPU se calibrará para inmovilizar aproximadamente el 10% de las pestañas en segundo plano cuando el Ahorro de energía esté activo.
Varios mapas de importación
Actualmente, los mapas de importación se deben cargar antes que cualquier módulo de ES, y solo puede haber un mapa de importación por documento. Eso los hace frágiles y, potencialmente, lentos de usar en situaciones de la vida real: cualquier módulo que se cargue antes de ellos rompe toda la app y, en las apps con muchos módulos, se convierten en un gran recurso de bloqueo, ya que primero se debe cargar todo el mapa de todos los módulos posibles.
Esta función habilita varios mapas de importación por documento, ya que los combina 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 pueden incluirse) en una solicitud de red determinada y permiten que los servidores activen los permisos de "acceso al almacenamiento" que ya se otorgaron. Proporcionar una forma alternativa de activar el permiso "storage-access" permite el uso de recursos que no son iframes y puede reducir la latencia de las incorporaciones autenticadas.
Se admite la creación de ClipboardItem con Promise<DOMString>.
ClipboardItem, que es la entrada del método write() del portapapeles asíncrono, ahora acepta valores de cadena, además de objetos Blob, en su constructor.
ClipboardItemData puede ser un blob, una cadena o una promesa que se resuelve en un blob o una cadena.
WebAssembly Memory64
La propuesta de memory64 agrega compatibilidad con memorias lineales de WebAssembly con un tamaño superior a 2^32 bits. No proporciona instrucciones nuevas, sino que extiende las existentes para permitir índices de 64 bits para memorias y tablas.
API de Web Authentication: Método getClientCapabilities() de PublicKeyCredential
El método getClientCapabilities() de PublicKeyCredential 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 experiencias de autenticación y flujos de trabajo según la funcionalidad específica del cliente.
WebGPU: Formatos de vértices de 1 componente (y unorm8x4-bgra)
Se agregaron formatos de vértices adicionales que no estaban presentes en la versión inicial de WebGPU debido a la falta de compatibilidad o a versiones anteriores 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 tenían que solicitar al menos el doble 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 y, al mismo tiempo, mantener el mismo sombreador.
Algoritmo X25519 de la API de Web Cryptography
El algoritmo "X25519" proporciona herramientas para realizar el acuerdo de claves con la función X25519 especificada en [RFC7748]. El identificador del algoritmo "X25519" se puede usar en la interfaz de 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.
Inhabilita la inmovilización en el modo de ahorro de energía
Esta prueba de inhabilitación permite que los sitios inhabiliten el comportamiento de inmovilización del Ahorro de energía que se incluye en Chrome 133.
Bajas y eliminaciones
Esta versión de Chrome presenta las bajas y eliminaciones que se indican a continuación. Visita ChromeStatus.com para obtener listas de bajas planificadas, bajas actuales y eliminaciones anteriores.
Esta versión de Chrome da de baja una función.
Se dejará de admitir el límite maxInterStageShaderComponents de WebGPU
maxInterStageShaderComponents limit dejó de estar disponible debido a una combinación de factores. La fecha de eliminación prevista en Chrome 135.
- Redundancia con
maxInterStageShaderVariables: Este límite ya tiene un propósito similar, que es controlar la cantidad de datos que se pasan entre las etapas del sombreador. - Discrepancias menores: Si bien existen ligeras 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 de
maxInterStageShaderVariables. - Simplificación: Quitar
maxInterStageShaderComponentsoptimiza 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 elmaxInterStageShaderVariablesmás completo y con un nombre más adecuado.
Esta versión de Chrome quita dos funciones.
Quita la regla de cinco minutos de <link rel=prefetch>
Anteriormente, cuando se precargó un recurso con <link rel=prefetch>, Chrome ignoró su semántica de caché (es decir, max-age y no-cache) para el primer uso en un plazo de cinco minutos para evitar la actualización. Ahora, Chrome quita este caso especial y usa la semántica normal de la caché de HTTP.
Esto significa que los desarrolladores web deben incluir los encabezados de almacenamiento en caché adecuados (Cache-Control o Expires) para ver los beneficios de <link rel=prefetch>.
Esto también afecta a los <link rel=prerender> no estándar.
Se quitó 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 ahora no tendrá efecto. Se quitó porque esa página es redundante con la experiencia de primera ejecución que se activa en las plataformas de computadoras de escritorio.