Ratgeber: Einrastende Karten mit ausreichendem Abstand prüfen

Eine Kartenansicht kann beim Scrollen an einzelnen Einträgen einrasten. Das wirkt ordentlich, wird aber unpraktisch, wenn Überschriften an einer Kante kleben oder wichtige Textteile schwer erreichbar sind. Für einen Webseitenauftrag sollte deshalb die Lesbarkeit der Karten Vorrang vor einem besonders auffälligen Effekt erhalten. Der folgende Ratgeber behandelt eine bestehende CSS-Eigenschaft und einen eigenen Prüfvorschlag.

Den Abstand fachlich einordnen

MDN beschreibt scroll-margin-top als oberen Zusatzabstand der Fläche, die für das Einrasten eines Elements verwendet wird. Die Eigenschaft nimmt einen Längenwert an und wird nicht vererbt. Sie gehört zum Zusammenspiel der Scroll-Snap-Regeln. Sie fügt keine neue redaktionelle Leerzeile in den Kartentext ein und ist kein Ersatz für einen verständlichen Inhaltsaufbau.

Lass im Bauauftrag erklären, welches Element scrollt und welche Karten einrasten sollen. Ohne diese Zuordnung kann eine Änderung am falschen Element wirkungslos bleiben, obwohl im Stylesheet ein plausibler Wert steht.

Eine kleine Lernsammlung als Beispiel

Bereite drei fiktive Lernkarten vor. Die erste besitzt eine kurze Überschrift und einen Satz, die zweite zwei Absätze, die dritte ein Bild mit Erklärung. Die gewünschte Ansicht soll jede Überschrift in Ruhe lesbar zeigen. Halte als Gestaltungsziel einen sichtbaren Abstand oberhalb der Karte fest; ein konkreter Testwert ist zunächst nur eine Entwurfsentscheidung.

Fordere zusätzlich, dass auch der letzte Satz einer langen Karte erreichbar bleibt. Es wäre wenig gewonnen, wenn der Anfang schön einrastet, die Bedienung aber beim Lesen immer wieder an eine andere Position springt. Der Effekt muss sich am längsten realistischen Inhalt bewähren.

Verschiedene Bedienwege ausprobieren

Plane die Prüfung mit Mausrad, Tastatur und einer schmalen Touchansicht. Vergrößere dabei die Schrift. Kontrolliere nach jeder Variante Überschrift, vollständigen Inhalt und den Übergang zur nächsten Karte. Protokolliere getrennt, ob etwas verdeckt wird oder ob das Scrollen nur ungewohnt wirkt. Das macht eine spätere Korrektur gezielter.

Den Effekt begründet freigeben

Vergleiche die Ansicht auch ohne Einrasten. Wenn normale Bewegung für den konkreten Inhalt besser funktioniert, darf der Bauauftrag die einfachere Variante vorsehen. Eine CSS-Möglichkeit verpflichtet nicht zu ihrem Einsatz. Freigegeben wird die Umsetzung erst, wenn die vorbereiteten Karten bei den vorgesehenen Bildschirmgrößen vollständig lesbar und zuverlässig erreichbar bleiben.