Tenga en cuenta lo siguiente:
- Usa la API de Imagen en imagen del documento 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 Documento de pantalla en pantalla.
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 tiempo 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 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 de JavaScript de ventana de pantalla en pantalla. 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.
A Herramientas para desarrolladores le faltaban mejoras para depurar las hojas de estilo.
Herramientas para desarrolladores obtuvieron una serie de mejoras para identificar y depurar problemas con hojas de estilo faltantes.
En primer lugar, la sección Fuentes > El árbol de página ahora muestra solo las hojas de estilo implementadas y cargadas correctamente para minimizar las confusiones.
Además, la página Fuentes > Editor ahora subraya y muestra información sobre la herramienta de error intercalada junto a las sentencias con errores, @import, url() y href.
- 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 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 dañadas, las solicitudes fallidas y las declaraciones @import mal ubicadas.
Consulta las novedades de Herramientas para desarrolladores para conocer todos los detalles y obtener más información al respecto 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 en una ruta especificada por el desarrollador.
- Las propiedades
displayycontent-visibilityahora son compatibles con las animaciones de fotogramas clave, lo que permite agregar animaciones de salida solo en CSS. - Ahora se puede usar la API de extracción con los lectores de tu propio búfer, lo que reduce la sobrecarga de recolección de elementos no utilizados y copias, y mejora la capacidad de respuesta para los usuarios.
Lecturas adicionales
Esto abarca solo algunos aspectos destacados. Consulta los vínculos a continuación 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, y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.
Yo soy Adriana Jara. Apenas se lance Chrome 117, estaré aquí para contarte las novedades de Chrome.