Komponente „Stories“ erstellen

Eine grundlegende Übersicht dazu, wie Sie im Web eine Funktion erstellen, die Instagram Stories ähnelt.

Adam Argyle

In diesem Beitrag möchte ich meine Gedanken zum Erstellen einer responsiven Stories-Komponente für das Web teilen, die die Tastaturnavigation unterstützt und plattformübergreifend funktioniert.

Demo

Wenn Sie sich lieber eine praktische Demonstration zum Erstellen dieser Stories-Komponente ansehen möchten, sehen Sie sich das Codelab zur Stories-Komponente an.

Wenn du lieber ein Video ansiehst, findest du hier eine YouTube-Version dieses Beitrags:

Übersicht

Zwei beliebte Beispiele für die User Experience von Stories sind Snapchat Stories und Instagram Stories (und Flotten ganz zu schweigen). Im Allgemeinen sind Stories ein nur für Mobilgeräte verfügbares, auf Tippen basierendes Muster zum Navigieren zwischen mehreren Abos. Auf Instagram öffnen Nutzer beispielsweise die Story eines Freundes und sehen sich die darin enthaltenen Bilder an. Normalerweise machen sie so viele Freunde gleichzeitig. Durch Tippen auf die rechte Seite des Geräts gelangt ein Nutzer zur nächsten Story des Freundes. Durch Wischen nach rechts springt ein Nutzer zu einem anderen Freund. Eine Story-Komponente ähnelt einem Karussell, ermöglicht aber die Navigation in einem mehrdimensionalen Array im Gegensatz zu einem eindimensionalen Array. Es ist, als wäre in jedem Karussell ein weiteres Karussell. 🤯

Visualisiertes mehrdimensionales Array mithilfe von Karten. Von links nach rechts ist ein Stapel von Karten mit lila Rahmen zu sehen. Auf jeder Karte befinden sich eine oder mehrere Karten mit türkisfarbenem Rahmen. Liste in einer Liste
Erstes Karussell mit Freunden
Zweites „gestapeltes“ Karussell mit Stories
👍 Liste in einer Liste, auch als mehrdimensionales Array bezeichnet

Die richtigen Tools für die Aufgabe auswählen

Insgesamt fand ich diese Komponente dank einiger wichtiger Funktionen der Webplattform ziemlich einfach zu erstellen. Sehen wir uns das an.

CSS-Raster

Unser Layout stellte für CSS Grid keine große Herausforderung dar, da es einige leistungsstarke Möglichkeiten zur Verwaltung von Inhalten bietet.

Layout für Freunde

Der primäre .stories-Komponenten-Wrapper ist ein horizontaler Scrollview für Mobilgeräte:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
Mit dem Gerätemodus der Chrome-Entwicklertools die Spalten hervorheben, die mit Grid erstellt wurden

Sehen wir uns das grid-Layout genauer an:

  • Auf Mobilgeräten wird der Darstellungsbereich explizit mit 100vh und 100vw ausgefüllt und die Größe auf Desktop-Computern wird beschränkt.
  • / trennt unsere Zeilen- und Spaltenvorlagen
  • auto-flow wird als grid-auto-flow: column gelesen.
  • Die Vorlage für den automatischen Ablauf ist 100%, was in diesem Fall der Breite des Scrollfensters entspricht.

Auf einem Mobiltelefon entspricht die Zeilengröße der Höhe des Darstellungsbereichs und jeder Spalte die Breite des Darstellungsbereichs. Anknüpfend an das Beispiel für Snapchat- und Instagram-Storys enthält jede Spalte die Story eines Freundes. Wir möchten, dass die Stories von Freunden außerhalb des Darstellungsbereichs fortgesetzt werden, damit wir etwas zum Scrollen haben. Grid erstellt so viele Spalten, wie für das Layout deiner HTML-Datei für jede Story eines Freundes erforderlich sind. So entsteht ein dynamischer und responsiver Scrollcontainer. Mithilfe des Rasters konnten wir den gesamten Effekt zentralisieren.

Stapeln

Für jeden Freund benötigen wir seine Storys in einem Zustand, der für die Paginierung geeignet ist. Zur Vorbereitung auf die Animation und andere lustige Muster habe ich einen Stapel ausgewählt. Wenn ich von Stapeln spreche, meine ich, dass Sie auf ein Sandwich herabblicken, nicht von der Seite darauf schauen.

Mit dem CSS-Raster können wir ein einzelliges Raster (also ein Quadrat) definieren, wobei die Zeilen und Spalten einen Alias ([story]) teilen. Dann wird jedes untergeordnete Element diesem einzelnen Zellenbereich mit Alias zugewiesen:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

So wird die Stapelreihenfolge über die HTML-Datei gesteuert und alle Elemente bleiben im Fluss. Beachten Sie, dass wir weder die Positionierung mit absolute noch z-index anpassen noch mit height: 100% oder width: 100% die Box korrigieren mussten. Das übergeordnete Raster hat bereits die Größe des Story-Bild-Viewports definiert, sodass keine dieser Story-Komponenten angewiesen werden musste, ihn zu füllen.

CSS-Scroll-Snap-Punkte

Mit der CSS-Spezifikation für Scroll-Snap-Punkte können Sie Elemente beim Scrollen ganz einfach im Darstellungsbereich fixieren. Bevor es diese CSS-Eigenschaften gab, mussten Sie JavaScript verwenden. Das war gelinde gesagt etwas schwierig. In Introducing CSS Scroll Snap Points von Sarah Drasner finden Sie eine ausführliche Anleitung zur Verwendung dieser Funktionen.

