Nieuw in Chrome 90

Pete LePage

Dit is wat u moet weten:

• Er is een nieuwe waarde voor de CSS- overflow eigenschap.
• De Feature Policy API is hernoemd naar Permissions Policy .
• En er is een nieuwe manier om Shadow DOM rechtstreeks in HTML te implementeren en te gebruiken.
• Ik had in de jaren negentig verschillende jassen die bijna precies zo waren.
• En er is nog veel meer .

Ik ben Pete LePage en ik heb de 411 voor ontwikkelaars in Chrome 90, in de stijl van de jaren 90!

Voorkom overloop met overflow: clip

CSS is dat allemaal en een zak chips! Maar ik denk dat elke webontwikkelaar wel eens iets heeft gezien en meegemaakt dat op een gegeven moment ongemakkelijk overloopt. Er is een geweldig bericht over CSS Tricks over verschillende manieren om met de overflow om te gaan , bijvoorbeeld door overflow: hidden of auto te gebruiken.

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

.overflow-clip {
  overflow: clip;
}

Met behulp van overflow: clip kunt u elk type scrollen voor de box voorkomen, inclusief programmatisch scrollen. Dat betekent dat de doos niet als een scrollcontainer wordt beschouwd; er wordt geen nieuwe opmaakcontext gestart. Als je het nodig hebt, kun je clipping op een enkele as toepassen via overflow-x en overflow-y .

Oh, en ter informatie: er is ook overflow-clip-margin , waarmee je de cliprand kunt uitbreiden. Dit is handig voor gevallen waarin er sprake is van een inktoverloop die zichtbaar moet zijn.

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

Zie 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 het gedrag van bepaalde API's en webfuncties in de browser selectief kunt in-, uitschakelen en wijzigen. Dit beleid vormt een contract tussen u en de browser. Ze informeren de browser over wat uw bedoeling is.

Als uw code, of een van de bibliotheken van derden die u gebruikt, uw vooraf geselecteerde regels schendt, overschrijft de browser het gedrag met betere UX of zegt hij gewoon: "praat tegen de hand", waardoor de API volledig wordt geblokkeerd.

Vanaf Chrome 90 wordt de Feature Policy API hernoemd naar Permissions Policy en wordt de HTTP-header ook hernoemd. Tegelijkertijd heeft de community gekozen voor een nieuwe syntaxis, gebaseerd op gestructureerde veldwaarden voor HTTP.

Permissions-Policy: geolocation=()

Feature-Policy: geolocation 'none'

Als u geïnteresseerd bent in hoe u dit op uw site kunt gebruiken, bekijk dan Inleiding tot het 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 was de enige manier om Shadow DOM te gebruiken het construeren van een schaduwwortel 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 weergave aan de clientzijde, maar niet zo goed bij weergave aan de serverzijde, waar er geen ingebouwde manier is om schaduwwortels uit te drukken in de door de server gegenereerde HTML. Maar vanaf Chrome 90, met de Declarative Shadow DOM, ben je klaar om te gaan. U kunt schaduwwortels maken met alleen HTML.

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

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

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

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

Dit geeft ons de voordelen van de inkapseling en slotprojectie van Shadow DOM in statische HTML. Er is geen JavaScript nodig om de hele boom te produceren, inclusief de schaduwwortel.

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

En meer

En natuurlijk is er 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:// . En als u nog geen automatische omleiding van HTTP naar HTTPS heeft ingesteld, is dit een goed moment om dat te doen.

En er wordt een AV1-encoder geleverd in de Chrome-desktop die specifiek is geoptimaliseerd voor videoconferenties met WebRTC-integratie.

Verder lezen

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

• Wat is er nieuw in Chrome DevTools (90)
• Beëindiging en verwijdering van Chrome 90
• ChromeStatus.com-updates voor Chrome 90
• Wat is er nieuw in JavaScript in Chrome 90
• Wijzigingslijst voor Chromium-bronrepository's

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

Een bijzondere shout-out

Ik heb veel plezier gehad bij het fotograferen van deze aflevering uit de jaren 90 van Nieuw in Chrome. Grote dank aan Sean Meehan voor het idee en voor het samenbrengen van de geweldige mensen die hebben geholpen de time warp naar 1990 te openen.

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