Tworzenie komponentu Relacje

Podstawowy przegląd sposobów tworzenia w internecie treści podobnych do relacji na Instagramie.

Adam Argyle

W tym poście chcę podzielić się z Wami swoimi przemyśleniami na temat tworzenia komponentu Stories dla sieci, który jest responsywny, obsługuje nawigację za pomocą klawiatury i działa we wszystkich przeglądarkach.

Demo

Jeśli wolisz samodzielnie tworzyć ten komponent relacji, zapoznaj się z ćwiczeniem z programowania poświęconym komponentowi relacji.

Jeśli wolisz film, oto wersja tego posta w YouTube:

Omówienie

Dwa popularne przykłady interfejsu relacji to relacje na Snapchacie i Instagramie (nie wspominając o flotach). W ogólnych warunkach UX relacje to zwykle przeznaczony tylko na urządzenia mobilne wzór nawigacji oparty na dotykaniu, który umożliwia korzystanie z wielu subskrypcji. Na przykład w Instagramie użytkownicy otwierają relację znajomego i przeglądają zdjęcia w niej. Zwykle robią to z wielu przyjaciółmi naraz. Kliknięcie po prawej stronie urządzenia powoduje przejście do następnej relacji tego znajomego. Przesuwając palcem w prawo, użytkownik przejdzie do profilu innego znajomego. Komponent Story jest podobny do karuzeli, ale umożliwia poruszanie się po tablicy wielowymiarowej, a nie jednowymiarowej. To tak, jakby w każdej karuzeli była kolejna karuzela. 🤯

Wizualizacja wielowymiarowej tablicy za pomocą kart. Od lewej do prawej: stos kart z fioletowymi obramowaniami, a w każdej z nich znajduje się wiele kart z błękitnozielonym obramowaniem. Lista w liście.
Pierwsza karuzela ze znajomymi
Druga karuzela ze „złożonymi” historiami
👍 Lista w liście, czyli tablica wielowymiarowa

Wybór odpowiednich narzędzi do danego zadania

Ogólnie tworzenie tego komponentu było dość proste dzięki kilku kluczowym funkcjom platformy internetowej. Porozmawiajmy o nich.

Siatka CSS

Nasz układ okazał się dla CSS Grid niezbyt trudnym zadaniem, ponieważ zawiera on kilka skutecznych sposobów na zarządzanie treściami.

Układ znajomych

Główny element opakowujący .stories to widok przewijania poziomego zoptymalizowany pod kątem urządzeń mobilnych:

.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;
}
Za pomocą Trybu urządzenia w Narzędziach deweloperskich w Chrome możesz wyróżnić kolumny utworzone przez siatkę.

Przyjrzyjmy się temu układowi grid:

  • Wypełniamy widoczny obszar na urządzeniach mobilnych za pomocą 100vh i 100vw oraz ograniczamy rozmiar na komputerach.
  • / oddziela szablony wierszy i kolumn
  • auto-flow to grid-auto-flow: column
  • Szablon autoflow to 100%, który w tym przypadku jest równy szerokości okna przewijania.

Na telefonie komórkowym rozmiar wiersza odpowiada wysokości widocznego obszaru, a każda kolumna – jego szerokości. W przypadku relacji na Snapchacie i relacji na Instagramie każda kolumna będzie relacją znajomego. Chcemy, aby historie znajomych były widoczne poza obszarem widoku, aby można było je przewijać. Użytkownik będzie widzieć tyle kolumn, ile będzie potrzebnych do wyświetlenia Twojego kodu HTML w przypadku każdej historii znajomego. Dzięki temu stworzymy dynamiczny i responsywny kontener z możliwością przewijania. Dzięki temu mogliśmy scentralizować cały efekt.

Układanie

W przypadku każdego znajomego potrzebujemy jego relacji w stanie gotowym do podziału na strony. W ramach przygotowań do animacji i innych zabawnych wzorów wybrałam stos. Gdy mówię o składaniu, mam na myśli spojrzenie na kanapkę z góry, a nie z boku.

Dzięki siatce CSS możemy zdefiniować siatkę pojedynczej komórki (czyli kwadratu), w której wiersze i kolumny mają ten sam alias ([story]), a następnie każde dziecko zostanie przypisane do tej przestrzeni pojedynczej komórki z aliasem:

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

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

Dzięki temu nasz kod HTML będzie kontrolować kolejność elementów i utrzymywać ich płynność. Zwróć uwagę, że nie musisz nic zmieniać w pozycji absolute ani z-index i nie musisz prawidłowo zaznaczać pól height: 100% ani width: 100%. Siatka nadrzędna określiła już rozmiar widocznego obszaru obrazu relacji, więc żaden z tych komponentów relacji nie musiał być informowany o konieczności wypełnienia tego obszaru.

Punkty zacięcia przewijania w CSS

Specyfikacja punktów przyciągania podczas przewijania w CSS ułatwia blokowanie elementów w widocznym obszarze podczas przewijania. Zanim pojawiły się te właściwości CSS, trzeba było używać JavaScriptu, co było… delikatnie mówiąc trudne. Aby dowiedzieć się więcej o tym, jak ich używać, przeczytaj artykuł Introducing CSS Scroll Snap Points (ang. „Wprowadzenie do punktów skoku w przewijaniu w CSS”) autorstwa Sarah Drasner.

