Nouveautés de Chrome 130

Pete LePage

Voici les informations à retenir :

• Le mode 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 difficiles.
• Vous pouvez spécifier le comportement des décorations sur les éléments qui se répartissent sur plusieurs lignes.
• Et ce n'est pas tout : d'autres fonctionnalités sont disponibles.

Je m'appelle Pete LePage. Voyons ce que Chrome 130 a de nouveau à offrir aux 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 contrôlez le contenu. Il est idéal pour les lecteurs vidéo personnalisés, la visioconférence et les applications de productivité, par exemple. J'adore ce que Spotify a fait avec cette fonctionnalité dans son lecteur Web. Une fenêtre s'affiche avec l'illustration du titre en cours de lecture, les commandes de lecture et la possibilité d'ajouter facilement le titre à mes favoris.

Pour l'utiliser, demandez une nouvelle fenêtre de document en mode PIP. L'promise renvoyé est résolu avec un objet JavaScript de fenêtre Picture-in-Picture. Utilisez ensuite cette méthode 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 la Vue en mode Picture-in-Picture pour n'importe quel élément.

Déclarations imbriquées CSS

L'imbrication CSS permet d'obtenir des sélecteurs plus courts, une lecture plus facile et une modularité accrue en imbriquant des règles dans d'autres. L'imbrication CSS est une nouvelle fonctionnalité de référence disponible depuis près d'un an.

Certains 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 intercaliez des déclarations brutes avec des règles imbriquées, vous devez 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 très bien mis en forme 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 portée, 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 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 a bien d'autres choses.

• 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.
• La série Web reçoit un attribut connecté.

Documentation complémentaire

Il ne s'agit que de quelques points clés. Consultez les liens suivants pour en savoir plus sur les 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 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 alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage. Dès que Chrome 131 sera disponible, nous vous présenterons les nouveautés de Chrome.