Novedades de Chrome 121

Adriana Jara

Tenga en cuenta lo siguiente:

Soy Adriana Jara. 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 ellas, puedes personalizar las barras de desplazamiento y cambiar, como probablemente ya habrás adivinado, 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 animación, por lo que cambiar entre paletas se convierte en una transición suave 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 mal escritas con colores de fondo y otras decoraciones, y también 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 CSS en Chrome 120, en la que se agregó una nueva 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 que se agregó compatibilidad con las condiciones supports() a @import, lo que no era así. El cambio está incluido en Chrome 122.

Actualizaciones de la API de Speculation Rules

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

Ahora la API admite reglas de documentos: 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 elementos de una página. Las reglas de los documentos pueden incluir criterios para determinar cuál de estos vínculos puede utilizarse. Esto, junto con un nuevo campo "eagerness", te permite cargar previamente o renderizar previamente los vínculos de las páginas automáticamente, colocando el cursor sobre el anuncio o con el mouse hacia abajo.

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

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

Un cambio independiente permite especificar las 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 permite que las cargas previas especulativas coincidan, incluso si cambian los parámetros de consulta de la URL. El encabezado de respuesta HTTP No-Vary-Search declara que algunas o todas las partes de la consulta de una URL pueden ignorarse para fines de coincidencia. Puede declarar que el orden de las claves de los parámetros de consulta no debe evitar las coincidencias, que los parámetros específicos no deben evitar las coincidencias o que solo ciertos parámetros de consulta conocidos deben 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 y captura solo los subordinados directos del elemento objetivo. En otras palabras, recorta y quita el contenido ocluido y de oclusión.

Un ejemplo de dónde es útil la API de Element Capture es una app de videoconferencia que te permite incorporar aplicaciones de terceros en un iframe. En esta situación, quizá quieras capturar ese iframe como un video y transmitirlo a participantes remotos.

Captura de pantalla de una llamada de videoconferencia en Chrome.
Elad usa una aplicación de terceros en una 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, aparece 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 encima del contenido que recibió Francisco.

La API de Element Capture resuelve este problema, ya que te permite seleccionar el elemento que deseas compartir.

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

Consulta Captura una transmisión de video por Internet 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 que hay mucho más.

  • Los métodos resizeBy() y resizeTo(), que forman parte de la API de Document Picture-in-Picture, 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 en caso de que exista 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 ver cambios adicionales en Chrome 121.

Suscribirse

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

Soy Adriana Jara. En cuanto se lance Chrome 122, estaré aquí para contarte las novedades de Chrome.