Novedades de Chrome 121

Adriana Jara

Tenga en cuenta lo siguiente:

Soy Adriana Jara. Profundicemos y veamos las novedades para desarrolladores en Chrome 121.

Actualizaciones de CSS.

Comencemos con las actualizaciones de CSS:

Las propiedades scrollbar-color y scrollbar-width ya están disponibles. Con ellos, puedes personalizar las barras de desplazamiento y cambiar, como probablemente adivinaste, su color y ancho.

La propiedad font-palette te permite seleccionar una paleta específica para renderizar una fuente de color. Esta propiedad ahora admite animaciones, por lo que cambiar entre paletas se convierte en una transición fluida entre las dos paletas seleccionadas.

Los seudoelementos ::spelling-error y ::grammar-error te permiten personalizar los colores de los errores ortográficos y gramaticales, destacar palabras con errores ortográficos con colores de fondo u otras decoraciones, e implementar la corrección ortográfica personalizada con un aspecto más integrado.

Se mejoró el enmascaramiento de CSS para SVG. Este es un seguimiento de la compatibilidad mejorada de las máscaras de CSS en Chrome 120, en las que se agregó compatibilidad con las máscaras SVG (varias máscaras, así como mask-mode, mask-composite, mask-position y mask-repeat). Además, ahora se admiten máscaras SVG remotas (por ejemplo, máscara: url(masks.svg#star)).

Corrección: Una versión anterior de este artículo mencionaba agregar compatibilidad con las condiciones supports() a @import, lo que no era el caso. El cambio se incluye en Chrome 122.

Actualizaciones de la API de Speculation Rules

Los sitios pueden usar la API de Speculation Rules para indicar a Chrome de forma programática qué páginas debe renderizar previamente, lo que crea una mejor experiencia del usuario al reducir el tiempo de navegación de las páginas.

Ahora, la API incluye compatibilidad con las reglas de documento, que son una extensión de la sintaxis de reglas de especulación que permite al navegador obtener la lista de URLs para la carga especulativa de los elementos de una página. Las reglas de los documentos pueden incluir criterios para determinar cuáles de estos vínculos se pueden usar. Esto, junto con un nuevo campo "eagerness", te permite cargar previamente o preprocesar vínculos en las páginas automáticamente de forma inmediata, colocando el cursor sobre ellos o presionando el botón del mouse.

A continuación, se muestra un ejemplo de las reglas de los documentos:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

Un cambio separado permite especificar reglas de especulación con el encabezado de respuesta HTTP Speculation-Rules. El encabezado es una alternativa al uso de elementos <script> intercalados. El valor de este encabezado debe ser una URL que dirija a un recurso de texto con el tipo de MIME "application/speculationrules+json". Las reglas del recurso se agregarán al conjunto de reglas del documento.

Además, la sugerencia No-Vary-Search habilita las cargas previas especulativas para que coincidan incluso si los parámetros de consulta de URL cambian. El encabezado de respuesta HTTP No-Vary-Search declara que algunas o todas las partes de la consulta de una URL se pueden ignorar para fines de coincidencia. Puede declarar que el orden de las claves del parámetro de consulta no debe evitar las coincidencias, que los parámetros de consulta específicos no deben evitar las coincidencias o que solo ciertos parámetros de consulta conocidos deberían causar discrepancias.

Visita Mejoras en la API de Speculation Rules para obtener más información sobre estos cambios.

Prueba de origen de la API de Element Capture

La API de Element Capture está disponible en una prueba de origen. Esta API te permite capturar y grabar un elemento HTML específico. Transforma una captura de toda la pestaña, en una captura de un subárbol del DOM específico, capturando solo los subordinados directos del elemento de destino. En otras palabras, recorta y quita el contenido ocluido.

La API de Element Capture es útil, por ejemplo, en una app de videoconferencia que te permite incorporar aplicaciones de terceros en un iframe. En este caso, es posible que quieras capturar ese iframe como un video y transmitirlo a los participantes remotos.

Captura de pantalla de una llamada de videoconferencia en Chrome
Elad usa una aplicación de terceros en una llamada de videoconferencia con François.

Ten en cuenta que puedes usar Region Capture para hacerlo, pero, en ese caso, si algún contenido, como una lista desplegable, se muestra sobre el contenido seleccionado, ese menú desplegable formará parte de la grabación.

Se tomó la captura de pantalla de una lista desplegable.
La lista desplegable de Elad aparece sobre el contenido recibido por François.

La API de Element Capture resuelve este problema al permitirte seleccionar el elemento que deseas compartir.

Captura de pantalla del elemento de destino sin una lista desplegable a la vista.
Francisco no ve la lista desplegable de Elad.

Consulta Captura una transmisión de video por Internet a partir de cualquier elemento para obtener muestras de código y regístrate en la prueba de origen de ElementCapture.

Y mucho más.

Por supuesto, hay mucho más.

  • Los métodos resizeBy() y resizeTo(), que forman parte de la API de pantalla en pantalla del documento, ahora requieren un gesto del usuario.

  • Puedes abrir de manera programática el selector de opciones de un elemento <select> con el método showPicker() de HTMLSelectElement.

  • scope_extensions, se encuentra en la prueba de origen y permite expandir los comportamientos de una app web para incluir otros orígenes, si existe un acuerdo entre el origen principal de una app web y los orígenes asociados.

Lecturas adicionales

Esto abarca solo algunos aspectos destacados. Consulta los siguientes vínculos para cambios adicionales en Chrome 121.

Suscribirse

Para mantenerte al día, suscríbete al canal de YouTube de Chrome Developers, y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Yo soy Adriana Jara. Apenas se lance Chrome 122, estaré aquí para contarte las novedades de Chrome.