Nieuw in Chrome 90

Pete LePage

Dit is wat u moet weten:

• Er is een nieuwe waarde voor de CSS- overflow eigenschap.
• De naam van de Feature Policy API is gewijzigd naar Permissions Policy .
• En er is een nieuwe manier om Shadow DOM rechtstreeks in HTML te implementeren en gebruiken.
• In de jaren negentig heb ik meerdere jassen gehad die vrijwel exact hetzelfde waren.
• En er is nog veel meer .

Ik ben Pete LePage en ik ken de basisprincipes van Chrome 90 voor ontwikkelaars, en ik doe het op een jaren-90-manier!

Overstroming voorkomen met overflow: clip

CSS is dat allemaal en nog veel meer! Maar ik denk dat elke webontwikkelaar wel eens iets heeft gezien en meegemaakt dat op een gegeven moment onhandig overloopt. Er is een geweldig artikel op CSS Tricks over verschillende manieren om met overflow om te gaan , bijvoorbeeld met overflow: hidden of auto .

In de CSS Overflow Spec is een nieuwe clip eigenschap opgenomen die op een vergelijkbare manier werkt als hidden .

.overflow-clip {
  overflow: clip;
}

Met overflow: clip kunt u elke vorm van scrollen in het vak voorkomen, inclusief programmatisch scrollen. Dit betekent dat het vak niet als een scrollcontainer wordt beschouwd; er wordt geen nieuwe opmaakcontext gestart. Indien nodig kunt u clipping toepassen op één as met overflow-x en overflow-y .

Oh, en ter informatie: er is ook overflow-clip-margin , waarmee je de cliprand kunt vergroten. Dit is handig in gevallen waarin er inkt overloopt die zichtbaar moet zijn.

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}

Bekijk overflow: clip in actie op https://petele-css-is-awesome.glitch.me/

Functiebeleid is nu Machtigingsbeleid

In Chrome 74 introduceerden we de Feature Policy API , waarmee u selectief het gedrag van bepaalde API's en webfuncties in de browser kunt in- en uitschakelen en wijzigen. Deze beleidsregels vormen een contract tussen u en de browser. Ze informeren de browser over uw bedoeling.

Als uw code of een van de door u gebruikte bibliotheken van derden uw vooraf geselecteerde regels overtreedt, negeert de browser het gedrag met een betere UX of zegt gewoon "praat met de hand" en blokkeert de API helemaal.

Vanaf Chrome 90 wordt de Feature Policy API hernoemd naar Permissions Policy , en de HTTP-header is eveneens hernoemd. Tegelijkertijd heeft de community een nieuwe syntaxis gekozen, gebaseerd op Structured Field Values ​​voor HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

Als u wilt weten hoe u dit op uw site kunt gebruiken, lees dan Inleiding tot functiebeleid .

Declaratieve schaduw-DOM

Shadow DOM , onderdeel van de Web Components-standaard, biedt een manier om CSS-stijlen te beperken tot een specifieke DOM-subboom en die subboom te isoleren van de rest van het document. Tot nu toe kon Shadow DOM alleen worden gebruikt door een schaduwroot te construeren met behulp van JavaScript.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

Dit werkt prima voor client-side rendering, maar minder goed voor server-side rendering, waar er geen ingebouwde manier is om Shadow Roots in de door de server gegenereerde HTML weer te geven. Maar vanaf Chrome 90, met de Declarative Shadow DOM, zit je goed. Je kunt shadow roots creëren met alleen HTML.

Een declaratieve schaduwroot is een <template> -element met een shadowroot attribuut. Deze wordt gedetecteerd door de HTML-parser en direct toegepast als de schaduwroot van het bovenliggende element.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

Het laden van de pure HTML-opmaak resulteert in deze DOM-boom:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

Dit biedt ons de voordelen van de encapsulatie en slotprojectie van Shadow DOM in statische HTML. Er is geen JavaScript nodig om de volledige boom te genereren, inclusief de Shadow Root.

Bekijk Declarative Shadow DOM op web.dev voor meer informatie.

En meer

En er is natuurlijk nog veel meer.

Om de privacy en zelfs de laadsnelheid te verbeteren voor gebruikers die sites bezoeken die HTTPS ondersteunen, gebruikt de adresbalk van Chrome standaard https:// . Als u nog geen automatische omleiding van HTTP naar HTTPS hebt ingesteld, is dit een goed moment om dat te doen.

En er wordt een AV1-encoder meegeleverd met Chrome Desktop, die speciaal is geoptimaliseerd voor videoconferenties met WebRTC-integratie.

Verder lezen

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

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

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 91 uitkomt, vertel ik je alles over de nieuwe functies in Chrome!

Een speciale shout-out

Ik heb enorm veel plezier gehad met het filmen van deze aflevering van New in Chrome, met een jaren 90-thema. Hartelijk dank aan Sean Meehan voor het idee en voor het samenbrengen van de fantastische mensen die hebben geholpen de tijdreis naar 1990 te openen.

En natuurlijk Loren Borja, Lee Carruthers en Lukas Holcek, die aan al mijn 'Nieuw in Chrome'-video's werken en ervoor zorgen dat ik er veel beter uitzie dan ik in werkelijkheid ben. BEDANKT!