Neu in Chrome 115

Dazu sollten Sie Folgendes wissen:

  • Mit ScrollTimeline und ViewTimeline können Sie scrollbasierte 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 an, was es in Chrome 115 für Entwickler Neues gibt.

Scroll-Animationen

Scroll-animierte Elemente sind ein gängiges UX-Muster im Web. Eine scrollgesteuerte 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:

Ein Leseanzeiger über einem Dokument, der durch Scrollen gesteuert 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:

  • Zeitachse für den Scrollvorgang: 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();
}

Weitere Informationen und Beispiele finden Sie unter Scroll-Angetriebene Animationen.

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 sollen standortübergreifende Anwendungsfälle ohne Drittanbieter-Cookies oder andere Tracking-Mechanismen ermöglichen. Beispiel:

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

Um die Privatsphäre zu schützen, erfordern einige dieser APIs eine neue Möglichkeit zum Einbetten von Inhalten. Die Lösung wird als eingezäunter Frame bezeichnet.

Umzäunte Frames werden in Kombination mit anderen Privacy Sandbox-Vorschlägen verwendet, 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 schränkt ein Fenced Frame die Kommunikation mit dem Einbettungskontext ein, um dem Frame Zugriff auf websiteübergreifende Daten zu gewähren, ohne sie für den Einbettungskontext freizugeben.

Ebenso können keine selbst erhobenen Daten im Kontext der Einbettung mit dem eingezäunten Frame geteilt 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 Browserverhalten von Nutzern auf Websites zu erfassen und Themen zu ermitteln, für die sich die Nutzer interessieren. 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.

So könnte die API beispielsweise das Thema "Fiber & Textile Arts" für einen Nutzer vorschlagen, der die Website knitting.example besucht.

Themen sind ein Signal, das Plattformen für Anzeigentechnologien bei der Auswahl relevanter Anzeigen hilft. Im Gegensatz zu Drittanbieter-Cookies werden diese Informationen weitergegeben, ohne dass weitere Informationen über den Nutzer selbst oder seine Browseraktivitäten offengelegt werden.

In der Privacy Sandbox-Übersicht finden Sie alle Details zur Thementaxonomie und zur Verwendung der Topics API.

…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 wichtige Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 115.

Abonnieren

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.