Tworzenie komponentu Relacje

Podstawowe informacje o tym, jak tworzyć w internecie relacje podobne do relacji na Instagramie.

Adam Argyle

W tym poście pokażę, jak stworzyć komponent Relacji, który jest elastyczny, obsługuje nawigację za pomocą klawiatury i działa w różnych przeglądarkach.

Prezentacja

Jeśli wolisz praktyczną prezentację samodzielnego tworzenia tego komponentu Relacje, zapoznaj się z ćwiczeniami z programowania komponentu Relacje.

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

Przegląd

Dwa popularne przykłady interfejsu Relacji to relacje na Snapchacie i Relacje na Instagramie (nie mówiąc już o flotach). Ogólnie rzecz biorąc, relacje mają zwykle pojawiać się tylko na urządzeniach mobilnych i ułatwiają poruszanie się po wielu subskrypcjach. Na przykład na Instagramie użytkownicy otwierają historię znajomego i przeglądają znajdujące się w niej zdjęcia. Zwykle robią to wielu znajomych jednocześnie. Po dotknięciu prawej części urządzenia użytkownik przejdzie do następnego artykułu. Przesunięcie w prawo powoduje przejście do innego znajomego. Komponent Artykuł jest dość podobny do karuzeli, ale umożliwia poruszanie się po tablicy wielowymiarowej, a nie w tablicy jednowymiarowej. To tak, jakby w każdej karuzeli znajdowała się karuzela. 🤯

Zwizualizowana wielowymiarowa tablica za pomocą kart. Od lewej do prawej znajduje się stos fioletowych kart w obramowaniu, a w środku każdej z nich znajduje się jedna liczba kart w błękitnym obramowaniu. Lista w formie listy.
Pierwsza karuzela znajomych
Druga „skumulowana” karuzela z artykułami
👍 Lista na liście, tzw. wielowymiarowa tablica

Wybór narzędzi odpowiednich do danego zadania

Stworzenie tego komponentu było proste dzięki kilku kluczowym funkcjom platformy internetowej. Omówmy je.

Siatka CSS

Nasz układ okazał się niezbyt trudny w przypadku siatki CSS, ponieważ udostępnia rozbudowane sposoby przetwarzania treści.

Układ „Znajomi”

Główny kod komponentu .stories to przeznaczony dla urządzeń mobilnych poziomy widok przewijany:

.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;
}
Korzystanie z Trybu urządzenia w Narzędziach deweloperskich w Chrome w celu podświetlenia kolumn utworzonych przez siatkę

Przeanalizujmy ten układ grid:

  • wyraźnie wypełniamy widoczny obszar na urządzeniach mobilnych właściwościami 100vh i 100vw. Ograniczamy też rozmiar w przypadku komputerów.
  • Pole / rozdziela szablony wierszy i kolumn
  • auto-flow tłumaczy się na grid-auto-flow: column
  • Szablon automatycznego układu to 100%, co w tym przypadku ma wartość niezależnie od szerokości okna przewijania

Na komórce wygląda to tak, jakby rozmiar wiersza to wysokość widocznego obszaru, a każda kolumna to szerokość widocznego obszaru. Jeśli chodzi o przykłady relacji na Snapchacie i Instagramie, każda kolumna jest opowieścią znajomego. Chcemy, aby relacje znajomych były widoczne poza widocznym obszarem, więc mieliśmy gdzie je przewinąć. Siatka utworzy tyle kolumn, ile potrzeba do układu kodu HTML każdej historii znajomego, tworząc dynamiczny i elastyczny kontener przewijany. Dzięki siatce mogliśmy scentralizować cały efekt.

Nakładanie

Każdy przyjaciel potrzebuje jego historii w stanie gotowości do podziału na strony. Przygotowując się do animacji i innych ciekawych wzorów, wybrałam stos. Mówiąc „stos”, mam na myśli patrzenie na kanapkę w dół, a nie z boku.

Za pomocą siatki CSS możemy zdefiniować siatkę jednokomórkową (tj. kwadrat), w której wiersze i kolumny mają ten sam alias ([story]), a każdy element podrzędny zostaje przypisany do tej aliasowanej przestrzeni jednokomórkowej:

.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 kod HTML kontroluje kolejność ułożenia elementów, a wszystkie elementy pozostają we właściwym porządku. Zwróć uwagę, że nie musieliśmy nic robić z pozycjonowaniem absolute ani z-index. Nie musimy też poprawiać pól w height: 100% ani width: 100%. Nadrzędna siatka określa już rozmiar widocznego obszaru obrazu z artykułu, więc żaden z tych elementów nie musi zostać wypełniony.

Punkty przyciągania przewijania w CSS

Specyfikacja CSS Scroll Snap Points ułatwia blokowanie elementów w widocznym obszarze podczas przewijania. Zanim powstały te właściwości CSS, trzeba było używać JavaScriptu, który był... co najmniej trudny. Dowiesz się z niego, jak z nich korzystać – wprowadzamy CSS Scroll Snap Points autorstwa Sarah Drasner.

