Neu in Chrome 69

Die Erstveröffentlichung von Chrome ist zehn Jahre her. Seitdem hat sich viel verändert, aber unser Ziel, eine solide Grundlage für moderne Webanwendungen zu schaffen, hat sich nicht geändert.

Chrome 69 bietet Unterstützung für:

  • CSS Scroll Snap ermöglicht Ihnen ein reibungsloses Scrollen.
  • Mit Display-Aussparungen können Sie den gesamten Bereich des Bildschirms nutzen, einschließlich des Raums hinter der Display-Aussparung, der auch als „Notch“ bezeichnet wird.
  • Mit der Web Locks API können Sie eine Sperre asynchron abrufen, sie während der Ausführung gedrückt halten und dann wieder freigeben.

Das sind noch reichlich mehr!

Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es für Entwickler Neues bei Chrome 69 gibt.

Möchten Sie die vollständige Liste der Änderungen sehen? Weitere Informationen finden Sie in der Änderungsliste des Chromium-Quell-Repositorys.

CSS-Scroll-Snap

Demo ansehen | Quelle

Mit CSS Scroll Snap lässt sich ein reibungsloses Scrollen ermöglichen. Dazu werden Scroll-Snap-Positionen festgelegt, die dem Browser mitteilen, wo er nach jedem Scrollvorgang enden soll. Dies ist besonders hilfreich für Bilderkarussells oder paginierte Abschnitte, in denen der Nutzer zu einem bestimmten Punkt scrollen soll.

Bei einem Bilderkarussell füge ich scroll-snap-type: x mandatory; in den Scroll-Container und scroll-snap-align: center; zu jedem Bild hinzu. Wenn der Nutzer dann durch das Karussell scrollt, wird jedes Bild gleichmäßig an die perfekte Position gescrollt.


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

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

CSS-Scroll-Andocken funktioniert gut, selbst wenn die Snap-Ziele unterschiedliche Größen haben oder größer als der Scroller sind. Weitere Details und Beispiele findest du im Beitrag Well-Controlled Scrolling with CSS Scroll Snap.

Display-Aussparungen (auch Einkerbungen genannt)

Smartphone mit Display-Aussparung
Browser fügen auf Mobilgeräten mit Display-Aussparung eine zusätzliche Marge hinzu, um zu verhindern, dass Inhalte vom Ausschnitt verdeckt werden.

Immer mehr Mobilgeräte werden mit einer Display-Aussparung, manchmal auch Notch genannt, auf den Markt gebracht. Um dies zu vermeiden, fügen Browser Ihrer Seite etwas zusätzlichen Rand hinzu, damit der Inhalt nicht durch die Kerbe verdeckt wird.

Aber was ist, wenn Sie diesen Platz nutzen möchten?

Mit CSS-Umgebungsvariablen und dem Meta-Tag viewport-fit ist das jetzt möglich. Wenn Sie den Browser beispielsweise anweisen möchten, in den Display-Aussparungsbereich zu expandieren, setzen Sie im Meta-Tag viewport die Eigenschaft viewport-fit auf cover.

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

Sie können dann die CSS-Umgebungsvariablen safe-area-inset-* verwenden, um das Layout Ihrer Inhalte zu erstellen.

.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 in der Erklärung.

Web Locks API

Mit der Web Locks API können Sie eine Sperre asynchron abrufen, sie während der Ausführung gedrückt halten und dann freigeben. Während die Sperre beibehalten wird, kann kein anderes Skript im Ursprung dieselbe Sperre erhalten, wodurch die Nutzung gemeinsam genutzter Ressourcen koordiniert werden kann.

Wenn beispielsweise eine auf mehreren Tabs ausgeführte Web-App sicherstellen möchte, dass nur ein Tab mit dem Netzwerk synchronisiert wird, versucht der Synchronisierungscode, eine Sperre mit dem Namen network_sync_lock abzurufen.

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, über den die Sperre abgerufen wird, werden die Daten mit dem Netzwerk synchronisiert. Wenn ein anderer Tab versucht, dieselbe Sperre abzurufen, wird er in die Warteschlange gestellt. Sobald die Sperre aufgehoben wurde, wird die nächste Anfrage in der Warteschlange gewährt und ausgeführt.

MDN bietet eine gute Web Locks-Primer mit einer ausführlichen Erklärung und vielen Beispielen. Sie können sich auch die spec genauer ansehen.

…und vieles mehr

Dies sind nur ein paar der Änderungen in Chrome 69 für Entwickler. Und natürlich gibt es noch viel mehr.

konischer Farbverlauf

  • In der CSS4-Spezifikation können Sie jetzt mithilfe von konischen Farbverläufen Farbübergänge um den Umfang eines Kreises erstellen. Lea Verou hat einen CSS-conic-gradient()-Polyfill, den du verwenden kannst, und auf der Seite findest du eine ganze Reihe von coolen Beispielen aus der Community.
  • Für Elemente gibt es eine neue Methode toggleAttribute(), mit der das Vorhandensein eines Attributs ein- und ausgeschaltet werden kann, ähnlich wie bei classList.toggle().
  • JavaScript-Arrays erhalten zwei neue Methoden: flat() und flatMap(). Sie geben ein neues Array zurück, in das alle Subarray-Elemente eingeschoben sind.
  • OffscreenCanvas verschiebt die Arbeit aus dem Hauptthread in einen Worker, wodurch Leistungsengpässe vermieden werden.

Easter Eggs

Hast du alle Easter Eggs im Video gefunden?

Wir möchten uns ganz herzlich bei allen bedanken, die uns bei der Entwicklung von 28 Folgen von „Neu in Chrome“ geholfen haben. Jeder einzelne dieser Leute 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öchtest du sehen, was es Neues in Chrome seit unserer ersten Folge gab? In diesem unterhaltsamen Video mit 30 Sekunden Länge kannst du die Geschichte vom ersten Video bis heute erzählen.

Vielen Dank fürs Zusehen, Kommentare und Feedback! Vielen Dank! Ich habe sie alle gelesen und nehme mir deine Vorschläge zu Herzen. Diese Videos sind dank dir noch besser geworden!

Vielen Dank fürs Zusehen.

Neu bei Chrome Bloopers

Wir haben für dich eine kleine, lustige Filmcollage zusammengestellt. Danach habe ich Folgendes gelernt:

  • Wenn ich über meine Worte stolpere, mache ich komische Geräusche.
  • Ich schneide die Grimasse und streiche meine Zunge heraus.
  • Ich zittere ganz schön herum.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie werden per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 70 veröffentlicht wird, melde ich mich, um Sie über die Neuheiten in Chrome zu informieren.