Nieuw in Chroom 69

Pete LePage

Het is tien jaar geleden dat Chrome voor het eerst werd uitgebracht. Er is sindsdien veel veranderd, maar ons doel om een solide basis te bouwen voor moderne webapplicaties is hetzelfde gebleven!

In Chrome 69 hebben we ondersteuning toegevoegd voor:

  • Met CSS Scroll Snap kunt u vloeiende, gelikte scroll-ervaringen creëren.
  • Met schermuitsparingen kunt u het volledige schermoppervlak gebruiken, inclusief de ruimte achter de schermuitsparing, die soms ook wel een inkeping wordt genoemd.
  • Met de Web Locks API kunt u asynchroon een vergrendeling verkrijgen, deze vasthouden terwijl er werkzaamheden worden uitgevoerd en deze vervolgens weer vrijgeven.

En er is nog veel meer !

Ik ben Pete LePage . Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 69!

Wilt u de volledige lijst met wijzigingen bekijken? Bekijk de wijzigingenlijst in de Chromium-bronrepository .

CSS Scroll Snap

Met CSS Scroll Snap kun je vloeiende, gelikte scrollervaringen creëren door scroll snap-posities te declareren die de browser vertellen waar te stoppen na elke scrollbewerking. Dit is superhandig voor afbeeldingscarrousels of pagina's waar je de gebruiker naar een specifiek punt wilt laten scrollen.

Voor een afbeeldingencarrousel zou ik scroll-snap-type: x mandatory; toevoegen aan de scrollcontainer en scroll-snap-align: center; aan elke afbeelding. Terwijl de gebruiker door de carrousel scrolt, wordt elke afbeelding vloeiend naar de perfecte positie gescrolld. 


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

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

CSS Scroll Snapping werkt goed, zelfs wanneer de snap targets verschillende formaten hebben of wanneer ze groter zijn dan de scroller! Bekijk het bericht 'Goed Gecontroleerd Scrollen met CSS Scroll Snap' voor meer details en voorbeelden die je kunt proberen!

Display-uitsparingen (ook wel inkepingen genoemd)

mobiele telefoon met display-uitsparing
Browsers voegen een extra marge toe aan een mobiel apparaat met een uitsparing voor het scherm, om te voorkomen dat de inhoud door de uitsparing wordt bedekt.

Er verschijnen steeds meer mobiele apparaten met een uitsparing in het scherm, ook wel een notch genoemd. Om dit probleem op te lossen, voegen browsers een kleine extra marge toe aan je pagina, zodat de content niet door de notch wordt overschaduwd.

Maar wat als u die ruimte wilt gebruiken?

Met CSS-omgevingsvariabelen en de viewport-fit metatag is dat nu mogelijk. Om de browser bijvoorbeeld te vertellen dat deze moet uitvouwen tot het uitgesneden weergavegebied, stelt u de eigenschap viewport-fit in de viewport metatag in cover .

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

Vervolgens kunt u de CSS-omgevingsvariabelen safe-area-inset-* gebruiken om uw inhoud op te maken.

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

Er staat een geweldig bericht op de WebKit-blog over het ontwerpen van websites voor de iPhone X. Voor meer informatie kunt u de uitleg bekijken.

Web Locks API

Met de Web Locks API kunt u asynchroon een vergrendeling verkrijgen, deze vasthouden tijdens de uitvoering van het werk en deze vervolgens weer vrijgeven. Zolang de vergrendeling vastzit, kan geen enkel ander script in de bron dezelfde vergrendeling verkrijgen, wat helpt bij het coördineren van het gebruik van gedeelde resources.

Als een web-app die op meerdere tabbladen wordt uitgevoerd bijvoorbeeld wil garanderen dat slechts één tabblad met het netwerk wordt gesynchroniseerd, probeert de synchronisatiecode een vergrendeling met de naam network_sync_lock te verkrijgen.

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

Het eerste tabblad dat de vergrendeling krijgt, synchroniseert de gegevens met het netwerk. Als een ander tabblad dezelfde vergrendeling probeert te krijgen, wordt deze in de wachtrij geplaatst. Zodra de vergrendeling is vrijgegeven, wordt de volgende aanvraag in de wachtrij goedgekeurd en uitgevoerd.

MDN heeft een geweldige Web Locks-primer met een uitgebreidere uitleg en talloze voorbeelden. Of duik er dieper in en bekijk de specificaties .

En nog veel meer!

Dit zijn slechts enkele van de wijzigingen in Chrome 69 voor ontwikkelaars. Er is natuurlijk nog veel meer.

conische gradiënt

  • Dankzij de CSS4-specificatie kun je nu kleurovergangen rond de omtrek van een cirkel maken met behulp van conische gradiënten . Lea Verou heeft een CSS conic-gradient() polyfill die je kunt gebruiken, en de pagina bevat een heleboel coole voorbeelden die door de community zijn ingezonden.
  • Er is een nieuwe toggleAttribute() -methode op elementen die het bestaan van een kenmerk in- of uitschakelt, vergelijkbaar met classList.toggle() .
  • JavaScript-arrays krijgen twee nieuwe methoden: flat() en flatMap() . Ze retourneren een nieuwe array met alle subarray-elementen erin verwerkt.
  • En OffscreenCanvas verplaatst werk van de hoofdthread naar een worker, waardoor prestatieknelpunten worden opgelost.

Paaseieren

Heb jij alle paaseieren in de video gevonden?

Speciale dank aan iedereen die heeft bijgedragen aan de 28 afleveringen van New in Chrome . Ze zijn stuk voor stuk geweldig! 

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

Wil je zien hoe ver New in Chrome is gekomen sinds onze eerste aflevering? Bekijk dan deze leuke video van 30 seconden die onze geschiedenis in kaart brengt, van onze eerste video tot vandaag!

En natuurlijk bedankt voor het kijken en je reacties en feedback! Ik heb ze allemaal gelezen en neem jullie suggesties ter harte. Deze video's zijn dankzij jullie beter geworden!

Bedankt voor het kijken!

Nieuwe Chrome-bloopers

We hebben een leuke blooper voor je samengesteld! Na het bekijken ervan heb ik een paar dingen geleerd:

  • Als ik over mijn woorden struikel, maak ik vreemde geluiden.
  • Ik trek gekke gezichten en steek mijn tong uit.
  • Ik wiebel heel erg.

Abonneren

Wilt u op de hoogte blijven van onze video's? Abonneer u dan op ons YouTube-kanaal voor Chrome-ontwikkelaars . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 70 uitkomt, vertel ik je wat er nieuw is in Chrome!