Voici quelques points à retenir :
- La fonctionnalité Picture-in-picture pour les documents vous permet de mieux contrôler les fenêtres picture-in-picture.
- Les déclarations imbriquées CSS corrigent certains cas particuliers délicats.
- Vous pouvez spécifier le comportement des décorations sur les éléments qui s'étendent sur plusieurs lignes.
- Et ce n'est pas tout ! Découvrez-en plus.
Je m'appelle Pete LePage. Découvrons les nouveautés de Chrome 130 pour les développeurs.
Picture-in-picture pour les documents
L'API Picture-in-picture est idéale lorsque vous souhaitez extraire une vidéo d'un onglet de navigateur pour pouvoir la regarder tout en interagissant avec d'autres sites ou applications. Mais il ne fait que de la vidéo.
L'API Picture-in-picture pour les documents supprime cette restriction, ce qui vous permet de créer une fenêtre Picture-in-picture dans laquelle vous contrôlez le contenu. Il est idéal pour les lecteurs vidéo personnalisés, les applications de visioconférence et les applications de productivité, par exemple. J'aime ce que Spotify a fait avec dans son lecteur Web. Une fenêtre s'affiche avec la pochette du titre en cours de lecture et les commandes du lecteur. Je peux facilement ajouter le titre à mes favoris.
Pour l'utiliser, demandez une nouvelle fenêtre Picture-in-Picture pour le document. Le promise renvoyé est résolu avec un objet JavaScript de fenêtre Picture-in-Picture.
Utilisez-le ensuite pour ajouter votre contenu à la fenêtre.
async function openDPiP() {
const player = document.querySelector("#player");
const pipWindow = await documentPictureInPicture
.requestWindow();
pipWindow.document.body.append(player);
}
pipButton.addEventListener('click', openDPiP);
Avec la nouvelle propriété preferInitialWindowPlacement, vous pouvez indiquer à Chrome d'ouvrir systématiquement la fenêtre Picture-in-picture dans sa position et sa taille par défaut, au lieu de réutiliser la position ou la taille de la fenêtre précédente.
// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
preferInitialWindowPlacement: true,
});
Pour en savoir plus, consultez le post de François : Picture-in-Picture for any Element.
Déclarations CSS imbriquées
L'imbrication CSS permet d'obtenir des sélecteurs plus courts, une lecture plus facile et une modularité accrue en imbriquant des règles les unes dans les autres. L'imbrication CSS est nouvellement disponible dans Baseline, et ce depuis près d'un an.
Certains cas extrêmes n'ont pas fonctionné comme prévu. Par exemple, avec le bloc CSS suivant, vous vous attendez à ce que la couleur d'arrière-plan soit verte, car elle arrive en dernier, mais elle est rouge !
.foo {
width: fit-content;
@media screen {
background-color: red;
}
background-color: green;
}
Pour corriger ce type de cas extrêmes, le groupe de travail CSS a introduit la règle des déclarations imbriquées, qui est implémentée dans Chrome 130. Désormais, ce même bloc CSS donne un arrière-plan vert, comme prévu. Si vous avez entrelacé des déclarations brutes avec des règles imbriquées, vous devez vérifier votre code.
Pour en savoir plus, consultez l'article de Bramus CSS nesting improves with CSSNestedDeclarations.
box-decoration-break
La propriété CSS box-decoration-break vous permet de spécifier comment les fragments d'un élément doivent être affichés lorsqu'ils sont répartis sur plusieurs lignes, colonnes ou pages.
Par exemple, cet élément est très esthétique lorsqu'il est sur une seule ligne.
Lorsque le contenu est réparti sur plusieurs lignes, les décorations telles que l'arrière-plan, l'ombre de la boîte, la bordure, etc. sont découpées, ce qui crée un aspect plutôt radical.
En ajoutant box-decoration-break: clone, chaque fragment est affiché indépendamment, ce qui crée un rendu beaucoup plus agréable.
Bien qu'il ne s'agisse pas tout à fait de Baseline, il est disponible dans Chrome et Firefox, et est préfixé par le fournisseur dans Safari.
.bdb-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
Pour en savoir plus, consultez la documentation box-decoration-break sur MDN et l'article de Rachel The box-decoration-break property in Chrome 130 (La propriété box-decoration-break dans Chrome 130).
Et bien plus !
Bien sûr, il y en a beaucoup d'autres.
- Après quelques faux départs, les conteneurs de défilement avec focus clavier sont enfin disponibles.
- WebGPU bénéficie du double mélange de sources.
- Et le port série Web obtient un attribut connecté.
Documentation complémentaire
Cette liste ne couvre que quelques points clés. Consultez les liens suivants pour découvrir d'autres modifications apportées à Chrome 130.
- Notes de version de Chrome 130
- Nouveautés des Outils pour les développeurs Chrome (130)
- Mises à jour de ChromeStatus.com pour Chrome 130
- Liste des modifications apportées au dépôt de code source Chromium
- Calendrier des versions de Chrome
S'abonner
Pour ne rien manquer, abonnez-vous à la chaîne YouTube Chrome Developers. Vous recevrez une notification par e-mail chaque fois que nous publierons une nouvelle vidéo.
Je m'appelle Pete LePage et, dès que Chrome 131 sera disponible, nous serons là pour vous présenter les nouveautés de Chrome.