Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chrome 74

Pete LePage

In Chrome 74 hebben we ondersteuning toegevoegd voor:

Het maken van privéklassevelden in JavaScript is nu veel schoner.
U kunt detecteren wanneer de gebruiker om een verminderde bewegingservaring heeft gevraagd.
CSS- overgangsgebeurtenissen
Voegt nieuwe functiebeleid-API's toe om te controleren of functies zijn ingeschakeld of niet.

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

Wijzig logboek

Dit behandelt slechts enkele van de belangrijkste hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 74.

Privélesvelden

Klassevelden vereenvoudigen de klassensyntaxis door de noodzaak van constructorfuncties te vermijden om alleen instantie-eigenschappen te definiëren. In Chrome 72 hebben we ondersteuning toegevoegd voor openbare klassenvelden .

class IncreasingCounter {
  // Public class field
  _publicValue = 0;
  get value() {
    return this._publicValue;
  }
  increment() {
    this._publicValue++;
  }
}

En ik zei dat er privélesvelden in de maak waren. Ik ben blij om te kunnen zeggen dat privéklassevelden in Chrome 74 zijn geland. De nieuwe syntaxis van privévelden is vergelijkbaar met openbare velden, behalve dat u het veld als privé markeert door een # (hekje-teken) te gebruiken. Beschouw de # als onderdeel van de veldnaam.

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

Bedenk dat private precies dat zijn: privé . Ze zijn toegankelijk binnen de klas, maar niet beschikbaar buiten de hoofdtekst van de klas.

class SimpleClass {
  _iAmPublic = 'shared';
  #iAmPrivate = 'secret';
  doSomething() {
    ...
  }
}

Om meer te lezen over openbare en privélessen, bekijk Mathias' bericht over lesvelden .

`prefers-reduced-motion`

Sommige gebruikers hebben gemeld dat ze bewegingsziek worden bij het bekijken van parallax-scrollen, zoomen en andere bewegingseffecten. Om dit aan te pakken bieden veel besturingssystemen een optie om beweging waar mogelijk te verminderen.

Chrome biedt nu een mediaquery, prefers-reduced-motion - onderdeel van Media Queries Level 5-specificatie , waarmee u kunt detecteren wanneer deze optie is ingeschakeld.

@media (prefers-reduced-motion: reduce)

Stel je voor dat ik een aanmeldknop heb die met een lichte beweging de aandacht op zichzelf vestigt. Met de nieuwe query kan ik de beweging alleen voor de knop uitschakelen.

button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

Bekijk Tom's artikel Move Ya! Of misschien niet, als de gebruiker de voorkeur geeft aan verminderde beweging! voor meer details.

CSS- `transition`

De CSS Transitions-specificatie vereist dat transitiegebeurtenissen worden verzonden wanneer een transitie in de wachtrij wordt geplaatst, begint, eindigt of wordt geannuleerd. Deze gebeurtenissen worden al een tijdje ondersteund in andere browsers...

Maar tot nu toe werden ze niet ondersteund in Chrome. In Chrome 74 kun je nu luisteren naar:

transitionrun
transitionstart
transitionend
transitioncancel

Door naar deze gebeurtenissen te luisteren, is het mogelijk om gedrag tijdens een transitie te volgen of te veranderen.

Functiebeleid API-updates

Met functiebeleid kunt u het gedrag van API's en andere webfuncties selectief in-, uitschakelen en wijzigen. Dit gebeurt via de Feature-Policy-header of via het allow-attribuut op een iframe.

Feature-Policy: geolocation 'self'

<iframe ... allow="geolocation self">
</iframe>

Chrome 74 introduceert een nieuwe set API's om te controleren welke functies zijn ingeschakeld:

U kunt een lijst met toegestane functies krijgen met document.featurePolicy.allowedFeatures() .
U kunt controleren of een specifieke functie is toegestaan met document.featurePolicy.allowsFeature(...) .
En u kunt een lijst met domeinen krijgen die op de huidige pagina worden gebruikt en die een specifieke functie toestaan met document.featurePolicy.getAllowlistForFeature() .

Bekijk de post Inleiding tot het functiebeleid voor meer details.

En meer!

Dit zijn slechts enkele van de veranderingen in Chrome 74 voor ontwikkelaars. Er is natuurlijk nog veel meer. Persoonlijk ben ik behoorlijk enthousiast over KV Storage , een supersnelle, asynchrone sleutel/waarde-opslagservice, beschikbaar als origin-proefversie.

Google I/O komt binnenkort!

En vergeet niet: Google I/O is nog maar een paar weken verwijderd (7 tot 9 mei) en we hebben veel geweldige nieuwe dingen voor je. Als je er niet bij kunt zijn, worden alle sessies live gestreamd en zijn ze daarna beschikbaar op ons Chrome Developers YouTube-kanaal .

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 75 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!