Tenga en cuenta lo siguiente:
- La función Documento en pantalla en pantalla te brinda más control sobre las ventanas de pantalla en pantalla.
- Las declaraciones anidadas de CSS corrigen algunos casos extremos complejos.
- Puedes especificar el comportamiento de las decoraciones en elementos que se dividen en varias líneas.
- Y hay mucho más.
Soy Pete LePage. Veamos las novedades para desarrolladores en Chrome 130.
Pantalla en pantalla de documentos
La API de pantalla en pantalla es ideal cuando quieres sacar un video de una pestaña del navegador para poder seguir mirándolo mientras interactúas con otros sitios o aplicaciones. Pero solo hace videos.
La API de Document Picture-in-Picture elimina esa restricción, lo que te permite crear una ventana de pantalla en pantalla en la que tienes control sobre el contenido. Es ideal para elementos como reproductores de video personalizados, videoconferencias y apps de productividad. Me encanta lo que Spotify hizo con él en su reproductor web. Aparece una ventana con la portada de la canción actual, los controles de reproducción y la opción para agregar la canción a mis favoritos fácilmente.
Para usarla, solicita una nueva ventana de documentos en pantalla en pantalla. El objeto promise devuelto se resuelve con un objeto de JavaScript de ventana de pantalla en pantalla.
Luego, úsalo para agregar tu contenido a la ventana.
async function openDPiP() {
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture
.requestWindow();
pipWindow.document.body.append(player);
}
pipButton.addEventListener('click', openDPiP);
Con la nueva propiedad preferInitialWindowPlacement, puedes indicarle a Chrome que siempre abra la ventana de pantalla en pantalla en su posición y tamaño predeterminados, en lugar de reutilizar la posición o el tamaño de la ventana anterior.
// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
preferInitialWindowPlacement: true,
});
Consulta la entrada de François Pantalla en pantalla para cualquier elemento para obtener muchos más detalles.
Declaraciones anidadas de CSS
El anidamiento de CSS permite usar selectores más cortos, facilita la lectura y ofrece más modularidad, ya que anida reglas dentro de otras. El anidamiento de CSS está Disponible como Baseline y lo ha estado durante casi un año.
Hubo algunos casos extremos que no funcionaron como se esperaba. Por ejemplo, con el siguiente bloque de CSS, esperarías que el color de fondo fuera verde, ya que aparece al final, pero es rojo.
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
Para corregir casos extremos como este, el grupo de trabajo de CSS introdujo la regla de declaraciones anidadas, que se implementó en Chrome 130. Ahora, ese mismo bloque CSS genera un fondo verde, como se esperaba. Si intercalabas declaraciones simples con reglas anidadas, debes volver a revisar tu código.
Consulta el artículo de Bramus CSS nesting improves with CSSNestedDeclarations para obtener una explicación más detallada.
box-decoration-break
La propiedad box-decoration-break de CSS te permite especificar cómo se deben renderizar los fragmentos de un elemento cuando se dividen en varias líneas, columnas o páginas.
Por ejemplo, este elemento se ve muy bien cuando todo está en una sola línea.
Cuando el contenido se divide en varias líneas, las decoraciones como el fondo, la sombra de la caja, el borde, etcétera, se cortan, lo que crea un aspecto bastante drástico.
Si agregas box-decoration-break: clone, cada fragmento se renderiza de forma independiente, lo que crea un aspecto mucho más agradable.
Si bien no es exactamente Baseline, está disponible en Chrome y Firefox, y tiene un prefijo de proveedor en Safari.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Consulta la documentación de box-decoration-break en MDN y la entrada de Rachel La propiedad box-decoration-break en Chrome 130 para obtener más detalles.
Y mucho más
Por supuesto, hay mucho más.
- Después de algunos intentos fallidos, finalmente se lanzarán los contenedores de desplazamiento enfocables en el teclado.
- WebGPU obtiene combinación de fuentes dual.
- Además, la API de Web Serial obtiene un atributo conectado.
Lecturas adicionales
Esto solo abarca algunos aspectos destacados clave. Consulta los siguientes vínculos para ver otros cambios en Chrome 130.
- Notas de la versión de Chrome 130
- Novedades de las Herramientas para desarrolladores de Chrome (130)
- Actualizaciones de ChromeStatus.com para Chrome 130
- 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 de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.
Soy Pete LePage y, en cuanto se lance Chrome 131, estaremos aquí para contarte las novedades de Chrome.