Websites mit prefers-reduced-data erstellen

Spoiler-Alarm: Es gibt noch keine Unterstützung dafür. Aber es ist in der Media Queries Level 5 Spezifikation definiert, die andere aktuelle, aber bekanntere Funktionen für Benutzereinstellungen wie prefers-color-scheme und prefers-reduced-motion enthält.

Der Polypane-Blog geht unglaublich tief auf prefers-reduced-data ein, besonders bei etwas, das wir noch nicht im Einsatz gesehen haben. Das macht das Polypane-Team zu einer idealen Stimme für dieses Thema. Ihr Produkt ist ein Browser, der in der Lage ist, die Funktion hinter einem Chromium-Flag zu emulieren.

Gleichzeitig ist es erwähnenswert, dass die Spezifikation zwei signifikante potenzielle Probleme mit dieser Funktion in ihrem aktuellen Zustand hervorhebt:

• Sie könnte eine unerwünschte Quelle für Fingerprinting sein, mit einer Tendenz zu geringem Einkommen mit begrenzten Daten. 
• Diese Funktion ist ein früher Entwurf, und die CSS-WG betrachtet sie nicht als bereit für den Einsatz in der Produktion.

Aber das heißt nicht, dass wir uns nicht schon damit vertraut machen können. So funktioniert es:

@media (prefers-reduced-data: reduce) {
  /* Stuff for reduced data preferences */
}

@media (prefers-reduced-data: no-preference) {
  /* Stuff for no data preferences */
}

Was ich an diesem Beitrag schätze, ist die Fülle an möglichen Anwendungsfällen, die er auflistet. Lassen Sie mich zusammenfassen:

• Bedingtes Laden von Schriftarten. Das heißt, eine @font-face-Deklaration erstellen und dann die Schriftart auf dem Body aufrufen, einmal für Benutzer mit no-preference, um die benutzerdefinierte Schriftart zu erhalten, und erneut für Benutzer mit reduced, um einen leichteren Stapel zu erhalten.
• Hintergrundbilder. Haben Sie jemals ein riesiges Splash-Bild als Hintergrund für eine Vollbreiten-Hero-Komponente verwendet? Vielleicht kann das nur für Personen bereitgestellt werden, die no-preference haben, während Personen mit reduced entweder eine kleinere Variante oder gar kein Bild erhalten.
• Kleinere Bilder in HTML. Das ist clever, denn denken Sie daran, dass wir das media-Attribut im <source>-Element haben. So können wir Browser anweisen, bestimmte Bilder zu verwenden, wenn wir mit <picture> arbeiten, nach dem Motto: <source srcset="small.jpg" media="(prefers-reduced-data: reduce)" />.
• Bedingtes Vorladen und Autoplay von Videos. So wie wir diese Funktion in HTML nutzen können, können wir sie auch in JavaScript verwenden, indem wir window.matchMedia('(prefers-reduced-data: no-preference)').matches verwenden, um die Attribute autoplay und preload für ein Video basierend auf den Datenpräferenzen festzulegen.
• Unendliches Scrollen aufgeben. Ich würde dieses Muster ohnehin schon als erstes verwerfen, aber wir können es definitiv deaktivieren, damit Benutzer, die reduzierte Daten bevorzugen, nicht gezwungen werden, mehr Inhalt (und damit mehr Daten) zu konsumieren, nur weil sie das Ende einer Seite erreichen.

Das ist natürlich keine definitive Liste von Ideen! Wir sprechen ständig darüber, die richtigen Assets zur richtigen Zeit für die richtigen Leute bereitzustellen, und diese Medienfunktion ist ein großartiges Werkzeug, um uns dabei in bestimmten Kontexten zu helfen. Denken Sie auch an:

• Bereitstellen von Low-Res-Versionen von heruntergeladenen Assets (z. B. PDFs)
• Verlinkung zu bestimmten Websites oder Seiten mit aufwendigen Erfahrungen
• Bedingtes Laden ganzer Skripte, Stylesheets oder Bibliotheken basierend auf Präferenzen
• Wahrscheinlich eine Unmenge anderer und klügerer Dinge…

Und dieser Rat ist Gold wert:

Ähnlich wie bei prefers-reduced-motion ist es gut, die Option prefers-reduced-data: reduce als Standardoption zu betrachten: Benutzer erhalten das schlanke, schnelle Erlebnis, und nur wenn sie no-preference angeben, senden wir ihnen mehr Daten. Auf diese Weise erhalten Browser, die die Medienabfrage nicht unterstützen, standardmäßig das schlanke Erlebnis.

Yep. Derselbe Gedanke wie beim "Mobile-First"-Responsive Design: Beginnen Sie mit dem Design für reduzierte Daten und verbessern Sie dann, wenn wir skalieren.

Direkter Link →