Nieuw in Chrome 115

Adriana Jara

Dit is wat u moet weten:

  • Gebruik ScrollTimeline en ViewTimeline om scrollgestuurde animaties te maken die de gebruikerservaring verbeteren.
  • Omheinde frames werken samen met andere Privacy Sandbox-API's om relevante inhoud in te sluiten en onnodig delen van context te voorkomen.
  • Met de Topics API kan de browser informatie delen met derden over de interesses van een gebruiker, terwijl de privacy behouden blijft.
  • En er is nog veel meer .

Ik ben Adriana Jara. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 115.

Scrollgestuurde animaties

Scrollgestuurde animaties zijn een veelvoorkomend UX-patroon op internet. Een scrollgestuurde animatie is gekoppeld aan de scrollpositie van een scrollcontainer. Dit betekent dat terwijl u omhoog of omlaag scrolt, de gekoppelde animatie als directe reactie vooruit of achteruit gaat.

De volgende voorbeelden demonstreren enkele gebruiksscenario's. U kunt bijvoorbeeld leesindicatoren maken die bewegen terwijl u scrollt:

Een leesindicator bovenop een document, aangedreven door scrollen.

Scrollgestuurde animaties kunnen ook elementen creëren die vervagen zodra ze in beeld komen:

De afbeeldingen op deze pagina vervagen zodra ze in beeld komen.

Standaard wordt een animatie die aan een element is gekoppeld, op de documenttijdlijn uitgevoerd. De oorsprongstijd begint bij 0 wanneer de pagina wordt geladen, en begint vooruit te tikken naarmate de kloktijd vordert. Dit is de standaard animatietijdlijn en tot nu toe de enige animatietijdlijn waartoe u toegang had.

De Scroll-driven Animations Specification definieert twee nieuwe typen tijdlijnen die u kunt gebruiken:

  • Scrollvoortgangstijdlijn : een tijdlijn die is gekoppeld aan de scrollpositie van een scrollcontainer langs een bepaalde as.
  • Voortgangstijdlijn bekijken : een tijdlijn die is gekoppeld aan de relatieve positie van een bepaald element binnen zijn schuifcontainer.

Hier is een codevoorbeeld dat gebruikmaakt van een anonieme scrollvoortgangstijdlijn om een ​​leesvoortgangsindicator te creëren die boven aan de viewport is bevestigd.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Lees scroll-drive-animaties voor alle details en meer voorbeelden.

Omheinde kozijnen

De Privacy Sandbox is een initiatief dat tot doel heeft technologieën te creëren die zowel de privacy van mensen online beschermen als ontwikkelaars tools geven om bloeiende digitale bedrijven op te bouwen.

Veel van zijn voorstellen zijn bedoeld om te voldoen aan cross-site gebruiksscenario's zonder cookies van derden of andere trackingmechanismen. Bijvoorbeeld:

  • De Protected Audience API : maakt op interesses gebaseerde advertenties mogelijk op een privacybeschermende manier.
  • Gedeelde opslag : biedt toegang tot niet-gepartitioneerde cross-site gegevens in een beveiligde omgeving.

Om de privacy te behouden, vereisen sommige van deze API's een nieuwe manier om inhoud in te sluiten. De oplossing wordt een omheind frame genoemd.

Omheinde frames werken in combinatie met andere Privacy Sandbox-voorstellen om documenten van verschillende opslagpartities op één pagina weer te geven.

Een omheind frame is een HTML-element voor ingesloten inhoud, vergelijkbaar met een iframe. In tegenstelling tot iframes beperkt een afgeschermd frame de communicatie met de inbeddingscontext om het frame toegang te geven tot cross-site gegevens zonder deze te delen met de inbeddingscontext.

Op dezelfde manier kunnen gegevens uit de eerste hand in de insluitingscontext niet worden gedeeld met het omheinde frame.

Functie iframe fencedframe
Inhoud insluiten Ja Ja
Ingesloten inhoud heeft toegang tot het insluitende context-DOM Ja Nee
Inbeddingscontext heeft toegang tot ingebedde inhoud DOM Ja Nee
Waarneembare kenmerken, zoals name Ja Nee
URL's ( http://example.com ) Ja Ja ( afhankelijk van gebruiksscenario )
Door browser beheerde ondoorzichtige bron ( urn:uuid ) Nee Ja
Toegang tot cross-site gegevens Nee Ja (afhankelijk van gebruiksscenario)

Laten we bijvoorbeeld zeggen dat news.example (de insluitingscontext) een advertentie van shoes.example insluit in een omheind frame. news.example kan geen gegevens uit de shoes.example -advertentie exfiltreren, en shoes.example kan geen gegevens uit de eerste hand van news.example leren.

Een vergelijking van voor en na de staat van opslagpartitionering.

Bekijk deze artikelen voor documentatie over Fenced Frames , de Protected Audience API , Shared Storage en meer

Onderwerpen-API

In het verleden zijn cookies van derden en andere mechanismen gebruikt om het surfgedrag van gebruikers op verschillende sites te volgen om interessante onderwerpen af ​​te leiden. Deze mechanismen worden uitgefaseerd als onderdeel van het Privacy Sandbox-initiatief.

Met de Topics API kan een browser informatie delen met derden over de interesses van een gebruiker, terwijl de privacy behouden blijft.

De Topics API maakt op interesses gebaseerd adverteren (IBA) mogelijk zonder bij te houden welke sites een gebruiker bezoekt. De browser observeert en registreert onderwerpen die interessant lijken voor de gebruiker, op basis van zijn browse-activiteit. Deze informatie wordt vastgelegd op het apparaat van de gebruiker.

De API kan bijvoorbeeld het onderwerp "Fiber & Textile Arts" voorstellen aan een gebruiker die de website knitting.example bezoekt.

Onderwerpen zijn een signaal om advertentietechnologieplatforms te helpen relevante advertenties te selecteren. In tegenstelling tot cookies van derden wordt deze informatie gedeeld zonder verdere informatie over de gebruiker zelf of de browseractiviteit van de gebruiker vrij te geven.

Lees het Privacy Sandbox-overzicht voor alle details over de onderwerpentaxonomie en het gebruik van de Topics API

En meer!

Natuurlijk is er nog veel meer.

  • De maximale grootte van een WebAssembly.Module op de hoofdthread is verhoogd naar 8 megabytes
  • De CSS- display eigenschap accepteert nu meerdere trefwoorden als waarde, naast de oudere, vooraf samengestelde trefwoorden.
  • Er is een origin-trial voor de Compute Pressure API, die informatie op hoog niveau biedt over de huidige status van de apparaathardware.

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 115.

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Yo soy Adriana Jara, en zodra Chrome 116 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!