Nouveautés de Chrome 104

Pete LePage

Voici les informations à retenir :

Je m'appelle Pete LePage. Allons plus loin et découvrons les nouveautés pour les développeurs dans Chrome 104.

Spécifier une zone de recadrage avec capture de zone

getDisplayMedia() permet de créer un flux vidéo à partir de l'onglet actuel. Cependant, il peut arriver que vous ne souhaitiez pas afficher l'intégralité de l'onglet, mais seulement une petite partie. Jusqu'à présent, le seul moyen d'y parvenir était de recadrer manuellement chaque image vidéo.

La capture de région permet à une application Web de définir la zone spécifique de l'écran qu'elle souhaite partager. Par exemple, Google Slides peut vous permettre de rester dans la vue d'édition standard et de partager la diapositive actuelle.

Capture d'écran d'une fenêtre de navigateur avec une application Web mettant en évidence la zone de contenu principal et un iFrame multi-origine.
La zone de contenu principal est en bleu, et l'iFrame multi-origine en rouge.

Pour l'utiliser, sélectionnez l'élément à partager, puis créez une CropTarget basée sur cet élément. Appelez maintenant le getDisplayMedia() pour lancer le partage d'écran. Cela invite l'utilisateur à accorder l'autorisation de partager son écran. Appelez ensuite track.cropTo() et transmettez le cropTarget créé précédemment.

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

Pour en savoir plus, consultez Améliorer le partage d'onglets avec la capture de région.

Requêtes média simplifiées grâce à la syntaxe et l'évaluation de niveau 4

Les requêtes média sont essentielles au responsive design, ce qui vous permet de définir des styles spécifiques pour différentes tailles de fenêtre d'affichage. Mais, à moins que vous ne les utilisiez tous les jours, la syntaxe peut être un peu déroutante.

Chrome 104 est compatible avec Requêtes multimédias – Niveau 4 – Syntaxe et évaluation, ce qui vous permet d'écrire des requêtes multimédias à l'aide d'opérateurs de comparaison mathématiques ordinaires.

Au lieu de quelque chose comme ceci pour indiquer une fenêtre d'affichage comprise entre 400 et 600 pixels:

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

Elle peut être écrite comme suit:

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

En plus de rendre les requêtes média moins détaillées, la nouvelle syntaxe peut être plus précise. Les requêtes min- et max- sont inclusives. Par exemple : min-width: 400px teste une largeur de 400 px ou plus. La nouvelle syntaxe vous permet d'être plus explicite sur ce que vous voulez dire.

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Il est déjà compatible avec Firefox, et il existe un plug-in PostCSS qui réécrit la nouvelle syntaxe dans l'ancienne syntaxe, garantissant ainsi la compatibilité avec le navigateur.

Pour en savoir plus, consultez l'article de Rachel Nouvelle syntaxe pour les requêtes média par plage dans Chrome 104.

Lancement d'une nouvelle phase d'évaluation pour les transitions d'éléments partagés

Les applications spécifiques à une plate-forme offrent généralement des transitions fluides entre les différents affichages, sont belles, retiennent l'attention de l'utilisateur en contexte et rendent l'expérience plus performante. Alors que sur le Web, une navigation complète peut être difficile et implique parfois un écran vide momentané. Pour une application monopage, cela peut être mieux, mais les transitions sont encore difficiles.

Les transitions d'éléments partagés, qui démarrent une nouvelle phase d'évaluation dans Chrome 104, vous permettent d'assurer des transitions fluides, qu'elles soient inter-document (par exemple, dans une application multipage) ou intra-document (par exemple, dans une application à une seule page).

Voici un exemple approximatif du fonctionnement des transitions pour une application à page unique. Dans la fonction de navigation, récupérez le nouveau contenu de la page, puis vérifiez si les transitions sont compatibles. Si ce n'est pas le cas, mettez à jour la page sans transition. Si tel est le cas, créez un transition() et appelez start() dessus, pour indiquer à l'API une fois la modification du DOM terminée.

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

En arrière-plan, les transitions d'éléments partagés utilisent des animations CSS. Vous pouvez donc passer d'un effet de fondu à un effet de glissement, ou à ce que vous voulez.

Je n'ai fait que survoler le sujet. Regardez la vidéo de Jake Bringing Page Transitions to the Web ou consultez l'explication.

Et bien plus !

Bien sûr, ce n’est pas tout.

  • Lorsque les cookies sont définis avec un attribut Expires ou Max-Age explicite, la valeur est désormais limitée à 400 jours maximum.
  • Des améliorations ont été apportées à l'API de placement des fenêtres multi-écrans.
  • La propriété CSS overflow-clip-margin indique dans quelle mesure le contenu d'un élément est autorisé à peindre avant d'être rogné.

Complément d'informations

Nous n'aborderons ici que certains des points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 104.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Je m'appelle Pete LePage. Dès que Chrome 105 sera disponible, je serai là pour vous dire les nouveautés de Chrome !