Neu in Chrome 90

Pete LePage

Dazu sollten Sie Folgendes wissen:

• Für die CSS-Property overflow wurde ein neuer Wert festgelegt.
• Die Feature Policy API wurde in Berechtigungsrichtlinie umbenannt.
• Es gibt außerdem eine neue Möglichkeit, Shadow DOM direkt in HTML zu implementieren und zu verwenden.
• Ich besaß in den 1990er Jahren mehrere Jacken, bei denen das fast genauso war.
• Und es gibt noch vieles mehr.

Ich bin Pete LePage und habe hier den 411 für Entwickler in Chrome 90, ich mach es im Stil der 1990er!

Überlauf mit overflow: clip verhindern

CSS ist all das und eine Tüte Chips! Aber ich denke, jeder Webentwickler hat etwas gesehen und erlebt, das irgendwann mal peinlich überläuft. Es gibt einen tollen Beitrag zu CSS-Tricks zu verschiedenen Möglichkeiten zum Umgang mit dem Überlauf, zum Beispiel mit overflow: hidden oder auto.

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

.overflow-clip {
  overflow: clip;
}

Mit overflow: clip lässt sich jedes Scrollen für das Feld verhindern, einschließlich programmatischer Scrollvorgänge. Das bedeutet, dass das Feld nicht als Scroll-Container betrachtet wird. Es wird kein neuer Formatierungskontext gestartet. Bei Bedarf können Sie die Abschneidung mithilfe von overflow-x und overflow-y auf eine einzelne Achse anwenden.

Außerdem gibt es overflow-clip-margin, mit dem du den Clip-Rahmen vergrößern kannst. Dies ist nützlich, wenn ein Tintenüberlauf vorhanden sein sollte, der sichtbar sein sollte.

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

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

Funktionsrichtlinie ist jetzt Berechtigungsrichtlinie

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 verstoßen, überschreibt der Browser das Verhalten mit einer besseren Nutzererfahrung oder sagt einfach, „mit der Hand zu sprechen“, wodurch die API vollständig blockiert wird.

Ab Chrome 90 wird die Feature Policy API in Permissions Policy umbenannt und der HTTP-Header wurde entsprechend 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'

Wie Sie diese Funktion auf Ihrer Website nutzen können, erfahren Sie unter Einführung in die Funktionsrichtlinie.

Deklaratives Schatten-DOM

Shadow DOM, Teil des Webkomponentenstandards, bietet die Möglichkeit, CSS-Stile auf eine bestimmte DOM-Unterstruktur zu beschränken und diese Unterstruktur vom Rest des Dokuments zu isolieren. Bisher bestand die einzige Möglichkeit für Shadow DOM darin, mit JavaScript eine Shadow-Stamm zu konstruieren.

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

Dies funktioniert gut für clientseitiges Rendering, aber weniger gut beim serverseitigen Rendering, wenn keine integrierte Möglichkeit zum Ausdruck von Shadow Roots im servergenerierten HTML-Code vorhanden ist. Ab Chrome 90 und dem deklarativen Shadow-DOM sind Sie jedoch startklar. Sie können Schattenwurzeln nur mit HTML erstellen.

Eine deklarative Shadow-Stammversion 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 Sie das reine HTML-Markup laden, wird dies in dieser DOM-Baumstruktur angezeigt:

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

Dies bietet uns die Vorteile der Kapselung und Slotprojektion von Shadow DOM in statischem HTML. JavaScript ist nicht erforderlich, um den gesamten Baum einschließlich Shadow Root zu erstellen.

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

Und noch mehr

Und natürlich gibt es noch viel mehr.

Um den Datenschutz zu verbessern und sogar die Ladegeschwindigkeit für Nutzer zu erhöhen, die Websites besuchen, die HTTPS unterstützen, verwendet die Adressleiste von Chrome standardmäßig https://. Wenn ihr noch keine automatische Weiterleitung von HTTP zu HTTPS eingerichtet habt, ist jetzt ein guter Zeitpunkt dafür.

In der Chrome-Desktopversion wird außerdem ein AV1-Encoder veröffentlicht, der speziell für Videokonferenzen mit WebRTC-Integration optimiert wurde.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Weitere Änderungen in Chrome 90 finden Sie unter den folgenden Links.

• Neu in den Chrome-Entwicklertools (90)
• Einstellung und Entfernung von Chrome 90
• ChromeStatus.com-Updates für Chrome 90
• Neuerungen in JavaScript in Chrome 90
• Änderungsliste des Chromium-Quell-Repositorys

Abo

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, sobald ein neues Video veröffentlicht wird.

Ich bin Pete LePage. Sobald Chrome 91 veröffentlicht wird, melde ich Ihnen, was es bei Chrome Neues gibt.

Ein besonderes Dankeschön

Die Aufnahme dieser Folge von "Neu in Chrome" zu den 90er-Jahren hat mir sehr viel Spaß gemacht. Ein großes Dankeschön an Sean Meehan für die Idee und die großartigen Menschen, die die Zeitverzerrung bis ins Jahr 1990 eingeleitet haben.

Und natürlich Loren Borja, Lee Carruthers und Lukas Holcek, die an all meinen neuen Chrome-Videos arbeiten und mich viel besser aussehen lassen als ich. DANKE!