Tenga en cuenta lo siguiente:
- La pantalla en pantalla de documentos te brinda más control sobre las ventanas de pantalla en pantalla.
- Las declaraciones anidadas de CSS corrigen algunos casos extremos difíciles.
- Puedes especificar el comportamiento de las decoraciones en los elementos que se dividen en varias líneas.
- Y hay mucho más.
Soy Pete LePage. Profundicemos y veamos las novedades para desarrolladores en Chrome 130.
Pantalla en pantalla de documentos
La API de pantalla en pantalla es excelente cuando quieres quitar un video de una pestaña del navegador para vigilarlo mientras interactúas con otros sitios o aplicaciones. Pero solo reproduce videos.
La API de la función de pantalla en pantalla de documentos 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 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 el material gráfico de la canción actual, los controles de reproducción y puedo añadir la canción a mis favoritos con facilidad.
Para usarlo, solicita una nueva ventana de documentos en pantalla en pantalla. El promise que se muestra se resuelve con un objeto JavaScript de ventana de imagen en imagen.
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 volver a usar 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 publicación de François Pantalla en pantalla para cualquier elemento para obtener muchos más detalles.
Declaraciones anidadas de CSS
El anidado de CSS permite anidar reglas dentro de otras para lograr selectores más cortos, una lectura más fácil y una mayor modularidad. La anidación de CSS es un modelo de referencia recientemente disponible y lleva casi un año disponible.
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 sea verde, ya que es el último, 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 implementa en Chrome 130. Ahora, ese mismo bloque de CSS genera un fondo verde, como se esperaba. Si intercalabas declaraciones sin formato con reglas anidadas, debes volver a verificar tu código.
Consulta el artículo de Bramus El anidamiento de CSS mejora con CSSNestedDeclarations para obtener una explicación más detallada.
box-decoration-break
La propiedad CSS box-decoration-break 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, se cortan las decoraciones, como el fondo, la sombra del cuadro, el borde, etcétera, lo que crea un aspecto bastante drástico.
Cuando se agrega box-decoration-break: clone, cada fragmento se renderiza de forma independiente, lo que crea un aspecto mucho más agradable.
Si bien no es del todo un modelo de referencia, 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 los documentos de box-decoration-break sobre MDN y la publicación 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 inicios falsos, los contenedores de desplazamiento enfocables del teclado finalmente están aterrizando.
- WebGPU obtiene una combinación de dos fuentes.
- Y web serial obtiene un atributo conectado.
Lecturas adicionales
Esto abarca solo algunos aspectos destacados. Consulta los siguientes vínculos para conocer más cambios en Chrome 130.
- Notas de la versión para 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 para desarrolladores de Chrome 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.