Tenga en cuenta lo siguiente:
- Agrega un toque único al texto con la animación de
font-palette
y otras actualizaciones de CSS. - Se realizaron mejoras en la API de Speculation Rules.
- Puedes probar la API de Element Capture en una prueba de origen.
- Además, hay mucho más.
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.
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.
La API de Element Capture resuelve este problema, ya que te permite seleccionar el elemento que deseas compartir.
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()
yresizeTo()
, 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étodoshowPicker()
deHTMLSelectElement
.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.
- Novedades de las Herramientas para desarrolladores de Chrome (121)
- Bajas y eliminaciones de Chrome 121
- Actualizaciones de ChromeStatus.com para Chrome 121
- Lista de cambios del repositorio de código fuente de Chromium
- Calendario de lanzamientos de Chrome
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.