Zwijanie poziome bez stylów scroll-snap-points i z nimi. Bez niego użytkownicy mogą swobodnie przewijać jak zwykle. Dzięki temu przeglądarka delikatnie spoczywa na każdym elemencie.
element nadrzędny
.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;
}
 Element nadrzędny z overscrollem określa zachowanie snapowania.
dziecko
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 Dzieci mogą wyrazić zgodę na to, aby stać się celem snapa.

Wybrałem punkty zaczepienia przewijania z kilku powodów:

  • Bezpłatny dostęp. Specyfikacja punktów wiązania podczas przewijania określa, że naciśnięcie strzałki w lewo i strzałki w prawo powinno domyślnie wiązać się z przejściem przez punkty wiązania.
  • Rosnąca specyfikacja. Specyfikacja punktów uchwytu podczas przewijania jest stale wzbogacana o nowe funkcje i ulepszenia, co oznacza, że od teraz komponent Stories będzie prawdopodobnie jeszcze lepszy.
  • Łatwość implementacji. Punkty zaczepienia przewijania są przeznaczone do stosowania w przypadku użycia, w którym naciskanie przycisków jest najważniejsze.
  • Bezwład w stylu platformy. Każda platforma będzie przewijać i zatrzymywać się w swoim stylu, w przeciwieństwie do znormalizowanej bezwładności, która może mieć dziwny styl przewijania i zatrzymywania.

Zgodność z różnymi przeglądarkami

Przetestowaliśmy je w przeglądarkach Opera, Firefox, Safari i Chrome oraz na Androidzie i iOS. Oto krótki przegląd funkcji internetowych, w których przypadku stwierdziliśmy różnice w możliwościach i obsługiwanych funkcjach.

Niektóre reguły CSS nie zostały jednak zastosowane, więc niektóre platformy nie mają obecnie optymalizacji UX. Nie musiałem zarządzać tymi funkcjami i mam nadzieję, że wkrótce będą dostępne w innych przeglądarkach i na innych platformach.

scroll-snap-stop

Karuzele były jednym z głównych przypadków użycia UX, które zainspirowały nas do stworzenia specyfikacji punktów zatrzymania ładowania CSS. W przeciwieństwie do Stories karuzela nie musi zawsze zatrzymywać się na każdym obrazie po interakcji użytkownika. Może to być dopuszczalne lub nawet pożądane, aby użytkownicy mogli szybko przewijać karuzel. Z drugiej strony, w przypadku Stories lepiej jest poruszać się po nich pojedynczo, a scroll-snap-stop właśnie to umożliwia.

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

W momencie pisania tego posta scroll-snap-stop była obsługiwana tylko w przeglądarkach opartych na Chromium. Aby uzyskać więcej informacji, zapoznaj się z zgodnością z przeglądarkami. Nie jest to jednak przeszkoda. Oznacza to tylko, że w nieobsługiwanych przeglądarkach użytkownicy mogą przypadkowo pominąć znajomego. Użytkownicy będą musieli być bardziej ostrożni albo będziemy musieli napisać kod JavaScript, aby mieć pewność, że pominięcie znajomego nie zostanie oznaczone jako obejrzone.

Jeśli chcesz, możesz dowiedzieć się więcej z specyfikacji.

overscroll-behavior

Czy zdarzyło Ci się kiedyś przewijać modal, gdy nagle zacząłeś(-aś) przewijać treści znajdujące się za tym modalem? overscroll-behavior pozwala deweloperowi zablokować przewijanie i utrzymać je w stanie nieaktywnej. Pasuje na każdą okazję. Służą one do zapobiegania opuszczaniu komponentu przez dodatkowe gesty przesuwania i przewijania.

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

Safari i Opera to 2 przeglądarki, które nie obsługują tego, ale to zupełnie w porządku. Ci użytkownicy będą mogli korzystać z przewijania, do którego są przyzwyczajeni, i być może nigdy nie zauważą tej funkcji. Osobiście jestem wielkim fanem tej funkcji i umieszczam ją w ramach prawie każdej implementowanej przeze mnie funkcji przewijania. Jest to nieszkodliwe rozszerzenie, które może tylko poprawić UX.

scrollIntoView({behavior: 'smooth'})

Gdy użytkownik kliknie lub dotknie, aby przejść do końca zestawu relacji znajomego, nadszedł czas na przejście do następnego znajomego w ramach zestawu punktów przewijania. Za pomocą JavaScriptu udało nam się wskazać kolejnego znajomego i poprosić o przewinięcie do niego. Podstawy są świetnie obsługiwane; każda przeglądarka wyświetla je po przewinięciu. Nie wszystkie przeglądarki to jednak zrobiły. 'smooth' Oznacza to tylko, że zamiast przyciągania elementu do krawędzi, został on przewinięty do widoku.

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

Safari była jedyną przeglądarką, która nie obsługiwała behavior: 'smooth'. Aby uzyskać więcej informacji, zapoznaj się z zgodnością z przeglądarkami.

Praktyczne ćwiczenia

Teraz, gdy już wiesz, jak to zrobić, jak Ty to zrobisz? Zróżnicuj swoje podejścia i poznaj wszystkie sposoby tworzenia stron internetowych. Utwórz Glitch, wyślij mi tweeta ze swoją wersją, a ja dodam ją do sekcji Remiksy społeczności poniżej.

Remiksy społeczności