Neu in Chrome 90

Pete LePage

Dazu sollten Sie Folgendes wissen:

• Für die CSS-Eigenschaft overflow wurde ein neuer Wert festgelegt.
• Die Feature Policy API wurde in Berechtigungsrichtlinie umbenannt.
• Außerdem gibt es eine neue Möglichkeit, Shadow DOM direkt in HTML zu implementieren und zu verwenden.
• In den 1990er-Jahren hatte ich mehrere Jacken, die fast genau so aussahen.
• Und es gibt noch viele weitere Funktionen.

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

Überlauf mit overflow: clip verhindern

CSS ist der Oberknaller! Aber ich denke, jeder Webentwickler hat schon mal etwas gesehen und erlebt, dass es manchmal peinlich ist. Auf CSS Tricks gibt es einen tollen Artikel über verschiedene Möglichkeiten, mit dem Überlauf umzugehen, z. B. mit overflow: hidden oder auto.

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

.overflow-clip {
  overflow: clip;
}

Mit overflow: clip können Sie jegliche Art von Scrollen für den Feld verhindern, einschließlich programmatischer Scrollen. Das Feld wird also nicht als Scrollcontainer betrachtet und es wird kein neuer Formatierungskontext gestartet. Bei Bedarf können Sie mit overflow-x und overflow-y eine Begrenzung auf eine einzelne Achse anwenden.

Übrigens: Mit overflow-clip-margin kannst du den Clip-Rahmen erweitern. Das ist nützlich, wenn Tintenüberlauf sichtbar sein soll.

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

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

Feature-Richtlinie ist jetzt Berechtigungsrichtlinie

In Chrome 74 haben wir die Feature Policy API eingeführt. Mit dieser API können Sie bestimmte APIs und Webfunktionen im Browser selektiv aktivieren, deaktivieren und das Verhalten ändern. 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 vorab ausgewählten Regeln verstößt, überschreibt der Browser das Verhalten mit einer besseren UX oder blockiert die API vollständig.

Ab Chrome 90 wird die Feature Policy API in Permissions Policy umbenannt. Der HTTP-Header wurde ebenfalls umbenannt. Gleichzeitig hat sich die Community auf eine neue Syntax geeinigt, die auf strukturierten Feldwerten für HTTP basiert.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

Weitere Informationen zur Verwendung dieser Funktion auf Ihrer Website finden Sie unter Einführung in die Richtlinie zu Funktionen.

Deklaratives Schatten-DOM

Shadow DOM ist Teil des Web Components-Standards und bietet die Möglichkeit, CSS-Stile auf einen bestimmten DOM-Unterbaum anzuwenden und diesen Unterbaum vom Rest des Dokuments zu isolieren. Bisher war die einzige Möglichkeit, Shadow DOM zu verwenden, die Erstellung einer Shadow-Root-Instanz 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 beim clientseitigen Rendering problemlos, beim serverseitigen Rendering jedoch nicht so gut, wenn es keine Möglichkeit gibt, Shadow Roots im servergenerierten HTML-Code auszudrücken. Ab Chrome 90 können Sie jedoch mit dem deklarativen Shadow DOM arbeiten. Sie können Shadow-Roots dann nur mit HTML erstellen.

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

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

Wenn das reine HTML-Markup geladen wird, ergibt sich dieser 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 Schatten-Stamms, ist kein JavaScript erforderlich.

Weitere Informationen finden Sie unter Deklaratives Schatten-DOM auf web.dev.

Und vieles mehr

Und natürlich gibt es noch viel mehr.

Um den Datenschutz und sogar die Ladegeschwindigkeit für Nutzer zu verbessern, die Websites besuchen, die HTTPS unterstützen, wird in der Adressleiste von Chrome standardmäßig https:// verwendet. Wenn Sie noch keine automatische Weiterleitung von HTTP zu HTTPS eingerichtet haben, ist jetzt der richtige Zeitpunkt dafür.

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

Weitere Informationen

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

• Das ist neu in den Chrome-Entwicklertools (90)
• Eingestellte und entfernte Funktionen in Chrome 90
• ChromeStatus.com-Updates für Chrome 90
• Neuerungen bei JavaScript in Chrome 90
• Liste der Änderungen am Chromium-Quellcode-Repository

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, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage, und sobald Chrome 91 veröffentlicht wird, erzähle ich Ihnen, was es Neues bei Chrome gibt.

Ein besonderer Gruß

Ich hatte viel Spaß beim Drehen dieser Folge von „Neu 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 den Zeitsprung ins Jahr 1990 ermöglicht haben.

Und natürlich Loren Borja, Lee Carruthers und Lukas Holcek, die an all meinen Videos zu den Neuigkeiten in Chrome arbeiten und mich viel besser aussehen lassen, als ich bin. Danke!