Horizontales Scrollen ohne und mit scroll-snap-points-Stilen. Ohne sie können Nutzer wie gewohnt scrollen. Damit ruht der Browser sanft auf jedem Element.
Übergeordnetes Element
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
 Übergeordnetes Element mit Overscroll definiert das Snap-Verhalten.
Kind
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 Kinder müssen zustimmen, dass sie als Snap-Ziel ausgewählt werden können.

Ich habe aus mehreren Gründen Scroll-Snap-Punkte ausgewählt:

  • Kostenloser Zugang. In der Spezifikation für Scroll-Snap-Punkte wird angegeben, dass beim Drücken der Tasten Linkspfeil und Rechtspfeil standardmäßig zwischen den Snap-Punkten gewechselt werden soll.
  • Eine wachsende Spezifikation: Die Spezifikation für Scroll-Snap-Punkte wird ständig um neue Funktionen und Verbesserungen erweitert. Das bedeutet, dass meine Stories-Komponente wahrscheinlich immer besser wird.
  • Einfache Implementierung Scroll-Snap-Punkte sind praktisch für den Touch-orientierten Anwendungsfall der horizontalen Paginierung konzipiert.
  • Inertie im Stil einer frei stehenden Plattform. Jede Plattform scrollt und ruht in ihrem eigenen Stil, im Gegensatz zur normalisierten Trägheit, die ein unheimliches Scrollen und Pausieren verursachen kann.

Browserübergreifende Kompatibilität

Die Tests wurden für Opera, Firefox, Safari und Chrome sowie für Android und iOS durchgeführt. Im Folgenden finden Sie eine kurze Übersicht über die Webfunktionen, bei denen wir Unterschiede bei den Funktionen und der Unterstützung festgestellt haben.

Einige CSS-Regeln wurden jedoch nicht angewendet, sodass einige Plattformen derzeit keine UX-Optimierungen erhalten. Ich fand es toll, dass ich diese Funktionen nicht verwalten musste, und bin zuversichtlich, dass sie irgendwann auch in anderen Browsern und auf anderen Plattformen verfügbar sein werden.

scroll-snap-stop

Karussells waren einer der wichtigsten UX-Anwendungsfälle, die zur Erstellung der CSS-Spezifikation für Scroll-Snap-Punkte geführt haben. Im Gegensatz zu Stories muss ein Karussell nicht immer bei jedem Bild anhalten, nachdem ein Nutzer damit interagiert hat. Es kann in Ordnung oder sogar erwünscht sein, schnell durch das Karussell zu scrollen. In Stories lässt sich hingegen am besten nacheinander navigieren. Genau das bietet scroll-snap-stop.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Zum Zeitpunkt der Veröffentlichung dieses Beitrags wird scroll-snap-stop nur in Chromium-basierten Browsern unterstützt. Aktuelle Informationen zur Browserkompatibilität Das ist aber kein Hindernis. Das bedeutet nur, dass Nutzer in nicht unterstützten Browsern versehentlich einen Freund überspringen können. Nutzer müssen also vorsichtiger sein oder wir müssen JavaScript schreiben, damit ein übersprungener Freund nicht als angesehen markiert wird.

Weitere Informationen finden Sie in der Spezifikation.

overscroll-behavior

Haben Sie schon einmal durch ein Modalfenster gescrollt und plötzlich die Inhalte dahinter gesehen? Mit overscroll-behavior kann der Entwickler das Scrollen sperren, sodass es nie verlassen wird. Sie eignet sich für alle möglichen Anlässe. In der Komponente „Meine Geschichten“ wird sie verwendet, um zu verhindern, dass Nutzer durch Wischen oder Scrollen die Komponente verlassen.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari und Opera waren die beiden Browser, die dies nicht unterstützten. Das ist völlig in Ordnung. Diese Nutzer erhalten wie gewohnt ein Overscroll-Erlebnis und bemerken diese Verbesserung vielleicht gar nicht. Ich persönlich bin ein großer Fan und füge sie fast jeder von mir implementierten Overscroll-Funktion hinzu. Es ist eine harmlose Ergänzung, die nur zu einer verbesserten UX führen kann.

scrollIntoView({behavior: 'smooth'})

Wenn ein Nutzer auf einen Story-Beitrag tippt oder klickt und das Ende der Storys eines Freundes erreicht hat, ist es an der Zeit, zum nächsten Freund in der Liste der Scroll-Snap-Punkte zu wechseln. Mit JavaScript konnten wir auf den nächsten Freund verweisen und anfordern, dass er sichtbar ist. Die Unterstützung der Grundlagen ist großartig; in jedem Browser wurde es in den Blick gescrollt. Aber nicht alle Browser haben das getan 'smooth'. Das bedeutet lediglich, dass es in den Blick gescrollt wird, anstatt angedockt zu werden.

element.scrollIntoView({
  behavior: 'smooth'
})

Safari war der einzige Browser, der behavior: 'smooth' hier nicht unterstützte. Aktuelle Informationen zur Browserkompatibilität

Praxisorientiert

Jetzt, da Sie wissen, wie ich das gemacht habe, wie würden Sie es machen? Lassen Sie uns unsere Ansätze diversifizieren und alle Möglichkeiten kennenlernen, wie man im Web entwickeln kann. Erstelle einen Glitch, tweete mir deine Version und ich füge sie unten im Abschnitt Community-Remixe hinzu.

Remixe der Community