Tworzenie komponentu Relacje

Podstawowe informacje o tym, jak stworzyć w internecie funkcję podobną do Relacji na Instagramie.

Adam Argyle

W tym poście chcę podzielić się przemyśleniami na temat tworzenia komponentu Stories na potrzeby internetu, który jest elastyczny, obsługuje nawigację za pomocą klawiatury i działa w różnych przeglądarkach.

Wersja demonstracyjna

Jeśli wolisz praktyczną demonstrację tworzenia tego komponentu relacji, zapoznaj się z ćwiczeniami z programowania dotyczącymi komponentu relacji.

Jeśli wolisz film, obejrzyj tę wersję posta w YouTube:

Przegląd

Dwa popularne przykłady interfejsu relacji to relacje na Snapchacie i Instagramie (nie wspominając o flotach). Ogólnie rzecz biorąc, relacje to wzorzec nawigacji oparty na klikaniu, który jest dostępny tylko na urządzeniach mobilnych i umożliwia przeglądanie wielu subskrypcji. Na przykład na Instagramie użytkownicy otwierają relację znajomego i przeglądają zdjęcia w niej zawarte. Zazwyczaj robią to w przypadku wielu znajomych naraz. Gdy użytkownik kliknie prawą stronę urządzenia, przejdzie do kolejnej historii znajomego. Przesunięcie w prawo powoduje przejście do innego znajomego. Komponent Story jest dość 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 znajduje się stos kart z fioletowymi obramowaniami, a w każdej z nich jest od 1 do wielu kart z cyjanowymi obramowaniami. Lista na liście.
1. karuzela znajomych
2. „ułożona” karuzela historii
👍 Lista na liście, czyli tablica wielowymiarowa

Wybieranie odpowiednich narzędzi

Ogólnie rzecz biorąc, ten komponent był dość prosty w budowie dzięki kilku kluczowym funkcjom platformy internetowej. Przyjrzyjmy się im.

CSS Grid

Okazało się, że układ nie jest trudny do zrealizowania za pomocą siatki CSS, ponieważ ma ona kilka skutecznych sposobów na zarządzanie treścią.

Układ znajomych

Główny komponent opakowujący .stories to przewijany w poziomie widok 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;
}
Używanie trybu urządzenia w Narzędziach deweloperskich w Chrome do wyróżniania kolumn utworzonych przez siatkę.

Przyjrzyjmy się bliżej układowi grid:

  • Na urządzeniach mobilnych wypełniamy widoczny obszar za pomocą elementów 100vh i 100vw, a na komputerach ograniczamy rozmiar.
  • / oddziela szablony wierszy i kolumn.
  • auto-flow oznacza grid-auto-flow: column
  • Szablon automatycznego przepływu to 100%, czyli w tym przypadku szerokość okna przewijania.

Na telefonie komórkowym możesz to sobie wyobrazić tak, że rozmiar wiersza to wysokość widocznego obszaru, a każda kolumna to szerokość widocznego obszaru. W przykładzie relacji na Snapchacie i Instagramie każda kolumna będzie relacją znajomego. Chcemy, aby historie znajomych były widoczne poza widocznym obszarem, aby można było je przewijać. Grid utworzy tyle kolumn, ile będzie potrzebne do rozmieszczenia kodu HTML dla każdej historii znajomego, tworząc dynamiczny i elastyczny kontener przewijania. Siatka umożliwiła nam scentralizowanie całego efektu.

Układanie w stos

W przypadku każdego znajomego musimy mieć jego historie w stanie gotowym do podziału na strony. Przygotowując się do animacji i innych ciekawych wzorów, wybrałem stos. Mówiąc „ułożone”, mam na myśli widok z góry, jak na kanapkę, a nie z boku.

Za pomocą siatki CSS możemy zdefiniować siatkę z 1 komórką (czyli kwadrat), w której wiersze i kolumny mają alias ([story]), a następnie przypisać do tej przestrzeni z aliasem poszczególne elementy podrzędne:

.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 kolejność nakładania się elementów jest kontrolowana przez kod HTML, a wszystkie elementy pozostają w przepływie. Zwróć uwagę, że nie musieliśmy nic robić z pozycjonowaniem absolute ani z z-index, a także nie musieliśmy zaznaczać poprawnych odpowiedzi za pomocą height: 100% ani width: 100%. Siatka nadrzędna określa już rozmiar widocznego obszaru obrazu relacji, więc żaden z tych komponentów relacji nie musi wypełniać tego obszaru.

Punkty przyciągania przewijania CSS

Specyfikacja CSS Scroll Snap Points ułatwia blokowanie elementów w obszarze widoku podczas przewijania. Zanim pojawiły się te właściwości CSS, trzeba było używać JavaScriptu, a to było co najmniej skomplikowane. Więcej informacji o tym, jak ich używać, znajdziesz w artykule Introducing CSS Scroll Snap Points autorstwa Sary Drasner.

