Novedades de Chrome 104

Pete LePage

Tenga en cuenta lo siguiente:

Soy Pete LePage. Veamos las novedades para desarrolladores en Chrome 104.

Especifica un área de recorte con la captura de la región

getDisplayMedia() permite crear una transmisión de video por Internet desde la pestaña actual. Sin embargo, hay ocasiones en las que no deseas la pestaña completa, solo una pequeña parte de ella. Hasta ahora, la única forma de hacerlo era recortar manualmente cada fotograma.

Con la captura de región, una app web puede definir el área específica de la pantalla que desea compartir. Por ejemplo, Presentaciones de Google podría permitirte permanecer en la vista de edición estándar y compartir la diapositiva actual.

Captura de pantalla de una ventana del navegador que muestra una app web en la que se destaca el área de contenido principal y un iframe de origen cruzado.
El área de contenido principal está en azul y el iframe de origen cruzado está en rojo.

Para usarlo, selecciona el elemento que quieres compartir y crea un CropTarget nuevo basado en ese elemento. A continuación, llama a getDisplayMedia() para comenzar a compartir la pantalla. De esta manera, se le solicitará permiso al usuario para compartir su pantalla. Luego, llama a track.cropTo() y pasa el cropTarget que creaste antes.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

Consulta Mejor uso compartido de pestañas con Captura regional para obtener más detalles.

Consultas de medios más sencillas con sintaxis y evaluación de nivel 4

Las consultas de medios son fundamentales para el diseño responsivo, ya que te permiten definir estilos específicos para diferentes tamaños de viewport. Sin embargo, a menos que los uses todos los días, la sintaxis puede ser un poco confusa.

En Chrome 104, se agrega compatibilidad con Consultas de medios nivel 4, sintaxis y evaluación, lo que te permite escribir consultas de medios con operadores matemáticos comunes de comparación.

Por lo tanto, en lugar de algo como lo siguiente para indicar un viewport de entre 400 y 600 píxeles:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Se puede escribir de la siguiente manera:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Además de hacer que las consultas de medios sean menos detalladas, la sintaxis nueva puede ser más precisa. Las consultas min- y max- son inclusivas, por ejemplo: min-width: 400px prueba un ancho de 400 px o superior. La sintaxis nueva te permite ser más explícito sobre lo que quieres decir.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Ya es compatible con Firefox, y existe un complemento PostCSS que reescribe la sintaxis nueva según la anterior, lo que garantiza la compatibilidad con el navegador.

Para obtener más información, consulta el artículo de Rachel Nueva sintaxis para consultas de medios de rango en Chrome 104.

Las transiciones de elementos compartidos inician una nueva prueba de origen

Por lo general, las apps específicas para cada plataforma tienen transiciones fluidas entre diferentes vistas, tienen un aspecto atractivo, mantienen al usuario en contexto y ayudan a que la experiencia tenga un mejor rendimiento. En cambio, en la Web, una navegación completa puede ser dura y, a veces, se produce una pantalla en blanco momentánea. Puede ser mejor para una app de una sola página, pero las transiciones aún son difíciles.

Transiciones de elementos compartidos, que inician una nueva prueba de origen en Chrome 104, te permiten proporcionar transiciones fluidas, sin importar si son entre documentos (por ejemplo, en una app de varias páginas) o dentro de documentos (por ejemplo, en una app de una sola página).

Este es un ejemplo aproximado de cómo funcionan las transiciones para una app de una sola página. En la función de navegación, obtén el nuevo contenido de la página y, luego, verifica si se admiten las transiciones. De lo contrario, actualiza la página sin una transición. Si es así, crea un transition() y llama a start() en él, para informarle a la API cuándo se completó el cambio del DOM.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

De forma interna, las transiciones de elementos compartidos usan animaciones de CSS, por lo que puedes pasar de un fundido activo al de deslizarte, o lo que desees.

Como acabo de aprender, consulta el video de Jake Bringing Page Transitions to the Web, o bien obtén la explicación.

Y mucho más.

Por supuesto que hay mucho más.

  • Cuando se configuran cookies con un atributo Expires o Max-Age explícito, el valor ahora se limitará a no más de 400 días.
  • Se realizaron mejoras en la API de posición de ventanas multipantalla.
  • Además, la propiedad overflow-clip-margin de CSS especifica hasta qué punto el contenido de un elemento puede pintarse antes de recortarse.

Lecturas adicionales

Esto abarca solo algunos de los aspectos más destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 104.

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 Pete LePage, y en cuanto se lance Chrome 105, estaré aquí para contarte las novedades de Chrome.