Novedades de Chrome 116

Tenga en cuenta lo siguiente:

Soy Adriana Jara. Analicemos las novedades para desarrolladores en Chrome 116.

API de Picture-in-Picture de documentos.

La API de Document Picture-in-Picture permite abrir una ventana siempre en la parte superior que se puede propagar con contenido HTML arbitrario.

Ventana de pantalla en pantalla que reproduce el video del avance de Sintel.
Una ventana de pantalla en pantalla creada con la API de Document Picture-in-Picture (demo).

La ventana de pantalla en pantalla de la API de Document Picture-in-Picture es similar a una ventana en blanco del mismo origen que se abre con window.open(), con algunas diferencias:

  • La ventana de Pantalla en pantalla flota sobre otras ventanas.
  • La ventana de Pantalla en pantalla nunca dura más que la ventana de apertura.
  • No se puede navegar por la ventana de pantalla en pantalla.
  • El sitio web no puede establecer la posición de la ventana de pantalla en pantalla.

El siguiente código HTML configura un reproductor de video personalizado y un elemento de botón para abrirlo en una ventana de Pantalla en pantalla.

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

El siguiente código JavaScript llama a documentPictureInPicture.requestWindow() cuando el usuario hace clic en el botón para abrir una ventana de pantalla en pantalla en blanco. La promesa que se muestra se resuelve con un objeto JavaScript de la ventana de imagen en imagen. El reproductor de video se mueve a esa ventana con append().

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

Consulta Pantalla en pantalla para cualquier elemento para obtener más detalles y ejemplos.

Faltaban mejoras de depuración de hojas de estilo en DevTools.

Las Herramientas para desarrolladores recibieron varias mejoras para identificar y depurar problemas con hojas de estilo faltantes.

En primer lugar, el árbol Sources > Page ahora solo muestra los diseños de página que se implementaron y cargaron correctamente para minimizar la confusión.

Además, Sources > Editor ahora subraya y muestra las indicaciones de herramientas de error intercaladas junto a las sentencias @import,url() y href que fallaron.

Sentencias subrayadas con información sobre herramientas en el panel de fuentes

  • Console, además de los vínculos a las solicitudes que fallaron, ahora proporciona vínculos a la línea exacta que hace referencia a una hoja de estilo que no se pudo cargar.

La consola proporciona vínculos a las líneas exactas con instrucciones problemáticas.

El panel de red propaga de forma coherente la columna Initiator con vínculos a la línea exacta que hace referencia a un diseño de página que no se pudo cargar.

En el panel Issues, se enumeran todos los problemas de carga de los diseños de página, incluidas las URLs rotas, las solicitudes fallidas y las instrucciones @import mal ubicadas.

Panel de problemas con vínculos a fuentes y solicitudes

Consulta las novedades de DevTools para obtener todos los detalles y más información sobre DevTools en Chrome 116.

Y mucho más.

Por supuesto, hay mucho más.

  • La ruta de movimiento permite a los autores posicionar cualquier objeto gráfico y animarlo a lo largo de una ruta que especifique el desarrollador.
  • Las propiedades display y content-visibility ahora son compatibles con las animaciones de fotogramas clave, lo que permite agregar animaciones de salida solo en CSS.
  • La API de recuperación ahora se puede usar con lectores de Bring Your Own Buffer, lo que reduce la sobrecarga y las copias de la recolección de basura, y mejora la capacidad de respuesta para los usuarios.

Lecturas adicionales

Esto solo abarca algunos aspectos clave. Consulta los vínculos que aparecen a continuación para ver cambios adicionales en Chrome 116.

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 Adriana Jara y, en cuanto se lance Chrome 117, estaré aquí para contarte las novedades.