Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in Chrome 115

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Mit ScrollTimeline und ViewTimeline können Sie scroll-gesteuerte Animationen erstellen, die die Nutzerfreundlichkeit verbessern.
Umzäunte Frames werden zusammen mit anderen Privacy Sandbox-APIs verwendet, um relevante Inhalte einzubetten und gleichzeitig die unnötige Weitergabe von Kontext zu verhindern.
Mit der Topics API kann der Browser Informationen zu den Interessen eines Nutzers an Dritte weitergeben und dabei die Privatsphäre schützen.
Und es gibt noch viel mehr.

Ich bin Adriana Jara. Sehen wir uns nun an, was es bei Chrome 115 für Entwickler Neues gibt.

Scroll-Animationen

Scroll-animierte Elemente sind ein gängiges UX-Muster im Web. Eine scrollbasierte Animation ist mit der Scrollposition eines Scrollcontainers verknüpft. Das bedeutet, dass die verknüpfte Animation direkt in die entsprechende Richtung weiterläuft, wenn Sie nach oben oder unten scrollen.

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 ausgelöst wird.

Mit scrollbasierten Animationen können auch Elemente erstellt werden, die eingeblendet werden, sobald sie in Sichtweite kommen:

Die Bilder auf dieser Seite werden eingeblendet, sobald sie in den Blick kommen.

Standardmäßig wird eine an ein Element angehängte Animation auf der Zeitleiste des Dokuments wiedergegeben. Der Ursprungszeitpunkt beginnt bei 0, wenn die Seite geladen wird, und läuft mit fortlaufender Zeit weiter. Dies ist die Standard-Animationszeitachse und bis jetzt die einzige Animationszeitachse, auf die Sie Zugriff hatten.

In der Spezifikation für scrollgesteuerte Animationen werden zwei neue Arten von Zeitleisten definiert, die Sie verwenden können:

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

Hier ist ein Codebeispiel, in dem eine anonyme Scroll-Fortschrittsleiste verwendet wird, um eine Lesefortschrittsanzeige oben im Darstellungsbereich zu erstellen.

<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 weitere Beispiele finden Sie unter Scrollanimationen.

eingezäunte Frames

Die Privacy Sandbox ist eine Initiative, die darauf abzielt, Technologien zu entwickeln, die sowohl die Privatsphäre von Nutzern im Internet schützen als auch Entwicklern Tools an die Hand geben, um im digitalen Geschäft erfolgreich zu sein.

Viele der Vorschläge zielen darauf ab, websiteübergreifende Anwendungsfälle ohne Drittanbieter-Cookies oder andere Tracking-Mechanismen abzudecken. Beispiel:

Die Protected Audience API: Ermöglicht die datenschutzfreundliche Auslieferung interessenbezogener Anzeigen.
Gemeinsamer Speicher: Ermöglicht den Zugriff auf nicht partitionierte websiteübergreifende Daten in einer sicheren Umgebung.

Aus Datenschutzgründen benötigen einige dieser APIs eine neue Möglichkeit zum Einbetten von Inhalten. Die Lösung wird als eingezäunter Frame bezeichnet.

Fenced Frames können in Kombination mit anderen Privacy Sandbox-Lösungen verwendet werden, um Dokumente aus verschiedenen Speicherpartitionen auf einer einzigen Seite anzuzeigen.

Ein Fenced Frame ist ein HTML-Element für eingebettete Inhalte, ähnlich einem iFrame. Im Gegensatz zu iFrames schränkt ein Fenced Frame die Kommunikation mit seinem Einbettungskontext ein, um dem Frame Zugriff auf websiteübergreifende Daten zu ermöglichen, ohne sie mit dem Einbettungskontext zu teilen.

Ebenso können selbst erhobene Daten im Einbettungskontext nicht für den Fenced Frame freigegeben werden.

Funktion	`iframe`	`fencedframe`
Inhalte einbetten	Ja	Ja
Eingebettete Inhalte können auf das DOM des Einbettungskontexts zugreifen	Ja	Nein
Einbettungskontext kann auf das DOM der eingebetteten Inhalte zugreifen	Ja	Nein
Beobachtbare Attribute wie `name`	Ja	Nein
URLs (`http://example.com`)	Ja	Ja (abhängig vom Anwendungsfall)
Vom Browser verwaltete opake Quelle (`urn:uuid`)	Nein	Ja
Zugriff auf websiteübergreifende Daten	Nein	Ja (abhängig vom Anwendungsfall)

Angenommen, news.example (der Einbettungskontext) bettet eine Anzeige von shoes.example in einen eingegrenzten Frame ein. news.example kann keine Daten aus der shoes.example-Anzeige extrahieren und shoes.example kann keine selbst erhobenen Daten von news.example lernen.

Ein Vergleich des Zustands der Speicherpartition vor und nach der Änderung.

In diesen Artikeln finden Sie Dokumentationen zu Fenced Frames, der Protected Audience API, der Shared Storage API und mehr.

Topics API

In der Vergangenheit wurden Drittanbieter-Cookies und andere Mechanismen verwendet, um das Surfverhalten von Nutzern über verschiedene Websites hinweg zu verfolgen und so auf Themen zu schließen, die für sie von Interesse sind. Diese Mechanismen werden im Rahmen der Privacy Sandbox-Initiative eingestellt.

Mit der Topics API kann ein Browser Informationen zu den Interessen eines Nutzers mit Dritten teilen und dabei die Privatsphäre schützen.

Die Topics API ermöglicht interessenbezogene Werbung, ohne dass die Websites erfasst werden, die ein Nutzer besucht. Der Browser beobachtet und erfasst Themen, die für den Nutzer auf Grundlage seiner Browseraktivitäten von Interesse zu sein scheinen. Diese Informationen werden auf dem Gerät des Nutzers aufgezeichnet.

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

Themen sind ein Signal, das Werbetechnologieplattformen bei der Auswahl relevanter Anzeigen hilft. Im Gegensatz zu Drittanbieter-Cookies werden diese Informationen weitergegeben, ohne dass weitere Informationen über den Nutzer selbst oder die Browseraktivitäten preisgegeben werden.

Weitere Informationen zur Thementaxonomie und zur Verwendung der Topics API finden Sie in der Übersicht über die Privacy Sandbox.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Die maximale Größe einer WebAssembly.Module im Hauptthread wurde auf 8 Megabyte erhöht.
Die CSS-Property display akzeptiert jetzt neben den vordefinierten Keywords auch mehrere Keywords als Wert.
Für die Compute Pressure API gibt es einen Probezeitraum, der allgemeine Informationen zum aktuellen Zustand der Gerätehardware bietet.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 115.

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich heiße Adriana Jara und sobald Chrome 116 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.