Neu in Chrome 115

Adriana Jara

Dazu sollten Sie Folgendes wissen:

  • Mit ScrollTimeline und ViewTimeline kannst du scrollgesteuerte Animationen erstellen, die die Nutzerfreundlichkeit verbessern.
  • Fenced Frames funktionieren in Verbindung mit anderen Privacy Sandbox APIs, um relevante Inhalte einzubetten und unnötiges Teilen von Kontext zu verhindern.
  • Mit der Topics API kann der Browser Daten zu den Interessen eines Nutzers an Dritte weitergeben, wobei der Datenschutz gewährleistet bleibt.
  • Und es gibt viele weitere.

Mein Name ist Adriana Jara. Jetzt sehen wir uns an, was es für Entwickler Neues bei Chrome 115 gibt.

Scroll-Animationen

Scroll-Animationen sind ein gängiges UX-Muster im Web. Eine Scroll-Animation ist mit der Scroll-Position eines Scroll-Containers verknüpft. Das heißt, wenn Sie nach oben oder unten scrollen, wird die verknüpfte Animation als Direct-Response vor- oder zurückgescrollt.

Die folgenden Beispiele veranschaulichen einige Anwendungsfälle. Sie können beispielsweise Leseanzeigen erstellen, die sich beim Scrollen bewegen:

Eine Leseanzeige über einem Dokument, die durch Scrollen gesteuert wird.

Durch Scroll-Animationen gesteuerte Animationen können auch Elemente erstellen, die eingeblendet werden, sobald sie sichtbar werden:

Die Bilder auf dieser Seite werden eingeblendet, sobald sie sichtbar werden.

Standardmäßig wird eine an ein Element angehängte Animation auf der Zeitachse des Dokuments ausgeführt. Die Startzeit beginnt bei 0, wenn die Seite geladen wird, und tickt im Verlauf der Uhr vor. Dies ist die Standard-Animationszeitachse und war bisher die einzige Animationszeitachse, auf die Sie Zugriff hatten.

In der Spezifikation für scrollbare Animationen sind zwei neue Arten von Zeitachsen definiert, die Sie verwenden können:

  • Zeitleiste für den Scrollfortschritt: Eine Zeitachse, die mit der Scrollposition eines Scrollcontainers entlang einer bestimmten Achse verknüpft ist.
  • Fortschritts-Zeitachse ansehen: Eine Zeitachse, die mit der relativen Position eines bestimmten Elements innerhalb seines Scroll-Containers verknüpft ist.

Im Folgenden finden Sie ein Codebeispiel, bei dem eine anonyme Scroll-Zeitleiste verwendet wird, um eine Lesefortschrittsanzeige zu erstellen, die oben im Darstellungsbereich fixiert ist.

<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();
}

Alle Details und Beispiele findest du in den Animationen zum Scrollen.

Umzäunte Rahmen

Die Privacy Sandbox ist eine Initiative mit dem Ziel, Technologien zu entwickeln, die sowohl die Privatsphäre der Nutzer im Internet schützen als auch Entwicklern Tools an die Hand geben, mit denen sie erfolgreiche Onlinegeschäfte aufbauen können.

Viele der Vorschläge sind auf websiteübergreifende Anwendungsfälle ohne Drittanbieter-Cookies oder andere Tracking-Mechanismen ausgerichtet. Beispiel:

  • Die Protected Audience API ermöglicht eine datenschutzfreundliche Bereitstellung interessenbezogener Anzeigen.
  • Freigegebener Speicher: Ermöglicht den Zugriff auf nicht partitionierte websiteübergreifende Daten in einer sicheren Umgebung.

Aus Datenschutzgründen erfordern einige dieser APIs eine neue Möglichkeit, Inhalte einzubetten. Die Lösung wird als Fenced Frame bezeichnet.

Fenced Frames können mit anderen Privacy Sandbox-Angeboten kombiniert werden, um Dokumente aus verschiedenen Speicherpartitionen auf einer einzigen Seite anzuzeigen.

Ein Fenced Frame ist ein HTML-Element für eingebettete Inhalte, ähnlich wie ein iFrame. Im Gegensatz zu iFrames wird bei einem Fenced Frame die Kommunikation mit dem Einbettungskontext eingeschränkt, damit der Frame auf websiteübergreifende Daten zugreifen kann, ohne diese mit dem Einbettungskontext zu teilen.

Ebenso können selbst erhobene Daten im Einbettungskontext nicht mit dem Fenced Frame geteilt werden.

Funktion iframe fencedframe
Inhalte einbetten Ja Ja
Eingebettete Inhalte können auf das DOM zum eingebetteten Kontext zugreifen Ja Nein
Einbettungskontext kann auf eingebettete Inhalte-DOM zugreifen Ja Nein
Beobachtbare Attribute wie name Ja Nein
URLs (http://example.com) Ja Ja (abhängig vom Anwendungsfall)
Vom Browser verwaltete intransparente Quelle (urn:uuid) Nein Ja
Zugriff auf websiteübergreifende Daten Nein Ja (je nach Anwendungsfall)

Ein Beispiel: Mit dem Einbettungskontext news.example wird eine Anzeige von shoes.example in einen Fenced Frame eingebettet. news.example darf keine Daten aus der Anzeige „shoes.example“ exfiltrieren und shoes.example kann keine selbst erhobenen Daten von news.example abrufen.

Vergleich des Zustands vor und nach der Speicherpartitionierung.

In diesen Artikeln finden Sie die Dokumentation zu Fenced Frames, der Protected Audience API, freigegebenem Speicher und mehr.

Topics API

In der Vergangenheit wurden Drittanbieter-Cookies und andere Mechanismen dazu verwendet, das Browserverhalten von Nutzern websiteübergreifend zu verfolgen und so auf Themen von Interesse zu schließen. Diese Mechanismen werden im Rahmen der Privacy Sandbox-Initiative eingestellt.

Mit der Topics API kann ein Browser unter Wahrung des Datenschutzes Informationen über die Interessen eines Nutzers mit Dritten teilen.

Die Topics API ermöglicht interessenbezogene Werbung (IBA), ohne die vom Nutzer besuchten Websites zu erfassen. Der Browser erfasst und speichert Themen, die für den Nutzer auf der Grundlage seiner Browseraktivitäten von Interesse zu sein scheinen. Diese Informationen werden auf dem Gerät des Nutzers aufgezeichnet.

Beispielsweise kann die API einem Nutzer, der die Website knitting.example besucht, das Thema "Fiber & Textile Arts" vorschlagen.

Themen sind ein Signal, mit dem AdTech-Plattformen relevante Anzeigen auswählen können. Im Gegensatz zu Drittanbieter-Cookies werden diese Informationen weitergegeben, ohne dass weitere Informationen über den Nutzer oder seine Browseraktivitäten offengelegt werden.

In der Übersicht über die Privacy Sandbox finden Sie alle Details zur Topics-Taxonomie und zur Verwendung der Topics API.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Die maximale Größe eines WebAssembly.Module-Elements im Hauptthread wurde auf 8 MB erhöht
  • Für die CSS-Eigenschaft display werden neben den alten vordefinierten Keywords jetzt mehrere Keywords als Wert akzeptiert.
  • Es gibt einen Ursprungstest für die Compute Pressure API, der allgemeine Informationen zum aktuellen Zustand der Gerätehardware liefert.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Weitere Änderungen in Chrome 115 finden Sie unter den folgenden Links.

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

Hallo Adriana Jara, und sobald Chrome 116 veröffentlicht wird, informiere ich euch, was es Neues in Chrome gibt.