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 leggen voor moderne webapplicaties is dat niet!

In Chrome 69 hebben we ondersteuning toegevoegd voor:

• Met CSS Scroll Snap kunt u vloeiende, soepele scroll-ervaringen creëren.
• Met schermuitsparingen kunt u het volledige gebied van het scherm gebruiken, inclusief de ruimte achter de schermuitsparing, ook wel een inkeping genoemd.
• Met de Web Locks API kunt u asynchroon een slot verkrijgen, vasthouden terwijl er wordt gewerkt en vervolgens vrijgeven.

En er is nog veel meer !

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

Wilt u de volledige lijst met wijzigingen? Bekijk de Chromium-bronrepositorywijzigingslijst .

CSS-scrollmodule

Waarschuwing: dit bericht verwijst naar CSS Scroll Snap , de huidige standaard, niet te verwarren met CSS Scroll Snap Points , die verouderd is en niet langer op het standaardspoor staat.

Bekijk demo | Bron

Met CSS Scroll Snap kunt u soepele, soepele scroll-ervaringen creëren door scroll-snap-posities aan te geven die de browser vertellen waar hij moet stoppen na elke scrollbewerking. Dit is erg handig voor afbeeldingscarrousels of gepagineerde secties waarbij u wilt dat de gebruiker naar een specifiek punt scrollt.

Voor een afbeeldingscarrousel zou ik scroll-snap-type: x mandatory; naar de scrollcontainer en scroll-snap-align: center; bij elke afbeelding. Terwijl de gebruiker vervolgens door de carrousel scrolt, wordt elke afbeelding soepel 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 als de snapdoelen verschillende afmetingen hebben of als 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)

Browsers voegen wat extra marge toe op een mobiel apparaat met een schermuitsparing om te voorkomen dat de inhoud door de uitsnede wordt bedekt.

Er komen steeds meer mobiele apparaten op de markt met een displayuitsparing, ook wel notch genoemd. Om daarmee om te gaan, voegen browsers een klein beetje extra marge toe aan uw pagina, zodat de inhoud niet wordt verborgen door de inkeping.

Maar wat als je die ruimte wilt gebruiken?

Met CSS-omgevingsvariabelen en de viewport-fit metatag is dat nu mogelijk. Als u de browser bijvoorbeeld wilt laten uitvouwen naar het uitgesneden weergavegebied, stelt u de eigenschap viewport-fit in de viewport metatag in op cover .

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

U kunt vervolgens 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);
}

Let op: Onthoud: Het is belangrijk om dit goed te testen; je vertelt de browser dat het geen probleem is als bepaalde inhoud achter de schermuitsparing wordt verborgen. En vergeet niet om zowel in portret- als landschapsmodus te testen.

Er staat een geweldig bericht op de WebKit-blog over het ontwerpen van websites voor iPhone X , of bekijk de uitleg voor meer details.

Web Locks-API

Met de Web Locks API kunt u asynchroon een slot verkrijgen, vasthouden terwijl er wordt gewerkt en vervolgens vrijgeven. Terwijl de vergrendeling wordt vastgehouden, kan geen enkel ander script in de oorsprong dezelfde vergrendeling verkrijgen, waardoor het gebruik van gedeelde bronnen wordt gecoördineerd.

Als een web-app die op meerdere tabbladen wordt uitgevoerd er bijvoorbeeld voor wil zorgen dat slechts één tabblad met het netwerk synchroniseert, 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 het slot verkrijgt, synchroniseert de gegevens met het netwerk. Als een ander tabblad hetzelfde slot probeert te verkrijgen, wordt het in de wachtrij geplaatst. Zodra de vergrendeling is opgeheven, wordt aan het volgende verzoek in de wachtrij de vergrendeling toegekend en uitgevoerd.

MDN heeft een geweldige Web Locks-primer en bevat een meer diepgaande uitleg en veel voorbeelden. Of duik er dieper in en bekijk de specificaties .

En meer!

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

• Vanuit de CSS4-specificatie kunt u nu kleurovergangen rond de omtrek van een cirkel maken met behulp van conische verlopen . Lea Verou heeft een CSS conic-gradient() polyfill die je kunt gebruiken, en de pagina bevat een hele reeks echt coole, door de community ingediende voorbeelden.
• Er is een nieuwe toggleAttribute() -methode voor elementen die het bestaan ​​van een attribuut 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.
• En OffscreenCanvas verplaatst het werk van de rode draad naar de medewerker, waardoor knelpunten in de prestaties worden geëlimineerd.

Paaseieren

Heb jij alle paaseieren in de video gevonden?

• Het Chrome-stripboek
• Verchroomde banden
• Aardappel kanon
• Piet Monster
• Houten dino van CDS 2017

Een speciale dank aan alle mensen die hebben geholpen om de 28 afleveringen van Nieuw in Chrome tot stand te brengen. Elk van deze mensen is 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 Nieuw in Chrome is gekomen sinds onze eerste aflevering? Bekijk deze leuke voortgangsvideo van 30 seconden die onze geschiedenis in kaart brengt, vanaf onze eerste video tot vandaag!

En natuurlijk bedankt voor het kijken en geven van uw opmerkingen en feedback! Ik heb ze allemaal gelezen en neem uw suggesties ter harte. Dankzij jou zijn deze video's beter geworden!

Bedankt voor het kijken!

Nieuw in Chrome-bloopers

We hebben een leuke kleine blooper-reel samengesteld waar je van kunt genieten! Na het kijken heb ik een paar dingen geleerd:

• Als ik struikel over mijn woorden, maak ik een paar vreemde geluiden.
• Ik trek gezichten en steek mijn tong uit.
• Ik wiebel, veel.

Abonneren

Wil je op de hoogte blijven van onze video's, abonneer je dan op ons Chrome Developers YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 70 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!