Dazu sollten Sie Folgendes wissen:
- Mit
ScrollTimeline
undViewTimeline
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:
Mit scrollbasierten Animationen können auch Elemente erstellt werden, die eingeblendet werden, sobald sie in Sichtweite 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.
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.
- Das ist neu in den Chrome-Entwicklertools (115)
- Eingestellte und entfernte Funktionen in Chrome 115
- ChromeStatus.com-Updates für Chrome 115
- Liste der Änderungen am Chromium-Quellcode-Repository
- Chrome-Veröffentlichungskalender
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.