Neu in Chrome 69

Pete LePage

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 unverändert.

In Chrome 69 wurde Folgendes hinzugefügt:

  • Mit CSS Scroll Snap können Sie ein flüssiges und reibungsloses Scrollen ermöglichen.
  • Mit Displayaussparungen können Sie den gesamten Bildschirmbereich nutzen, einschließlich des Bereichs hinter der Displayaussparung, die auch als Notch bezeichnet wird.
  • Mit der Web Locks API können Sie eine Sperre asynchron erwerben, während der Ausführung der Arbeit halten und dann wieder freigeben.

Und viele weitere Funktionen!

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

Vollständige Liste der Änderungen ansehen Liste der Änderungen am Chromium-Quell-Repository

CSS-Scroll-Snap

Demo ansehen | Quellcode

Mit CSS Scroll Snap können Sie ein flüssiges und reibungsloses Scrollen ermöglichen, indem Sie Scroll-Snap-Positionen angeben, die dem Browser mitteilen, wo er nach jedem Scrollvorgang anhalten soll. Das ist besonders hilfreich für Bilderkarussells oder Bereiche mit Seitenumbrüchen, in denen der Nutzer zu einem bestimmten Punkt scrollen soll.

Für ein Bilderkarussell würde ich dem Scrollcontainer 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 reibungslos in die perfekte Position gescrollt.


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

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

Das Scroll-Snapping von CSS funktioniert auch dann gut, wenn die Snap-Ziele unterschiedliche Größen haben oder größer als der Scroller sind. Weitere Informationen und Beispiele finden Sie im Artikel Gut kontrolliertes Scrollen mit CSS Scroll Snap.

Display-Aussparungen (auch Aussparungen genannt)

Smartphone mit Displayaussparung
Bei einem Mobilgerät mit Displayausschnitt fügen Browser einen zusätzlichen Rand hinzu, damit Inhalte nicht vom Ausschnitt verdeckt werden.

Es gibt immer mehr Mobilgeräte mit einem Displayausschnitt, der auch als Notch bezeichnet wird. Um dies zu vermeiden, fügen Browser Ihrer Seite einen kleinen zusätzlichen Rand hinzu, damit die Inhalte nicht von der Kerbe verdeckt werden.

Was ist aber, wenn Sie diesen Bereich nutzen möchten?

Mit CSS-Umgebungsvariablen und dem Meta-Tag viewport-fit ist das jetzt möglich. Wenn Sie beispielsweise dem Browser mitteilen möchten, dass er sich in den Bereich des Displayausschnitts ausdehnen soll, legen Sie die viewport-fit-Eigenschaft im viewport-Meta-Tag auf cover fest.

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

Anschließend können Sie die CSS-Umgebungsvariablen safe-area-inset-* verwenden, um das Layout der Inhalte zu erstellen.

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

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

Web Locks API

Mit der Web Locks API können Sie eine Sperre asynchron erwerben, während der Ausführung der Arbeit halten und dann wieder freigeben. Solange die Sperre aktiv ist, kann kein anderes Script im Ursprung dieselbe Sperre erwerben. So wird die Nutzung freigegebener Ressourcen koordiniert.

Wenn beispielsweise eine Webanwendung, die in mehreren Tabs ausgeführt wird, dafür sorgen möchte, dass nur ein Tab mit dem Netzwerk synchronisiert wird, versucht der Synchronisierungscode, eine Sperre mit dem Namen network_sync_lock zu erwerben.

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.
});

Über den ersten Tab, auf dem die Sperre eingerichtet werden kann, werden die Daten mit dem Netzwerk synchronisiert. Wenn ein anderer Tab versucht, dieselbe Sperre zu erwerben, wird er in die Warteschlange gestellt. Sobald die Sperre aufgehoben wurde, wird die Sperre für die nächste Anfrage in der Warteschlange gewährt und die Anfrage ausgeführt.

MDN bietet eine hervorragende Einführung in Websperren mit einer ausführlicheren Erklärung und vielen Beispielen. Oder lesen Sie die Spezifikation.

…und vieles mehr

Das sind nur einige der Änderungen in Chrome 69 für Entwickler. Es gibt natürlich noch viele weitere.

konischer Farbverlauf

  • In der CSS4-Spezifikation können Sie jetzt mit konischen Farbverläufen Farbübergänge um den Umfang eines Kreises erstellen. Für Lea Verou gibt es einen CSS-conic-gradient()-Polyfill, den du verwenden kannst. Außerdem findest du hier eine Menge cooler Beispiele, die von der Community eingereicht wurden.
  • Es gibt eine neue toggleAttribute()-Methode für Elemente, mit der die Existenz eines Attributs umgeschaltet werden kann, ähnlich wie bei classList.toggle().
  • JavaScript-Arrays erhalten zwei neue Methoden: flat() und flatMap(). Sie geben ein neues Array mit allen Elementen des Unterarrays zurück.
  • Mit OffscreenCanvas werden Aufgaben aus dem Haupt-Thread in einen Worker verschoben, um Leistungsengpässe zu vermeiden.

Easter Eggs

Habt ihr alle Easter Eggs im Video gefunden?

Ein besonderer Dank geht an alle, die an den 28 Folgen von „Neu in Chrome“ mitgewirkt haben. Jeder 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 wissen, wie sich „Neu in Chrome“ seit der ersten Folge entwickelt hat? In diesem lustigen 30-Sekunden-Video wird der Verlauf vom ersten Video bis heute veranschaulicht.

Und natürlich danke ich euch fürs Zuschauen und für eure Kommentare und Feedback. Ich habe sie alle gelesen und werde Ihre Vorschläge berücksichtigen. Deine Videos sind jetzt besser geworden!

Danke fürs Zusehen!

Neu bei Chrome Bloopers

Wir haben ein paar lustige Pannen zusammengetragen, die ihr euch hier ansehen könnt. Ich habe ein paar Dinge gelernt:

  • Wenn ich mich verhasple, mache ich komische Geräusche.
  • Ich mache Grimassen und strecke meine Zunge heraus.
  • Ich wackele, 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, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 70 veröffentlicht wird, erzähle ich Ihnen gleich, was es Neues bei Chrome gibt!