Novedades de Chrome 121

Adriana Jara

Tenga en cuenta lo siguiente:

Soy Adriana Jara. Analicemos 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 ya 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 animación, por lo que cambiar entre paletas se convierte en una transición fluida entre las dos paletas seleccionadas.

Los pseudoelementos ::spelling-error y ::grammar-error te permiten personalizar los colores de los errores ortográficos y gramaticales, destacar las palabras con errores ortográficos con colores de fondo o con otras decoraciones, y también implementar un corrector ortográfico personalizado con un aspecto más integrado.

Se mejoró el enmascaramiento de CSS para SVG. Este es un seguimiento de la compatibilidad mejorada de máscaras de CSS en Chrome 120, que agrega compatibilidad con máscaras nuevas a SVG (múltiples máscaras, así como mask-mode, mask-composite, mask-position y mask-repeat). Además, ahora se admiten máscaras SVG remotas (por ejemplo, mask: 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 indicarle a Chrome de forma programática qué páginas renderizar previamente, lo que crea una mejor experiencia del usuario, ya que reduce el tiempo de navegación de la página.

Ahora, la API incluye compatibilidad con las reglas de documentos: son una extensión de la sintaxis de las reglas de especulación que permite que el navegador obtenga la lista de URLs para la carga especulativa desde los elementos de una página. Las reglas de documentos pueden incluir criterios para determinar cuáles de estos vínculos se pueden usar. Esto, junto con un nuevo campo "eagerness", te permite recuperar o renderizar previamente los vínculos de las páginas de forma automática de inmediato, cuando colocas el cursor sobre ellos o cuando presionas el botón del mouse.

Este es un ejemplo de reglas de documentos:

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

Un cambio separado 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 apunte 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 se pueden ignorar algunas o todas las partes de la consulta de una URL para la coincidencia. Puede declarar que el orden de las claves de los parámetros de consulta no debe impedir las coincidencias, que los parámetros de consulta específicos no deben impedir las coincidencias o que solo ciertos parámetros de consulta conocidos deben causar discrepancias.

Consulta 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 ocluyente y ocluido.

Un ejemplo de un caso en el que la API de Element Capture es útil es 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 la Captura de región para hacerlo, pero, en ese caso, si algún contenido, como una lista desplegable, se dibuja sobre el contenido seleccionado, ese elemento desplegable será parte de la grabación.

Captura de pantalla de una lista desplegable.
La lista desplegable de Elad aparece sobre el contenido que recibió François.

La API de Element Capture resuelve este problema, ya que te permite segmentar 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 Cómo capturar una transmisión de video desde cualquier elemento para obtener muestras de código y regístrate para 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 Documento en pantalla en miniatura, ahora requieren un gesto del usuario.

  • Puedes abrir de forma 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 solo abarca algunos aspectos clave. Consulta los siguientes vínculos para ver cambios adicionales en Chrome 121.

Suscribirse

Para mantenerte al tanto, 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.

Adriana Jara, y apenas se lance Chrome 122, estaré aquí para contarte las novedades de Chrome.