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 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 viel mehr.

Ich bin Pete LePage und habe die heißen Infos für Entwickler in Chrome 90. Wir machen's im 90er-Jahre-Style!

Überlauf mit overflow: clip verhindern

CSS IST TOLL

CSS ist der Oberknaller! Aber ich denke, jeder Webentwickler hat schon einmal erlebt, dass etwas an einer Stelle ungünstig überläuft. 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;
}
Quadratisches Feld mit Text-CSS ist fantastisch, da es standardmäßig tolle Überläufe gibt

Mit overflow: clip können Sie jegliches Scrollen für das Feld verhindern, einschließlich programmatischen Scrollens. 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 Clipbereich vergrößern. Das ist nützlich, wenn Tinte übergelaufen ist und sichtbar sein soll.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
Quadratisches Feld mit Text-CSS ist fantastisch, da es standardmäßig tolle Überläufe gibt

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

Die Richtlinie für Funktionen heißt jetzt Richtlinie für Berechtigungen

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.

Chrome 90 und höher

Permissions-Policy: geolocation=()

Chrome 89 und niedriger

Feature-Policy: geolocation 'none'

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

Deklaratives Shadow-DOM

Shadow DOM, Teil des Web Components-Standards, bietet eine 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 gut für das clientseitige Rendering, aber nicht so gut für das serverseitige Rendering, da es keine integrierte Möglichkeit gibt, Schattenwurzeln im servergenerierten HTML 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. Es wird vom HTML-Parser erkannt und sofort als Schatten-Stamm 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 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 zu verbessern, die Websites mit HTTPS-Unterstützung aufrufen, 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 ist in der Desktopversion von Chrome ein AV1-Encoder enthalten, 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.

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. Sobald Chrome 91 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in 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 ins Jahr 1990 zurückversetzt haben.

GDS Design

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

Sounddesign und zusätzliche Musik

  • Bryan Gordon

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!