Neu in Chrome 69

Pete LePage

Die erste Version von Chrome wurde vor zehn Jahren veröffentlicht. Seitdem hat sich viel verändert, aber unser Ziel, eine solide Grundlage für moderne Webanwendungen zu schaffen, ist geblieben.

In Chrome 69 haben wir Unterstützung für Folgendes hinzugefügt:

• Mit CSS Scroll Snap können Sie reibungslose, elegante Bildläufe erstellen.
• Mit Display-Aussparungen können Sie den gesamten Bildschirmbereich nutzen, einschließlich des Bereichs hinter der Display-Aussparung, die manchmal auch als Notch bezeichnet wird.
• Mit der Web Locks API können Sie asynchron eine Sperre abrufen, sie während der Ausführung von Aufgaben beibehalten und dann freigeben.

Und es gibt noch viel mehr!

Ich bin Pete LePage. Sehen wir uns an, was es Neues für Entwickler in Chrome 69 gibt.

Möchten Sie die vollständige Liste der Änderungen sehen? Liste der Änderungen im Chromium-Quell-Repository

CSS Scroll Snap

Mit CSS Scroll Snap können Sie flüssige, elegante Scroll-Effekte erstellen, indem Sie Scroll-Snap-Positionen deklarieren, die dem Browser mitteilen, wo er nach jedem Scrollvorgang anhalten soll. Das ist sehr hilfreich für Bilderkarussells oder paginierte Abschnitte, in denen der Nutzer zu einem bestimmten Punkt scrollen soll.

Für ein Bilderkarussell würde ich dem Scroll-Container scroll-snap-type: x mandatory; und jedem Bild scroll-snap-align: center; hinzufügen. Wenn der Nutzer dann durch das Karussell scrollt, wird jedes Bild sanft in die perfekte Position gescrollt.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

CSS-Scroll-Snapping funktioniert gut, auch wenn die Snap-Ziele unterschiedliche Größen haben oder größer als der Scroller sind. Weitere Informationen und Beispiele finden Sie im Beitrag Well-Controlled Scrolling with CSS Scroll Snap.

Display-Aussparungen (auch als Notch bezeichnet)

Es gibt eine zunehmende Anzahl von Mobilgeräten, die mit einem Displayausschnitt (manchmal auch Notch genannt) auf den Markt kommen. Um das zu verhindern, fügen Browser Ihrer Seite einen kleinen zusätzlichen Rand hinzu, damit die Inhalte nicht durch die Notch verdeckt werden.

Was aber, wenn Sie diesen Platz nutzen möchten?

Mit CSS-Umgebungsvariablen und dem Meta-Tag viewport-fit ist das jetzt möglich. Wenn Sie beispielsweise den Browser anweisen möchten, den Bereich des Displayausschnitts zu nutzen, legen Sie das Attribut viewport-fit im Meta-Tag viewport auf cover fest.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Anschließend können Sie die safe-area-inset-* CSS-Umgebungsvariablen verwenden, um Ihre Inhalte zu gestalten.

.content {
  padding: 16px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

Im WebKit-Blog gibt es einen tollen Beitrag zum Thema Websites für das iPhone X entwerfen. Weitere Informationen finden Sie auch in der Erklärung.

Web Locks API

Mit der Web Locks API können Sie asynchron eine Sperre abrufen, sie während der Ausführung von Aufgaben beibehalten und dann freigeben. Solange die Sperre aktiv ist, kann kein anderes Skript im Ursprung dieselbe Sperre erhalten. So lässt sich die Nutzung freigegebener Ressourcen koordinieren.

Wenn beispielsweise eine Web-App, die in mehreren Tabs ausgeführt wird, dafür sorgen möchte, dass nur ein Tab mit dem Netzwerk synchronisiert wird, würde der Synchronisierungscode versuchen, eine Sperre mit dem Namen network_sync_lock zu erhalten.

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});

Auf dem ersten Tab, der die Sperre erhält, werden die Daten mit dem Netzwerk synchronisiert. Wenn ein anderer Tab versucht, dieselbe Sperre abzurufen, wird er in die Warteschlange eingereiht. Sobald die Sperre aufgehoben wurde, wird die nächste Anfrage in der Warteschlange ausgeführt.

MDN bietet eine gute Einführung in Web Locks mit einer ausführlicheren Erklärung und vielen Beispielen. Oder sehen Sie sich die Spezifikation an.

…und vieles mehr

Das sind natürlich nur einige der Änderungen in Chrome 69 für Entwickler.

• Gemäß der CSS4-Spezifikation können Sie jetzt mit kegelförmigen Verläufen Farbübergänge um den Umfang eines Kreises erstellen. Lea Verou hat ein CSS conic-gradient()-Polyfill, das Sie verwenden können. Die Seite enthält eine Reihe wirklich cooler Beispiele, die von der Community eingereicht wurden.
• Es gibt eine neue toggleAttribute()-Methode für Elemente, mit der das Vorhandensein eines Attributs umgeschaltet wird, ähnlich wie bei classList.toggle().
• JavaScript-Arrays erhalten zwei neue Methoden: flat() und flatMap(). Sie geben ein neues Array zurück, in dem alle Unterarray-Elemente zusammengefasst sind.
• Mit OffscreenCanvas werden Aufgaben aus dem Haupt-Thread in einen Worker verschoben, um Leistungsengpässe zu vermeiden.

Easter Eggs

Hast du alle Easter Eggs im Video gefunden?

• Das Chrome-Comic
• Chromercise-Bänder
• Kartoffelkanone
• Pete Monster
• Hölzerner Dino aus dem CDS 2017

Ein besonderer Dank gilt allen, die dazu beigetragen haben, dass die 28 Folgen von „Neu in Chrome“ möglich waren. Jeder einzelne dieser Menschen ist großartig!

Heather Duthie<br>
Tim Malieckal<br>
Rick Murphy<br>
Derek Bass<br>
Kiran Puri<br>
Nilesh Bell-Gorsia<br>
Lee Carruthers

Philip Maniaci<br>
Chris Turiello<br>
Andrew Barker<br>
Alex Crowe<br>
Izzy Cosentino<br>
Norm Magnuson<br>
Loren Borja

Michelle Ortega<br>
Varun Bajaj<br>
Ted Maroney<br>
Andrew Bender<br>
Andrew Naugle<br>
Michelle Michelson<br>
Todd Rawiszer

Anthony Mcgowen<br>
Victoria Canty<br>
Alexander Koht<br>
Jarrod Kloiber<br>
Andre Szyszkowski<br>
Kelsey Allen<br>
Liam Spradlin

Möchten Sie sehen, wie sich „Neu in Chrome“ seit der ersten Folge entwickelt hat? In diesem kurzen Video siehst du, wie sich unser Kanal seit unserem ersten Video entwickelt hat.

Und natürlich euch vielen Dank fürs Zusehen und für eure Kommentare und euer Feedback! Ich lese alle Kommentare und nehme eure Vorschläge ernst. Diese Videos sind dank euch besser geworden.

Danke fürs Zusehen!

Neu in Chrome – Bloopers

Wir haben ein paar lustige Outtakes für euch zusammengestellt. Nachdem ich es mir angesehen habe, habe ich ein paar Dinge gelernt:

• Wenn ich mich verhasple, mache ich seltsame Geräusche.
• Ich schneide Grimassen und strecke die Zunge raus.
• Ich wackle viel.

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 70 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.