Przewijanie w poziomie bez stylów i z scroll-snap-points. Bez niej użytkownicy będą mogli swobodnie przewijać ekran w zwykły sposób. Przeglądarka delikatnie opiera się na każdym elemencie.
parent
.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 nadmiernym przewijaniem definiuje zachowanie przyciągania.
dziecko
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
Dzieci wyrażają zgodę na bycie obiektem przyciągającym uwagę.

Punkty przyciągania przewijania wybieram z kilku powodów:

  • Bezpłatny dostęp. Specyfikacja przewijania punktów przyciągania określa, że naciśnięcie klawiszy strzałki w lewo i strzałki w prawo domyślnie powinno przechodzić przez punkty przyciągania.
  • Coraz większa specyfikacja. Ciągle dodajemy nowe funkcje i ulepszenia w specyfikacji „ Scroll Snap Points”. Oznacza to, że mój komponent relacji będzie od tej pory coraz lepszy.
  • Łatwe wdrożenie. Punkty przyciągania przewijania są praktycznie opracowane z myślą o dotyku, czyli podziału na strony w poziomie.
  • Swobodna bezwładność w stylu platformy. Każda platforma będzie przewijać stronę w swoim stylu, w przeciwieństwie do znormalizowanej bezwładności, która może cechować się niezwykłym stylem przewijania i spoczynku.

Zgodność z różnymi przeglądarkami

Przetestowaliśmy ją w przeglądarkach Opera, Firefox, Safari i Chrome, a także na urządzeniach z Androidem i iOS. Oto krótkie omówienie funkcji internetowych, w przypadku których wykryliśmy różnice pod względem możliwości i obsługi.

W związku z tym, że niektóre usługi porównywania cen nie zostały zastosowane, więc niektóre platformy nie korzystają obecnie z optymalizacji UX. Nie potrzebowałem(-am) zarządzać tymi funkcjami i mam pewność, że w przyszłości będą one dostępne w innych przeglądarkach i na innych platformach.

scroll-snap-stop

Karuzele to jeden z głównych przypadków użycia w interfejsie użytkownika, który skłonił do utworzenia specyfikacji CSS Scroll Snap Points. W przeciwieństwie do relacji karuzela nie zawsze musi zatrzymywać się na każdym obrazie po interakcji użytkownika. Zalecane jest szybkie przewijanie karuzeli. Z drugiej strony relacje najlepiej przeglądać pojedynczo, a właśnie to zapewnia funkcja scroll-snap-stop.

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

W chwili pisania tego posta usługa scroll-snap-stop jest obsługiwana tylko w przeglądarkach opartych na Chromium. Informacje o aktualizacjach znajdziesz w sekcji Zgodność przeglądarek. Nie jest to jednak blokada. Pamiętaj tylko, że w nieobsługiwanych przeglądarkach użytkownik może przypadkowo pominąć znajomego. Użytkownicy muszą być więc ostrożni – inaczej będziemy musieli pisać w języku JavaScript, aby mieć pewność, że pominięty znajomy nie zostanie oznaczony jako wyświetlony.

Jeśli Cię to interesuje, przeczytaj specyfikację.

overscroll-behavior

Czy zdarzyło Ci się, że zdarzyło Ci się przejrzeć zawartość okna modalnego i nagle zacząć przewijać jego zawartość? overscroll-behavior pozwala deweloperowi zamknąć okno i nigdy go nie opuścić. Dobrze sprawdza się na różne okazje. Komponent Moje relacje korzysta z niego, aby blokować 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, więc nie martw się. Tacy użytkownicy będą mieli wrażenie, że ta funkcja jest przyzwyczajona, i mogą nigdy nie zauważyć tego ulepszenia. Osobiście jestem wielkim fanem i włączam ją do niemal każdej funkcji sygnalizowania końca przewijania. To nieszkodliwe dodatek, który może tylko poprawić wygodę użytkowników.

scrollIntoView({behavior: 'smooth'})

Gdy użytkownik kliknie lub dotrze do końca zestawu relacji znajomego, przychodzi czas na przejście do następnego znajomego z zestawu przewijanego punktu. Dzięki JavaScriptowi mogliśmy odnosić się do następnego znajomego i poprosić o przewinięcie go do widoku. Podstawowe funkcje są bardzo przydatne, bo wyświetlają się w każdej przeglądarce. Jednak nie w każdej przeglądarce udało się to 'smooth'. Oznacza to, że element został przewinięty tak, że pojawił się na ekranie, a nie przyciągnięty.

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

Przeglądarka Safari jako jedyna nie obsługiwała tutaj behavior: 'smooth'. Informacje o aktualizacjach znajdziesz w sekcji Zgodność przeglądarek.

Nauka praktyczna

Skoro już wiesz, jak to udało mi się osiągnąć, to jak? Przeanalizujmy różne podejścia i nauczmy się korzystać z internetu. Utwórz glitch i napisz mi swoją wersję, a dodam ją do sekcji Remiksy społeczności poniżej.

Remiksy społeczności