Neu in Chrome 69

Pete LePage

Vor zehn Jahren wurde Chrome 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, sie während der Ausführung der Arbeit halten und dann wieder 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.

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 Bildkarussells oder paginated sections, bei denen Nutzer zu einem bestimmten Punkt scrollen sollen.

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 gut, auch 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.

Displayaussparungen (Notches)

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 safe-area-inset-* CSS-Umgebungsvariablen verwenden, um den Inhalt zu layouten.

.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 Entwerfen von Websites für das iPhone X. Weitere Informationen finden Sie im Erläuterungsvideo.

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

Auf dem ersten Tab, der die Sperre erhält, 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

  • Mit der CSS4-Spezifikation können Sie jetzt mithilfe von konischen Verläufen Farbübergänge um den Umfang eines Kreises erstellen. Lea Verou hat eine CSS-conic-gradient()-Polyfill, die Sie verwenden können. Die Seite enthält auch eine ganze Reihe wirklich cooler von der Community eingereichter Beispiele.
  • Es gibt eine neue Methode toggleAttribute() für Elemente, mit der das Vorhandensein eines Attributs aktiviert oder deaktiviert 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.
  • OffscreenCanvas verlagert die Arbeit aus dem Haupt-Thread in einen Worker, 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. Jede einzelne dieser Personen 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 30-sekündigen Video siehst du, wie wir uns seit unserem ersten Video entwickelt haben.

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. Diese Videos sind dank dir noch besser geworden.

Danke fürs Zusehen!

Bloopers zu Neuigkeiten in Chrome

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

  • Wenn ich mich verhasple, mache ich komische Geräusche.
  • Ich mache Grimassen und strecke meine Zunge heraus.
  • Ich bewege mich 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 gern, was es Neues in Chrome gibt.