Nieuw in Chrome 74

Pete LePage

In Chrome 74 hebben we ondersteuning toegevoegd voor:

• Het maken van privé-klassevelden in JavaScript is nu veel overzichtelijker.
• U kunt detecteren wanneer de gebruiker een ervaring met verminderde beweging heeft aangevraagd.
• CSS -overgangsgebeurtenissen
• Voegt nieuwe functiebeleid-API's toe om te controleren of functies zijn ingeschakeld.

En er is nog veel meer !

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

Wijzigingslogboek

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

• Wat is er nieuw in Chrome DevTools (74)
• Chrome 74-verouderde en verwijderde versies
• ChromeStatus.com-updates voor Chrome 74
• Wat is er nieuw in JavaScript in Chrome 74
• Wijzigingslijst voor Chromium-bronrepository

Privéklassevelden

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

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

En ik zei al dat er aan privé-klassevelden werd gewerkt. Ik ben blij te kunnen melden dat privé-klassevelden in Chrome 74 zijn geland. De nieuwe syntaxis voor privé-velden is vergelijkbaar met die voor openbare velden, behalve dat je het veld als privé markeert met een # (hekje). Beschouw de # als onderdeel van de veldnaam.

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

Onthoud dat private gewoon privé zijn. Ze zijn toegankelijk binnen de klasse, maar niet beschikbaar buiten de klasse zelf.

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

Wilt u meer lezen over openbare en privélessen? Bekijk dan Mathias' bericht over klassenvelden .

prefers-reduced-motion

Sommige gebruikers melden 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 media query, prefers-reduced-motion , onderdeel van de 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;
  }
}

Lees 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 overgangsgebeurtenissen worden verzonden wanneer een overgang in de wachtrij wordt geplaatst, start, 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 te luisteren naar deze gebeurtenissen, is het mogelijk om gedrag te volgen of te wijzigen wanneer een overgang wordt uitgevoerd.

API-updates voor functiebeleid

Met featurebeleid kunt u het gedrag van API's en andere webfuncties selectief in- en uitschakelen en wijzigen. Dit doet u via de Feature-Policy-header of via het allow-kenmerk in een iframe.

Feature-Policy: geolocation 'self'

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

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

• U kunt een lijst met toegestane functies verkrijgen met document.featurePolicy.allowedFeatures() .
• U kunt controleren of een specifieke functie is toegestaan ​​met document.featurePolicy.allowsFeature(...) .
• U kunt ook een lijst met domeinen opvragen die op de huidige pagina worden gebruikt en die een bepaalde functie toestaan ​​met document.featurePolicy.getAllowlistForFeature() .

Lees het bericht Inleiding tot functiebeleid voor meer informatie.

En nog veel meer!

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

Google I/O vindt binnenkort plaats!

En vergeet niet: Google I/O is nog maar een paar weken verwijderd (7 tot en met 9 mei) en we hebben veel geweldig nieuws voor je. Kun je er niet bij zijn? Alle sessies worden live gestreamd en zijn daarna beschikbaar op ons Chrome Developers YouTube-kanaal .

Abonneren

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

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