CSS Scroll Snap ermöglicht es Websites, die Webseite oder jeden anderen Scroll-Container an eine bestimmte Scroll-Position zu "snappen", wenn der Benutzer eine Scroll-Operation durchführt. Diese Funktion wird seit über zwei Jahren in allen modernen Browsern unterstützt, aber viele Websites, die davon profitieren könnten, nutzen sie immer noch nicht.
Scroll Snapping wird wahrscheinlich am häufigsten mit horizontalen Karussells (siehe Chris' CSS-Only-Ansatz) und bestimmten Webseiten, die in Vollbild-Slides unterteilt sind, in Verbindung gebracht. Aber warum sollte man dort aufhören? Ich glaube, dass Snapping das Scroll-Erlebnis auf jeder Webseite verbessern kann, die Elemente in einem Raster oder Feed anordnet.
Zum Beispiel zeigen die meisten Shopping-Websites Produkte in einem Raster an. Idealerweise möchte der Benutzer mit minimalem Aufwand zwischen den Rasterzeilen springen. Der Benutzer kann die Leertaste drücken, um die Seite um etwa eine Bildschirmhöhe (Viewport-Höhe) zu scrollen, aber je nach Höhe der Rasterzeilen gerät die Scroll-Position schließlich "aus dem Takt" mit dem Raster, und der Benutzer muss sie manuell neu anpassen.
Wenn wir dem Scroll Snapping auf dieser Seite hinzufügen, kann der Benutzer mit der Leertaste konsistent zur nächsten Zeile scrollen (die Umschalttaste + Leertaste scrollt zur vorherigen Zeile). Das ist ziemlich mühelos.
Ich denke, dass Scroll Snapping eine willkommene Ergänzung für diese Website wäre. Und es ist nicht einmal besonders kompliziert zu implementieren. Der CSS-Code, den ich für dieses Beispiel verwendet habe, ist relativ einfach.
html {
scroll-snap-type: y proximity;
}
.product-item {
scroll-snap-align: start;
scroll-margin-top: 75px; /* height of web page’s sticky header */
}Sie müssen nicht warten, wenn eine Website, die Sie regelmäßig besuchen, noch kein Scroll Snapping hinzugefügt hat und Sie der Meinung sind, dass dies Ihr Scroll-Erlebnis verbessern würde. Sie können Scroll Snapping selbst hinzufügen – mit benutzerdefinierten Stilen.
Benutzerdefinierte Stile zu Websites hinzufügen
Im obigen Video sehen Sie, dass ich in den erweiterten Einstellungen von Safari eine user.css-Datei ausgewählt habe. Diese Datei ist eine Benutzerstilvorlage. Sie enthält CSS-Stile, die ich geschrieben habe, in einer lokalen .css-Datei gespeichert und zu Safari hinzugefügt habe. Diese "benutzerdefinierten Stile" werden dann auf jede Webseite angewendet, die ich in Safari öffne.
Chrome und Firefox erlauben es Benutzern nicht, eine benutzerdefinierte Stilvorlage auszuwählen. Firefox unterstützte früher eine ähnliche Funktion namens userContent.css, aber diese Funktion wurde 2019 als veraltet erklärt und standardmäßig deaktiviert. Für diese beiden Browser (und andere Chromium-basierte Browser) empfehle ich die Stylus-Browsererweiterung.
Ein wesentlicher Vorteil von Stylus ist, dass es Ihnen ermöglicht, benutzerdefinierte Stile für bestimmte Websites und URLs zu schreiben. Safaris benutzerdefinierte Stilvorlage gilt für alle Websites, dies kann jedoch umgangen werden, z. B. durch die Verwendung der neuen Pseudo-Klasse :has(), um Selektoren zu erstellen, die nur bestimmte Websites abgleichen.
Das CSS Cascading Module definiert einen User Origin für Stile, die der Benutzer hinzufügt. Safaris benutzerdefinierte Stilvorlage gehört zu diesem Ursprung, aber die Stylus-Erweiterung injiziert benutzerdefinierte Stile in den Author Origin, wo die Stilvorlagen der Website leben. Insbesondere fügt Stylus benutzerdefinierte Stile direkt über ein <style>-Element am Ende von <html> in die Seite ein, was sie zur letzten Stilvorlage auf der Seite macht. Technisch gesehen bedeutet dies, dass Stile, die über Stylus hinzugefügt werden, als Autorstile klassifiziert werden, da sie nicht im User Origin enthalten sind, aber ich werde sie weiterhin als Benutzerstile bezeichnen, da der Benutzer sie hinzufügt.
Es ist jedoch erwähnenswert, diese Unterscheidung im Hinterkopf zu behalten, da sie die Kaskade beeinflusst. Bei gleicher Selektorspezifität ist ein echter Benutzerstil schwächer als der eigene Stil der Seite. Das macht Benutzerstile zu einer ausgezeichneten Passform für Benutzerstandards. Unter den gleichen Bedingungen ist ein über Stylus hinzugefügter Stil *stärker* als der Stil der Seite, daher kann Stylus nicht so einfach verwendet werden, um Benutzerstandards zu definieren.
Wenn wir !important in die Mischung aufnehmen, sind sowohl echte Benutzerstile als auch über Stylus hinzugefügte Stile stärker als die Stile der Seite. Wenn Sie also Ihre Benutzerstile einer Website aufzwingen möchten, spielt es keine Rolle, ob Sie die Option "Style sheet" von Safari oder die Stylus-Erweiterung verwenden. Ihre !important-Stile werden in jedem Fall gewinnen.
Im nächsten Abschnitt werde ich eine Reihe von !important-Benutzerstilen verwenden, um Scroll Snapping auf der Timeline-Seite von Twitters Website zu erzwingen. Mein Ziel ist es, den Prozess des Lesens meiner Twitter-Timeline zu beschleunigen, indem awkward Scroll-Positionen vermieden werden, bei denen der oberste Tweet nur teilweise auf dem Bildschirm sichtbar ist.
Scroll Snap für Twitters Timeline
Nach einiger Experimentiererei bin ich bei folgendem CSS-Code gelandet. Diese Stile funktionieren gut in Firefox, aber ich hatte einige Probleme in Chrome und Safari. Ich werde diese Probleme später im Artikel detaillierter beschreiben, aber konzentrieren wir uns zunächst auf das Verhalten in Firefox.
html {
scroll-snap-type: y mandatory !important;
}
/* tweets in the timeline are <article> elements */
article {
scroll-snap-align: start !important;
}
/* un-stick the sticky header and make it “snappable” as well */
[aria-label="Home timeline"] > :first-child {
position: static !important;
scroll-snap-align: start !important;
}
/* hide the “new Tweets available” floating toast notification */
[aria-label="New Tweets are available."] {
display: none !important;
}Es ist notwendig, !important zu jeder Deklaration hinzuzufügen, da alle Benutzerstile über die eigenen Stile der Webseite gewinnen müssen, damit unsere benutzerdefinierte Scroll-Snapping-Implementierung korrekt funktioniert. Ich wünschte, ich könnte meine Benutzerstile in eine "wichtige Ebene" legen, anstatt wiederholt !important zu schreiben, aber eine solche CSS-Funktion existiert nicht (noch nicht).
Sehen Sie sich das folgende Video an, um meine Scroll-Snap-Benutzerstile in Aktion zu sehen. Beachten Sie, wie jeder Druck auf die Leertaste den nächsten Satz von Tweets einblendet und der erste Tweet jedes Satzes an der oberen Kante des Viewports ausgerichtet ist. Dies ermöglicht es mir, meine Timeline schneller zu lesen. Wenn ich zum vorherigen Satz von Tweets zurückkehren muss, kann ich Umschalttaste + Leertaste drücken.
Was mir an dieser Art von Scroll-Snapping gefällt, ist, dass es mir ermöglicht, vorherzusagen, wie weit die Seite gescrollt wird, wenn ich die Leertaste drücke. Jede Scroll-Distanz entspricht der kombinierten Höhe der sichtbaren Tweets, die sich vollständig auf dem Bildschirm befinden. Mit anderen Worten, der teilweise sichtbare Tweet am unteren Bildschirmrand rückt an den oberen Bildschirmrand, was genau das ist, was ich möchte.
Leertaste Davids Tweet an den oberen Bildschirmrand scrollen wird.Um meine Scroll-Snap-Benutzerstile auf Ihrer eigenen Twitter-Timeline auszuprobieren, befolgen Sie diese Schritte:
- Installieren Sie die Stylus-Erweiterung über Firefox Add-ons oder den Chrome Web Store.
- Navigieren Sie zu Ihrer Twitter-Timeline unter https://twitter.com/home.
- Klicken Sie auf das Stylus-Symbol in der Symbolleiste des Browsers und dann auf "diese URL" im Popup-Fenster.
- Stylus öffnet einen Code-Editor in einem neuen Browser-Tab. Kopieren Sie meine Scroll-Snap-Benutzerstile in den Editor und drücken Sie die Schaltfläche "Speichern" in der linken Seitenleiste. Die Stile werden sofort auf Ihre Twitter-Timeline angewendet (kein Neuladen der Seite erforderlich).
- Sie können die Stile jederzeit aktualisieren. Klicken Sie auf das Stylus-Symbol und das Stift-Symbol, um den Editor erneut zu öffnen.
Unfähigkeit, Snapping zu überschreiben
Meine Implementierung von Scroll Snapping für Twitters Timeline hat einen großen Fehler. Wenn ein Tweet höher als der Viewport ist, ist es unmöglich, die Seite zu scrollen, um den unteren Teil dieses Tweets anzuzeigen (z. B. wenn Sie diesen Tweet liken oder retweeten möchten), da der Browser die Seite zwangsweise zu Beginn des Tweets (oder des folgenden Tweets) snappt.
Die Schwere dieses Problems hängt vom Display des Benutzers ab. Wenn Sie Twitters Timeline auf einem großen Desktop-Monitor mit einem niedrigen Seitenzoom-Faktor betrachten, stoßen Sie möglicherweise auf keine Tweets, die höher als der Viewport sind.
Ich habe die CSS Working Group gefragt, ob es möglich wäre, einen Mechanismus hinzuzufügen, der es dem Benutzer ermöglicht, das erzwungene Scroll Snapping des Browsers zu überschreiben. Ich sollte wahrscheinlich erwähnen, dass dieses Problem zumindest theoretisch durch den Wechsel von mandatory zu proximity Snapping gelöst werden könnte. Ich habe proximity Snapping in Chrome und Firefox getestet und es inkonsistent und verwirrend gefunden. Der Browser snappte oft, wenn ich es nicht erwartete, und umgekehrt. Vielleicht stört Twitters Code den proximity-Algorithmus, die Browser sind noch etwas fehlerhaft, oder vielleicht "scrolle ich es falsch", wenn das überhaupt möglich ist. Ich weiß es nicht.
Aber der Hauptgrund, warum ich mich für mandatory Snapping entschieden habe, ist, dass ich Situationen vermeiden wollte, in denen der oberste Tweet nach einem Scroll nur teilweise auf dem Bildschirm zu sehen ist. Die Art des schnellen Scrollens zwischen Tweet-Sätzen, die ich im obigen Video gezeigt habe, ist nur mit mandatory Snapping möglich.
Wenn Sie, wie ich, mandatory Snapping bevorzugen, kann ich Ihnen die folgenden beiden Workarounds für das "hohe Tweet"-Problem vorschlagen:
- Sie können den Tweet auf seiner eigenen Seite öffnen und anschließend zur Timeline zurückkehren.
- Wenn Sie nur die Like- oder Retweet-Buttons klicken möchten, können Sie den Tweet mit Umschalttaste-Klick auswählen und dann L drücken, um ihn zu liken, oder T, gefolgt von Enter, um ihn zu retweeten.
Probleme in Chrome und Safari
Meine Scroll-Snap-Benutzerstile erzeugen merklich unterschiedliche Scroll-Snapping-Verhaltensweisen in Chrome, Safari und Firefox. Diese Unterschiede sind teilweise darauf zurückzuführen, dass die genaue Implementierung des Snapping-Mechanismus dem Browser überlassen bleibt.
Das CSS Scroll Snap Module spezifiziert und erzwingt bewusst keine präzisen Animationen oder physikalischen Eigenschaften zur Durchsetzung von Snap-Positionen; dies bleibt dem User Agent überlassen.
Die aktuelle Version von Safari hat einen Fehler, der verhindert, dass Scroll Snapping auf der Twitter-Timeline korrekt funktioniert. Ich habe diesen Fehler gemeldet.
In Chrome bin ich auf die folgenden Probleme gestoßen:
- Die Scroll-Operationen animieren inkonsistent. Manchmal ist die Animation langsam, manchmal sofort, und manchmal beginnt sie langsam, wird aber dann abgebrochen. Ich fand das irritierend.
- Die Scroll-Operationen animieren im Allgemeinen zu langsam. Ich habe einen Test in Chrome und Firefox durchgeführt (20 Leertaste-Drücke) und es hat 70 % mehr Zeit gedauert, die gleiche Distanz auf meiner Twitter-Timeline in Chrome als in Firefox zurückzulegen (18,5 Sekunden in Chrome vs. 11 Sekunden in Firefox).
- Wenn ich mit dem Trackpad meines Laptops scrolle, flackert die Seite stark. Wenn ich versuche, schnell zu scrollen, indem ich die Leertaste gedrückt halte, scrollt die Seite sehr langsam und oszilliert. Ich vermute, dass beide Probleme vom selben Algorithmus verursacht werden. Es scheint, dass Chrome in diesen Fällen mit sehr hoher Rate neu snappt. Ich habe diesen Fehler gemeldet.
Diese Browser-Bugs und Unterschiede zwischen den Browsern können ein Problem für Websites sein, die Scroll Snapping implementieren möchten. Zum Beispiel könnte ein Webentwickler zögern, weil ihm das Scroll-Snapping-Verhalten in einem bestimmten Browser nicht gefällt. Browser können dieses Problem mildern, indem sie interoperabler werden. Tatsächlich ist Scroll Snap einer der Schwerpunkte der browserübergreifenden Interop 2022-Bemühungen.
Eine weitere Möglichkeit, die Situation zu verbessern, wäre die Einführung neuer CSS-Eigenschaften, die das Scroll Snapping konfigurierbarer machen würden. Dazu könnten die Dauer der Snapping-Animation, die Länge des Proximity-Schwellenwerts für Snapping und ein Mechanismus zum Überschreiben von Mandatory Snapping gehören.
Snappen oder nicht snappen?
Ich habe meine Scroll-Snap-Benutzerstile seit ein paar Wochen auf Twitters Timeline verwendet und möchte nicht zurück. Die Möglichkeit, schnell durch meinen Feed zu blättern, nur mit der Leertaste, ist einfach auf einem anderen Niveau.
Ich betrachte dies jedoch als eine fortgeschrittene Funktion, die wahrscheinlich nicht jedermanns Sache ist. Es gibt einen Grund, warum ich sie nur auf der Timeline (/home Pfad) und nirgendwo sonst auf Twitters Website aktiviert habe. Snapping ist eine signifikante Änderung, wie die Seite scrollt, und es braucht einige Zeit, um sich daran zu gewöhnen. Es kann für einen bestimmten Anwendungsfall großartig funktionieren, aber es kann auch im Weg sein und den Benutzer frustrieren.
Websites mit Feeds sollten daher erwägen, Scroll Snapping nur als optionale Funktion anzubieten, nach sorgfältiger Prüfung und umfangreichen Tests in verschiedenen Browsern und mit verschiedenen Eingabemethoden (Maus, Tastatur, Trackpad, Touchscreen usw.).
Bevor Sie gehen...
Abschließend empfehle ich dringend die Installation und Ausprobieren der Stylus Browsererweiterung. Webentwickler (oder jeder, der CSS kennt) haben die Macht, jede Website in ihrem Browser zu gestalten. Sie können kleine Verbesserungen und Korrekturen auf Ihren Lieblingswebsites anwenden. Ich benutze sie hauptsächlich, um Seiten-Elemente zu verstecken, die ich nervig finde, wie z. B. feste Header, Video-Pop-ups und Abstimmungszählungen.
Wichtiger ist jedoch, dass Stylus es Ihnen ermöglicht, neue CSS-Funktionen auf jeder Website schnell zu testen und bei Bedarf Browser-Fehler zu melden. Dadurch können Sie dazu beitragen, die Webplattform ein wenig besser zu machen.
Das ist ein so cooler CSS-Trick und eine schöne Einführung in die Macht von Benutzerstilen! Ich werde es definitiv selbst ausprobieren!
Benutzerstile können so mächtige Werkzeuge sein, um Websites wieder zugänglich/nutzbar/übersichtlich zu machen, und sollten wirklich mehr bekannt sein. Ähnlich wie bei Ihrem Experiment mit Scroll Snapping auf Twitter für eine bessere Benutzererfahrung habe ich meine eigene benutzerdefinierte Stilvorlage erstellt, um die rechte Seitenleiste von Twitter vollständig zu entfernen. Das sorgt für eine viel friedlichere Twitter-Erfahrung!
Ich verstehe, dass dies nur ein Experiment ist, aber wenn Sie dieses Verhalten wirklich konsistent haben wollen – verwenden Sie die Twitter-Shortcuts (Umschalttaste + ? zum Anzeigen der Liste). Es verwendet wahrscheinlich JS, um seine Arbeit zu erledigen, funktioniert aber gut. Außerdem haben die meisten modernen Websites solche Shortcuts.
Der einzige Tastaturbefehl von Twitter, der meiner Scroll-Snap-Implementierung nahekommt, ist die Taste J, um den nächsten Tweet anzuzeigen und zu fokussieren.
Es ist nicht schlecht, aber für meinen Geschmack zu langsam. Ich möchte, dass der nächste **Tweet-Satz** sichtbar wird, nicht nur der nächste Tweet, damit ich meine Timeline schneller lesen kann.
Eine weitere Sache, die mir daran nicht gefällt, ist, dass das Scrollen sofort erfolgt. Ich würde mir ein sanftes Scrollen beim Sprung von einem Tweet zum nächsten wünschen. Sofortiges Scrollen ist mir zu desorientierend. Natürlich ist es auch ein Problem, wenn das sanfte Scrollen zu langsam ist, also muss die Geschwindigkeit stimmen. Ich denke, die Scroll-Snap-Geschwindigkeit von Firefox liegt für mich sehr nahe am Ideal.
Wie wäre es, wenn man so etwas für überlaufenden Inhalt macht?
Mir wurde klar, dass das Scroll Snapping beeinträchtigt, also hier ist stattdessen dies (was keine wirkliche Veränderung ist, aber immer noch funktioniert)
Wow, ich habe das kürzlich tatsächlich für Hacker-News-Kommentare gemacht. Ich habe am Ende JavaScript verwendet und auf die Pfeiltasten gehört und zum nächsten Element in einer Liste gewechselt.
Das sah wirklich cool aus, also habe ich es auf meinem Blog implementiert, aber ein paar Fehler gefunden.
Unter Chrome ist die Animation wirklich ruckelig. Wenn man Scroll Snap auf proximity setzt, verhält es sich eher wie erforderlich. Unter Firefox ist es reibungslos wie Butter und eher wie erwartet.
Unter Firefox kann ich nicht unter das letzte Element auf der Seite scrollen. Das hindert mich daran, zum Footer zu scrollen.
Wenn Sie keine Erweiterungen installieren können (z. B. aufgrund von Unternehmensrichtlinien), habe ich den Code aus diesem Beitrag in ein Bookmarklet umgewandelt.
Alle im Beitrag genannten Einschränkungen gelten.