Przewijanie poziome bez stylów scroll-snap-points i z nimi. Bez tej funkcji użytkownicy mogą przewijać stronę w normalny sposób. 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 poza krawędź określa zachowanie przyciągania.
dziecko
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 Dzieci mogą włączyć funkcję bycia celem migawki.

Wybrałem punkty przyciągania przewijania z kilku powodów:

  • Bezpłatne ułatwienia dostępu Specyfikacja punktów przyciągania przewijania mówi, że naciśnięcie klawiszy strzałki w lewo i strzałki w prawo powinno domyślnie powodować przechodzenie między punktami przyciągania.
  • Rozwijająca się specyfikacja. Specyfikacja punktów przyciągania przewijania jest stale wzbogacana o nowe funkcje i ulepszenia, co oznacza, że mój komponent Stories będzie prawdopodobnie coraz lepszy.
  • Łatwość wdrożenia Punkty przyciągania przewijania są praktycznie stworzone do przypadku użycia przewijania w poziomie na urządzeniach dotykowych.
  • Swobodna bezwładność 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

Testy przeprowadziliśmy w przeglądarkach Opera, Firefox, Safari i Chrome oraz na urządzeniach z Androidem i iOS. Oto krótkie podsumowanie funkcji internetowych, w przypadku których znaleźliśmy różnice w możliwościach i obsłudze.

Niektóre usługi porównywania cen nie zostały jednak zastosowane, więc niektóre platformy nie korzystają obecnie z optymalizacji UX. Podobało mi się, że nie musiałem zarządzać tymi funkcjami, i mam pewność, że w końcu pojawią się one w innych przeglądarkach i na innych platformach.

scroll-snap-stop

Karuzela była jednym z głównych przypadków użycia UX, które doprowadziły do powstania specyfikacji CSS Scroll Snap Points. W przeciwieństwie do Stories karuzela nie musi się zatrzymywać na każdym obrazie po interakcji użytkownika. Szybkie przewijanie karuzeli może być w porządku lub nawet zalecane. Historie najlepiej przeglądać pojedynczo i właśnie to umożliwia scroll-snap-stop.

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

W momencie pisania tego posta funkcja scroll-snap-stop jest obsługiwana tylko w przeglądarkach opartych na Chromium. Sprawdź zgodność z przeglądarką, aby poznać aktualne informacje. Nie jest to jednak czynnik blokujący. Oznacza to tylko, że w nieobsługiwanych przeglądarkach użytkownicy mogą przypadkowo pominąć znajomego. Użytkownicy będą musieli zachować większą ostrożność lub będziemy musieli napisać kod JavaScript, aby pominięty znajomy nie był oznaczany jako obejrzany.

Jeśli Cię to interesuje, więcej informacji znajdziesz w specyfikacji.

overscroll-behavior

Czy zdarzyło Ci się kiedyś przewijać okno modalne, a potem nagle zacząć przewijać treści znajdujące się za nim? overscroll-behavior umożliwia deweloperowi przechwycenie przewijania i uniemożliwienie jego zakończenia. Sprawdzi się na różne okazje. Komponent Moje historie używa go, aby zapobiec opuszczeniu 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ługiwały tej funkcji, i to jest w porządku. Użytkownicy ci będą mogli przewijać stronę tak jak dotychczas i mogą nawet nie zauważyć tego ulepszenia. Jestem wielkim fanem tej funkcji i lubię ją uwzględniać w niemal wszystkich implementowanych przeze mnie funkcjach przewijania. To nieszkodliwy dodatek, który może tylko poprawić wygodę użytkowników.

scrollIntoView({behavior: 'smooth'})

Gdy użytkownik kliknie lub dotknie ekranu i dotrze do końca zestawu historii znajomego, należy przejść do następnego znajomego w zestawie punktów przyciągania przewijania. Za pomocą JavaScriptu mogliśmy odwołać się do następnego znajomego i poprosić o przewinięcie go do widoku. Podstawowa obsługa jest świetna – każda przeglądarka przewijała go do widoku. Nie każda przeglądarka to robiła'smooth'. Oznacza to tylko, że element został przewinięty do widoku, a nie przyciągnięty.

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

Safari to jedyna przeglądarka, która nie obsługuje tutaj: behavior: 'smooth'. Sprawdź zgodność z przeglądarką, aby poznać aktualne informacje.

Praktyczne

Teraz, gdy wiesz, jak to zrobiłem, jak Ty byś to zrobił? Urozmaićmy nasze podejście i poznajmy wszystkie sposoby tworzenia stron internetowych. Utwórz glitch, wyślij mi tweeta z Twoją wersją, a ja dodam ją do sekcji Remiksy społeczności poniżej.

Remiksy społeczności