Nouveautés de Chrome 104

Pete LePage

Voici les informations à retenir :

Je m'appelle Pete LePage. Voyons ce que Chrome 104 propose aux développeurs.

Spécifier une zone de recadrage avec la capture de région

getDisplayMedia() permet de créer un flux vidéo à partir de l'onglet actuel. Mais il peut arriver que vous ne souhaitiez pas 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 de la vidéo.

Avec la capture de région, une application Web peut 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 principale et un iFrame cross-origin.
La zone de contenu principale est en bleu et l'iFrame cross-origin est en rouge.

Pour l'utiliser, sélectionnez l'élément à partager, puis créez une CropTarget basée sur cet élément. Lancez ensuite le partage d'écran en appelant getDisplayMedia(). L'utilisateur est alors invité à autoriser le partage de son écran. Appelez ensuite track.cropTo() et transmettez la cropTarget créée 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 Mieux partager les onglets avec la capture de région.

Requêtes multimédias plus simples avec la syntaxe et l'évaluation de niveau 4

Les requêtes multimédias sont essentielles au responsive design, car elles vous permettent de définir des styles spécifiques pour différentes tailles de fenêtre d'affichage. Toutefois, sauf si vous les utilisez tous les jours, la syntaxe peut être un peu déroutante.

Chrome 104 est compatible avec les 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 d'utiliser 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. */
}

Il peut être écrit 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. */
}

Elle est déjà prise en charge dans Firefox, et un plug-in PostCSS réécrit la nouvelle syntaxe en ancienne, ce qui garantit la compatibilité avec les navigateurs.

Pour en savoir plus, consultez l'article de Rachel sur la nouvelle syntaxe des requêtes multimédias de plage dans Chrome 104.

Les transitions d'éléments partagés lancent une nouvelle phase d'évaluation de l'origine

Les applications spécifiques à une plate-forme offrent généralement des transitions fluides entre les différentes vues, sont magnifiques, permettent à l'utilisateur de rester dans leur contexte et offrent une expérience plus performante. Alors que sur le Web, une navigation complète peut être rude et implique parfois un écran vide momentané. Pour une application monopage, cela peut être mieux, mais les transitions sont toujours difficiles.

Les transitions d'éléments partagés, qui lancent une nouvelle phase d'évaluation de l'origine dans Chrome 104, vous permettent de fournir des transitions fluides, que les transitions soient inter-documents (par exemple, dans une application multipage) ou intra-documents (par exemple, dans une application monopage).

Voici un exemple approximatif du fonctionnement des transitions pour une application monopage. Dans la fonction de navigation, récupérez le contenu de la nouvelle page, puis vérifiez si les transitions sont prises en charge. Si ce n'est pas le cas, mettez à jour la page sans transition. Si c'est le cas, créez un transition() et appelez start() dessus, en informant l'API lorsque la modification du DOM est 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));
}

Sous le capot, 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 à tout autre effet de votre choix.

Je viens d'aborder le sujet. Regardez la vidéo de Jake Bringing Page Transitions to the Web ou lisez cette explication.

Et bien plus !

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

  • Lorsque les cookies sont définis avec un attribut Expires ou Max-Age explicite, la valeur est désormais limitée à 400 jours maximum.
  • L'API Multi-Screen Window Placement a été améliorée.
  • La propriété CSS overflow-clip-margin spécifie la distance à laquelle le contenu d'un élément est autorisé à peindre avant d'être rogné.

Documentation complémentaire

Cette présentation ne porte que sur certains points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications apportées à Chrome 104.

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. Dès que Chrome 105 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.