Tenga en cuenta lo siguiente:
- Usa la API de Document Picture in Picture para aumentar la productividad de los usuarios.
- Ahora es más fácil depurar las hojas de estilo que faltan en Herramientas para desarrolladores.
- Además, hay mucho más.
Soy Adriana Jara. Veamos las novedades para desarrolladores en Chrome 116.
API de Document Picture-in-Picture
La API de Document Picture-in-Picture permite abrir una ventana siempre arriba que puede completarse con contenido HTML arbitrario.
La ventana de pantalla en pantalla de la API de Pantalla en pantalla de documentos es similar a una ventana en blanco del mismo origen que se abre con window.open(), con algunas diferencias:
- La ventana pantalla en pantalla flota sobre otras ventanas.
- La ventana pantalla en pantalla nunca dura más que la ventana que se abre.
- No es posible 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 en blanco de pantalla en pantalla. 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 en la depuración de las hojas de estilo de Herramientas para desarrolladores.
Las Herramientas para desarrolladores obtuvieron una serie de mejoras para identificar y depurar problemas relacionados con hojas de estilo faltantes.
Primero: 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 con errores,@import, url() y href.
- 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.
El panel Network completa de manera constante 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, incluidas las URL con errores, las solicitudes con errores y las sentencias @import con errores de ubicación.
Consulte las novedades de Herramientas para desarrolladores para conocer todos los detalles y obtener más información sobre las 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 especificada por el desarrollador.
- Las propiedades
displayycontent-visibilityahora son compatibles con las animaciones de fotogramas clave, lo que permite que las animaciones de salida se agreguen solo en CSS. - La API de fetch ahora se puede usar con los lectores de Trae tu propio búfer, lo que reduce la sobrecarga y las copias de la recolección de elementos no utilizados, y mejora la capacidad de respuesta para los usuarios.
Lecturas adicionales
Esto abarca solo algunos aspectos destacados. Consulta los vínculos que aparecen a continuación para ver cambios adicionales en Chrome 116.
- Novedades de las Herramientas para desarrolladores de Chrome (116)
- Bajas y eliminaciones de Chrome 116
- Actualizaciones de ChromeStatus.com para Chrome 116
- 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 117, estaré aquí para contarte las novedades de Chrome.