Nouveautés de Chrome 90

Pete LePage

Voici les informations à retenir :

• Une nouvelle valeur a été ajoutée à la propriété CSS overflow.
• L'API Feature Policy a été renommée Permissions Policy.
• Il existe également une nouvelle façon d'implémenter et d'utiliser Shadow DOM directement en HTML.
• Je possédais plusieurs vestes presque exactement comme celle-ci dans les années 90.
• Et ce n'est pas tout : beaucoup plus.

Je m'appelle Pete LePage et j'ai le 411 pour les développeurs dans Chrome 90, dans le style des années 1990 !

Éviter le dépassement avec overflow: clip

Le CSS est là pour vous et des chips ! Mais, je pense que tous les développeurs Web ont vu et vécu quelque chose qui déborde de manière gênante à un moment donné. Il existe un article intéressant sur les astuces CSS sur les différentes façons de gérer le dépassement, par exemple, à l'aide de overflow: hidden ou de auto.

Dans la spécification de dépassement CSS, il existe une nouvelle propriété clip qui fonctionne de la même manière que hidden.

.overflow-clip {
  overflow: clip;
}

L'utilisation de overflow: clip vous permet d'empêcher tout type de défilement pour la zone, y compris le défilement programmatique. Cela signifie que la zone n'est pas considérée comme un conteneur de défilement. Elle ne démarre pas de nouveau contexte de mise en forme. Si nécessaire, vous pouvez appliquer le rognage à un seul axe via overflow-x et overflow-y.

Pour info, overflow-clip-margin vous permet d'agrandir la bordure de l'extrait. Cela est utile dans les cas où un débordement d'encre doit être visible.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

Découvrez overflow: clip en action sur https://petele-css-is-awesome.glitch.me/

La règle de fonctionnalité devient une règle d'autorisation

Dans Chrome 74, nous avons lancé l'API Feature Policy, qui vous permet d'activer, de désactiver et de modifier de manière sélective le comportement de certaines API et fonctionnalités Web dans le navigateur. Ces règles sont un contrat entre vous et le navigateur. Elles informent le navigateur de votre intention.

Si votre code ou l'une des bibliothèques tierces que vous utilisez enfreignent les règles présélectionnées, le navigateur remplace le comportement par une meilleure expérience utilisateur ou dit simplement "parler à la main", bloquant ainsi l'API.

À partir de Chrome 90, l'API Feature Policy sera renommée Permissions Policy, et l'en-tête HTTP a été renommé en même temps. Parallèlement, la communauté a décidé d'adopter une nouvelle syntaxe, basée sur les valeurs de champ structuré pour HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

Pour savoir comment l'utiliser sur votre site, consultez la page Présentation des règles relatives aux fonctionnalités.

Shadow DOM déclarative

Shadow DOM, qui fait partie de la norme Web Components, permet de limiter les styles CSS à une sous-arborescence DOM spécifique et d'isoler cette sous-arborescence du reste du document. Jusqu'à présent, le seul moyen d'utiliser Shadow DOM consistait à construire une racine fantôme à l'aide de JavaScript.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

Cela fonctionne bien pour le rendu côté client, mais moins bien pour le rendu côté serveur, où il n'existe aucun moyen intégré d'exprimer les racines fantômes dans le code HTML généré par le serveur. Mais à partir de Chrome 90, avec le Shadow DOM déclaratif, vous êtes prêt. Vous pouvez créer des racines fantômes en utilisant uniquement du code HTML.

Une racine fantôme déclarative est un élément <template> doté d'un attribut shadowroot. Elle est détectée par l'analyseur HTML et appliquée immédiatement en tant que racine fantôme de son élément parent.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Le chargement du balisage HTML pur donne les résultats dans cette arborescence DOM:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

Cela nous donne les avantages de l'encapsulation et de la projection d'emplacements de Shadow DOM en HTML statique. Aucun code JavaScript n'est nécessaire pour produire l'arborescence entière, y compris la racine fantôme.

Pour en savoir plus, consultez la page Declarative Shadow DOM sur web.dev.

Et plus encore

Et bien d'autres choses encore.

Pour améliorer la confidentialité et même la vitesse de chargement des utilisateurs qui consultent des sites compatibles HTTPS, la barre d'adresse de Chrome utilise https:// par défaut. Si vous n'avez pas configuré de redirection automatique de HTTP vers HTTPS, c'est le moment idéal.

En outre, un encodeur AV1 est disponible dans Chrome pour ordinateur. Il est spécialement optimisé pour la visioconférence grâce à l'intégration WebRTC.

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 90.

• Nouveautés des outils pour les développeurs Chrome (90)
• Abandons et suppressions de Chrome 90
• Mises à jour du site ChromeStatus.com pour Chrome 90
• Nouveautés de JavaScript dans Chrome 90
• Liste des modifications du dépôt source Chromium

S'abonner

Pour ne pas manquer nos vidéos, abonnez-vous à notre chaîne YouTube pour les 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 91 sera disponible, je serai là pour vous dire quelles sont les nouveautés de Chrome !

Une dédicace spéciale

J'ai pris beaucoup de plaisir à tourner cet épisode de "New in Chrome" sur le thème des années 1990. Un grand merci à Sean Meehan pour cette idée et pour avoir réuni ces personnes incroyables qui ont contribué à faire remonter le temps vers 1990.

Et bien sûr, Loren Borja, Lee Carruthers et Lukas Holcek, qui travaillent sur toutes mes vidéos "New in Chrome" et me rendent plus belle que moi. MERCI !