Novedades de Chrome 116

Adriana Jara
Adriana Jara

Tenga en cuenta lo siguiente:

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

API de pantalla en pantalla del documento.

La API de Document Picture-in-Picture permite abrir una ventana siempre visible que se puede rellenar con contenido HTML arbitrario.

Una ventana de pantalla en pantalla en la que se reproduce el video de avances de Sintel.
Una ventana de pantalla en pantalla creada con la API de pantalla en pantalla del documento (demostración).

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 mediante window.open(), con algunas diferencias:

  • La ventana de pantalla en pantalla flota sobre otras ventanas.
  • La ventana pantalla en pantalla nunca dura más que la ventana que se abre.
  • No se puede navegar por la ventana 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 abrir el reproductor de video en una ventana 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 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 ventana Picture-in-Picture. 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.

Faltan mejoras de depuración para las hojas de estilo en Herramientas para desarrolladores.

Se implementaron varias mejoras para identificar y depurar problemas relacionados con hojas de estilo faltantes.

En primer lugar, el árbol Fuentes > Página ahora muestra solo las hojas de estilo implementadas y cargadas correctamente para minimizar la confusión.

Además, Sources > Editor ahora subraya y muestra información sobre la herramienta de errores intercalada junto a las sentencias failed,@import, url() y href.

Declaraciones subrayadas con información sobre la herramienta en el panel Sources.

  • Console, además de vínculos a solicitudes fallidas, 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 declaraciones problemáticas.

El panel Network completa constantemente la columna Initiator con vínculos a la línea exacta que hace referencia a una hoja de estilo que no se pudo cargar.

En el panel Problemas, se enumeran todos los problemas de carga de las hojas de estilo, lo que incluye URLs o solicitudes con errores, y declaraciones @import mal ubicadas.

El panel Problemas con vínculos a fuentes y solicitudes

Consulte las novedades de Herramientas para desarrolladores para ver todos los detalles y más información sobre Herramientas para desarrolladores en Chrome 116.

Y mucho más.

Por supuesto que 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 los lectores de trae tu propio búfer, lo que reduce la sobrecarga y las copias de recolección de elementos no utilizados, y mejora la capacidad de respuesta para los usuarios.

Lecturas adicionales

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

Suscribirse

Si quieres mantenerte al día, suscríbete al canal de YouTube para desarrolladores de Chrome y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Hola, Adriana Jara. En cuanto se lance Chrome 117, estaré aquí para contarte las novedades de Chrome.