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.
- Hay mucho más
Soy Adriana Jara. Analicémoslo y veamos las novedades para desarrolladores en Chrome 116.
API de Picture-in-Picture de documentos.
La API de pantalla en pantalla del documento permite abrir una ventana siempre activa que se puede completar con contenido HTML arbitrario.
La ventana de pantalla en pantalla de la API de pantalla en pantalla del documento 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 ver 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 errores intercalados junto a las sentencias @import,url() y href que fallaron.
- Console, además de los vínculos a las solicitudes erróneas, ahora proporciona vínculos a la línea exacta que hace referencia a una hoja de estilo que no se pudo cargar.
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 Problemas, se enumeran todos los problemas de carga de las hojas de estilo, incluidas las URL dañadas, las solicitudes fallidas y las declaraciones @import mal ubicadas.
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
displayycontent-visibilityahora 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 elementos no utilizados, 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.
- Novedades de las Herramientas para desarrolladores de Chrome (116)
- Depresiones 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 tanto, 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.
Soy Adriana Jara y, en cuanto se lance Chrome 117, estaré aquí para contarte las novedades.