Nouveautés de Chrome 130

Pete LePage

Voici les informations à retenir :

• La fonctionnalité Picture-in-picture vous offre davantage de contrôle sur les fenêtres Picture-in-picture.
• Les déclarations imbriquées CSS corrigent certains cas difficiles.
• Vous pouvez spécifier le comportement des décorations des éléments réparties sur plusieurs lignes.
• Et ce n'est pas tout !

Je m'appelle Pete LePage. Entrons dans le vif du sujet et 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 ouvrir une vidéo dans un onglet de navigateur afin de pouvoir la surveiller tout en interagissant avec d'autres sites ou applications. Mais il ne permet que de regarder des vidéos.

L'API Picture-in-picture pour les documents élimine cette restriction, ce qui vous permet de créer une fenêtre Picture-in-picture dans laquelle vous pouvez contrôler le contenu. Il est parfaitement adapté aux lecteurs vidéo personnalisés, aux applications de visioconférence et aux applications de productivité. J'adore ce que Spotify a fait avec cette fonctionnalité dans son lecteur Web. J'obtiens une fenêtre avec l'illustration du titre en cours, des commandes de lecture et je peux facilement ajouter le titre à mes favoris.

Pour l'utiliser, demandez une nouvelle fenêtre de document en mode Picture-in-Picture. L'promise renvoyé est résolu avec un objet JavaScript de fenêtre Picture-in-Picture. Ensuite, utilisez-le 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 demander à Chrome d'ouvrir toujours 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 sur le mode Picture-in-Picture pour n'importe quel élément.

Déclarations imbriquées CSS

L'imbrication CSS permet d'utiliser des sélecteurs plus courts, de faciliter la lecture et d'accroître la modularité en imbriquant les règles dans d'autres. L'imbrication CSS est une nouvelle fonctionnalité de référence disponible depuis près d'un an.

Quelques cas particuliers n'ont pas fonctionné comme prévu. Par exemple, avec le bloc CSS suivant, vous vous attendriez à ce que la couleur d'arrière-plan soit verte, car elle vient en dernier, mais elle est rouge.

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

Pour résoudre les cas particuliers comme celui-ci, le groupe de travail CSS a introduit la règle des déclarations imbriquées, qui est implémentée dans Chrome 130. Ce même bloc CSS génère désormais un arrière-plan vert, comme prévu. Si vous entrelaciez des déclarations simples avec des règles imbriquées, vous devriez vérifier votre code.

Pour une explication plus détaillée, consultez l'article de Bramus Amélioration de l'imbrication CSS avec 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 parfait lorsque tout est sur une seule ligne.

Lorsque le contenu est divisé sur plusieurs lignes, les décorations telles que l'arrière-plan, l'ombre de la case, la bordure, etc. sont découpées en tranches, ce qui crée un aspect plutôt théâtral.

En ajoutant box-decoration-break: clone, chaque fragment est affiché indépendamment, ce qui donne un rendu beaucoup plus agréable.

Bien qu'il ne soit pas tout à fait de référence, il est disponible dans Chrome et Firefox, et est associé à un préfixe de fournisseur dans Safari.

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Pour en savoir plus, consultez la documentation sur box-decoration-break sur MDN et l'article de Rachel intitulé Propriété box-decoration-break dans Chrome 130.

Et bien plus !

Bien sûr, il y en a bien d'autres.

• Après quelques faux départs, les conteneurs de défilement sélectionnables au clavier sont enfin disponibles.
• WebGPU bénéficie du mélange à deux sources.
• Et la série Web reçoit un attribut connecté.

Documentation complémentaire

Cela ne couvre que certains points clés. Consultez les liens suivants pour découvrir d'autres modifications dans 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 source Chromium
• Calendrier des versions de Chrome

S'abonner

Pour vous tenir informé, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Nous serons là pour vous présenter les nouveautés de Chrome 131.