Neu in Chrome 90

Pete LePage

Dazu sollten Sie Folgendes wissen:

• Es gibt einen neuen Wert für die CSS-Property overflow.
• Die Feature Policy API wurde in Permissions Policy umbenannt.
• Außerdem gibt es eine neue Möglichkeit, Shadow DOM direkt in HTML zu implementieren und zu verwenden.
• Ich hatte in den 1990er-Jahren mehrere Jacken, die fast genau so aussahen.
• Und es gibt noch viel mehr.

Ich bin Pete LePage und habe die 411 für Entwickler in Chrome 90. Wir machen das im Stil der 1990er-Jahre!

Überlauf mit overflow: clip verhindern

CSS ist der Oberknaller! Aber ich denke, jeder Webentwickler hat schon einmal etwas gesehen und erlebt, das an einer Stelle ungeschickt überläuft. Auf CSS Tricks gibt es einen interessanten Beitrag zu verschiedenen Möglichkeiten, den Überlauf zu verarbeiten, z. B. mit overflow: hidden oder auto.

In der CSS Overflow Spec gibt es eine neue clip-Property, die ähnlich wie hidden funktioniert.

.overflow-clip {
  overflow: clip;
}

Mit overflow: clip können Sie jede Art von Scrollen für das Feld verhindern, einschließlich des programmatischen Scrollens. Das bedeutet, dass das Feld nicht als Scrollcontainer betrachtet wird und keinen neuen Formatierungskontext startet. Bei Bedarf können Sie das Clipping über overflow-x und overflow-y auf eine einzelne Achse anwenden.

Übrigens: Mit overflow-clip-margin können Sie den Clip-Rahmen erweitern. Das ist nützlich, wenn es einen Tintenüberlauf gibt, der sichtbar sein sollte.

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

overflow: clip in Aktion: https://petele-css-is-awesome.glitch.me/

„Feature Policy“ heißt jetzt „Permissions Policy“

In Chrome 74 haben wir die Feature Policy API eingeführt, mit der Sie das Verhalten bestimmter APIs und Webfunktionen im Browser selektiv aktivieren, deaktivieren und ändern können. Diese Richtlinien sind ein Vertrag zwischen Ihnen und dem Browser. Sie informieren den Browser über Ihre Absicht.

Wenn Ihr Code oder eine der von Ihnen verwendeten Drittanbieterbibliotheken gegen Ihre vorausgewählten Regeln verstößt, überschreibt der Browser das Verhalten mit einer besseren Nutzerfreundlichkeit oder blockiert die API einfach.

Ab Chrome 90 wird die Feature Policy API in Permissions Policy umbenannt. Der HTTP-Header wurde entsprechend umbenannt. Gleichzeitig hat sich die Community auf eine neue Syntax geeinigt, die auf Structured Field Values for HTTP basiert.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

Wenn Sie wissen möchten, wie Sie diese Funktion auf Ihrer Website verwenden können, lesen Sie die Einführung in Feature Policy.

Deklaratives Shadow-DOM

Shadow DOM ist Teil des Web Components-Standards und bietet eine Möglichkeit, CSS-Stile auf einen bestimmten DOM-Teilbaum zu beschränken und diesen Teilbaum vom Rest des Dokuments zu isolieren. Bisher war die einzige Möglichkeit, Shadow-DOM zu verwenden, die Konstruktion eines Shadow-Roots mit 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;

Das funktioniert gut für das clientseitige Rendern, aber nicht so gut für das serverseitige Rendern, da es keine integrierte Möglichkeit gibt, Shadow Roots im vom Server generierten HTML-Code auszudrücken. Ab Chrome 90 können Sie mit dem deklarativen Shadow DOM Shadow-Roots nur mit HTML erstellen.

Ein deklaratives Shadow-Root ist ein <template>-Element mit einem shadowroot-Attribut. Es wird vom HTML-Parser erkannt und sofort als Shadow Root des übergeordneten Elements angewendet.

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

Das Laden des reinen HTML-Markups führt zu diesem DOM-Baum:

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

So profitieren wir von der Kapselung und Slot-Projektion von Shadow DOM in statischem HTML. Für die Erstellung des gesamten Baums, einschließlich des Shadow Root, ist kein JavaScript erforderlich.

Weitere Informationen finden Sie unter Declarative Shadow DOM auf web.dev.

Und vieles mehr

Und natürlich gibt es noch viel mehr.

Um den Datenschutz und die Ladegeschwindigkeit für Nutzer, die Websites mit HTTPS-Unterstützung aufrufen, zu verbessern, wird in der Adressleiste von Chrome standardmäßig https:// verwendet. Wenn Sie noch keine automatische Weiterleitung von HTTP zu HTTPS eingerichtet haben, ist jetzt ein guter Zeitpunkt dafür.

Außerdem wird in der Desktopversion von Chrome ein AV1-Encoder ausgeliefert, der speziell für Videokonferenzen mit WebRTC-Integration optimiert ist.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 90.

• Neu in den Chrome-Entwicklertools (Version 90)
• Einstellung und Entfernung von Funktionen in Chrome 90
• ChromeStatus.com-Updates für Chrome 90
• Neues in JavaScript in Chrome 90
• Chromium-Quellcode-Repository – Änderungsliste

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 91 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.

Ein besonderer Shout-out

Ich hatte viel Spaß beim Drehen dieser Folge von „New in Chrome“ im Stil der 1990er-Jahre. Vielen Dank an Sean Meehan für die Idee und dafür, dass er die tollen Leute zusammengebracht hat, die uns in das Jahr 1990 zurückversetzt haben.

Und natürlich Loren Borja, Lee Carruthers und Lukas Holcek, die an allen meinen „Neu in Chrome“-Videos mitwirken und dafür sorgen, dass ich viel besser aussehe, als ich es eigentlich tue. DANKE!