Tworzenie komponentu Relacje

Podstawowe informacje o tym, jak stworzyć aplikację podobną do Instagrama w przeglądarce.

Adam Argyle

W tym poście chcę podzielić się z Wami swoimi przemyśleniami na temat tworzenia komponentu Stories dla internetu, 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 UX Relacji to relacje na Snapchacie i Relacje na 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. Klikając po prawej stronie urządzenia, użytkownik przejdzie do następnej relacji tego znajomego. Przesuwając palcem w prawo, użytkownik przejdzie do profilu innego znajomego. Komponent artykułu jest podobny do karuzeli, ale umożliwia poruszanie się po wielowymiarowej tablicy, a nie po jednowymiarowej tablicy. 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 ramkami, a w każdej z nich znajduje się wiele kart z cyjanowymi ramkami. 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 rzecz biorąc, dzięki kilku ważnym funkcjom platformy internetowej utworzenie tego komponentu jest łatwe do opracowania. Omówmy je!

Siatka CSS

Nasz układ okazał się niezbyt wymagający dla CSS Grid, ponieważ ma ona kilka skutecznych sposobów na zarządzanie treściami.

Układ Znajomi

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 odpowiada na 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. Nawiązując do przykładowych relacji na Snapchacie i Relacjach na Instagramie, każda kolumna będzie zawierać opowieść 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 ułożenia HTML-a dla każdej historii znajomego, tworząc dynamiczny i elastyczny kontener do przewijania. Dzięki siatce mogliśmy scentralizować ten efekt.

Układanie

W przypadku każdego znajomego potrzebujemy jego relacji w stanie gotowym do podziału na strony. Przygotowując się do animacji i innych zabawnych wzorców, wybrałem 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 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. Świetne informacje o tym, jak z nich korzystać, znajdziesz w przewodniku Przedstawiamy CSS Scroll Snap Points autorstwa Sarah Drasner.

Przewijanie poziome bez stylów scroll-snap-points i bez nich. 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 przewijaniem określa zachowanie przyciągania.
dziecko
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 Dzieci stawiają sobie za cel przyciąganie uwagi.

Wybrałem Scroll Snap Points z kilku powodów:

  • Bezpłatny dostęp. Stany specyfikacji punktów przyciągania przewijania, w ramach których naciskanie klawiszy strzałki w lewo i strzałki w prawo powinny domyślnie poruszać się między punktami przyciągania.
  • Rosnąca specyfikacja. Specyfikacja punktów załamania 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ądarką. 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ć zawartość okna modalnego, gdy nagle zaczęła się przewijać zawartość tego okna? overscroll-behaviorumożliwia deweloperowi zablokowanie przewijania i utrzymanie go w stanie nieaktywnego. 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 włączam ją w ramach niemal 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 i dotrze do końca zestawu opowieści znajomego, czas na przejście do następnego znajomego w ustawionym punkcie przewijania. Dzięki JavaScriptowi mogliśmy odwołać się do następnego znajomego i poprosić o przewinięcie go do widoku. Podstawy są świetnie opisane. 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 zastosowanie

Skoro już wiesz, jak to robię, jak Ty?! Wybierzmy różne podejścia i poznajmy sposoby budowania obecności w internecie. 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