Nouveautés de Chrome 90

Pete LePage

Voici les informations à retenir :

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

Éviter le débordement avec overflow: clip

CSS IS AWESOME

Le CSS est tout ça et un petit quelque chose en plus. Mais je pense que tous les développeurs Web ont vu et vécu quelque chose qui déborde maladroitement à un moment donné. CSS Tricks propose un excellent article sur les différentes manières de gérer le débordement, par exemple à l'aide de overflow: hidden ou auto.

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

.overflow-clip {
  overflow: clip;
}
La zone carrée avec du texte CSS est géniale

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 et qu'elle ne démarre pas de nouveau contexte de mise en forme. Si nécessaire, vous pouvez appliquer le recadrage à une seule axe via overflow-x et overflow-y.

Pour information, il existe également overflow-clip-margin, qui vous permet d'étendre la bordure du clip. Cette option est utile lorsque l'encre déborde et doit être visible.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
La boîte carrée avec le CSS de texte est géniale, où le génial déborde de la boîte

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

La règle de fonctionnalité a été remplacée par une règle relative aux autorisations

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 constituent 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 ne respectent pas les règles présélectionnées, le navigateur remplace le comportement par une meilleure expérience utilisateur ou dit simplement "parle à la main" en bloquant complètement 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 conséquence. Dans le même temps, la communauté s'est arrêtée sur une nouvelle syntaxe, basée sur les valeurs de champ structurées pour HTTP.

Chrome 90 et versions ultérieures

Permissions-Policy: geolocation=()

Chrome 89 et versions antérieures

Feature-Policy: geolocation 'none'

Si vous souhaitez savoir comment utiliser cette fonctionnalité sur votre site, consultez la page Présentation des règles relatives aux fonctionnalités.

Shadow DOM déclaratif

Le Shadow DOM, qui fait partie de la norme Web Components, permet de définir le champ d'application des styles CSS sur un sous-arbre DOM spécifique et d'isoler ce sous-arbre du reste du document. Jusqu'à présent, la seule façon d'utiliser le Shadow DOM était de 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 l'affichage côté client, mais pas aussi bien pour l'affichage côté serveur, où il n'existe aucun moyen intégré d'exprimer les racines d'ombre dans le code HTML généré par le serveur. Mais à partir de Chrome 90, avec le Shadow DOM déclaratif, vous n'avez plus qu'à créer des Shadow DOM en HTML.

Une racine fantôme déclarative est un élément <template> avec un attribut shadowroot. Il est détecté par l'analyseur HTML et appliqué immédiatement en tant que racine d'ombre 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 génère les résultats suivants dans cet arbre DOM:

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

Nous bénéficions ainsi des avantages de l'encapsulation et de la projection de slots de Shadow DOM en HTML statique. Aucun code JavaScript n'est nécessaire pour générer l'ensemble de l'arborescence, y compris la racine d'ombre.

Pour en savoir plus, consultez Shadow DOM déclaratif sur web.dev.

Et bien plus encore

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

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

Un encodeur AV1 est disponible dans Chrome pour ordinateur de bureau, spécialement optimisé pour la visioconférence avec intégration WebRTC.

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points clés. Consultez les liens ci-dessous pour découvrir d'autres modifications apportées à Chrome 90.

S'abonner

Si vous souhaitez rester informé de nos vidéos, abonnez-vous à notre chaîne YouTube pour les 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 91 sera disponible, je serai là pour vous présenter les nouveautés de Chrome.

Un hommage spécial

J'ai beaucoup apprécié de tourner cet épisode sur les nouveautés de Chrome sur le thème des années 1990. Un grand merci à Sean Meehan pour l'idée et pour avoir réuni les personnes incroyables qui nous ont aidés à remonter le temps jusqu'en 1990.

Conception GDS

  • Fola Akinola
  • Derek Bass
  • Christopher Bodel
  • Nick Krusick
  • Chris Walker

Conception sonore et musique supplémentaire

  • Bryan Gordon

Et bien sûr, Loren Borja, Lee Carruthers et Lukas Holcek, qui travaillent sur toutes mes vidéos sur les nouveautés de Chrome et me font paraître bien mieux que je ne suis en réalité. MERCI !