Novedades de Chrome 104

Pete LePage

Tenga en cuenta lo siguiente:

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

Especifica un área de recorte con captura de 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 quieres toda la pestaña, sino solo una pequeña parte de ella. Hasta ahora, la única forma de hacerlo era recortar manualmente cada fotograma del video.

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 destacan el área de contenido principal y un iframe de origen cruzado.
El área de contenido principal está en azul y el iframe de varios orígenes está en rojo.

Para usarlo, selecciona el elemento que deseas compartir y, luego, crea un CropTarget nuevo basado en ese elemento. A continuación, llama a getDisplayMedia() para comenzar a compartir la pantalla. Se le solicitará al usuario permiso para compartir su pantalla. Luego, llama a track.cropTo() y pasa el cropTarget creado anteriormente.

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 de región para obtener más detalles.

Consultas de contenido multimedia más fáciles 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.

Chrome 104 agrega compatibilidad con las consultas de medios: nivel 4: sintaxis y evaluación, lo que te permite escribir consultas de medios con operadores de comparación matemática ordinarios.

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

@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 contenido multimedia sean menos extensas, la nueva sintaxis puede ser más precisa. Las consultas min- y max- son inclusivas, por ejemplo: min-width: 400px prueba un ancho de 400 px o más. La nueva sintaxis 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 hay un complemento de PostCSS que volverá a escribir la sintaxis nueva en la sintaxis anterior, lo que garantiza la compatibilidad con el navegador.

Consulta el artículo de Rachel Nueva sintaxis para las consultas de medios de rango en Chrome 104 para obtener más detalles.

Las transiciones de elementos compartidos inician una nueva prueba de origen

Las apps específicas de la plataforma suelen tener transiciones fluidas entre las diferentes vistas, se ven atractivas, mantienen al usuario en contexto y ayudan a que la experiencia tenga un mejor rendimiento. Mientras que, en la Web, una navegación completa puede ser un poco difícil y, a veces, significa una pantalla en blanco momentánea. Para una app de una sola página, puede ser mejor, pero las transiciones siguen siendo difíciles.

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

Este es un ejemplo aproximado de cómo funcionan las transiciones en una app de una sola página. En la función de navegación, obtén el contenido de la página nueva y, luego, verifica si se admiten 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 cuando se complete 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));
}

En el fondo, las transiciones de elementos compartidos usan animaciones de CSS, por lo que puedes cambiar de un efecto de atenuación a uno de deslizamiento o lo que quieras.

Esto es solo la punta del iceberg, así que mira el video de Jake Cómo llevar transiciones de página a la Web o consulta la explicación.

Y mucho más.

Por supuesto, hay mucho más.

  • Cuando las cookies se configuren 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 Multi-Screen Window Placement.
  • Además, la propiedad CSS overflow-clip-margin especifica hasta qué punto se puede pintar el contenido de un elemento antes de que se recorte.

Lecturas adicionales

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

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.

Soy Pete LePage, y apenas se lance Chrome 105, estaré aquí para contarte las novedades de Chrome.