Podstawowe informacje o tworzeniu elastycznego widoku przewijania w poziomie na potrzeby telewizorów, telefonów, komputerów itp.
W tym poście chcę opowiedzieć o sposobach tworzenia przewijania w poziomie. a także do tworzenia prostych aplikacji internetowych, które są proste w obsłudze, łatwo dostępne i działają przeglądarek i platform (np. telewizorów). Wypróbuj demo.
Jeśli wolisz film, oto wersja tego posta w YouTube:
Omówienie
Tworzymy układ poziomy z przewijaniem umożliwiającym przechowywanie miniatur
mediów lub produktów. Komponent zaczyna się jako skromna lista <ul>, ale jest
przekształconych za pomocą CSS na satysfakcjonujące i płynne przewijanie,
obrazów i przyciągania ich do siatki. Dodaliśmy JavaScript, aby ułatwić
interakcje z dalszym indeksem, co pomaga użytkownikom klawiatury pomijać ponad 100 elementów.
Dodatkowo eksperymentalne zapytanie o media, prefers-reduced-data, służy do
przewijanie multimediów w prosty sposób na przewijanie tytułów.
Zacznij od znaczników ułatwień dostępu
Przewijanie multimediów składa się tylko z kilku podstawowych komponentów, czyli listy z elementami. O lista może podróżować po całym świecie i być wszystkich użytkowników. Użytkownik, który trafi na tę stronę, może przejrzeć listę i kliknąć link aby wyświetlić dany element. To nasza baza, z której można korzystać.
Prześlij listę z elementem <ul>:
<ul class="horizontal-media-scroller">
<li></li>
<li></li>
<li></li>
...
<ul>
Dodaj element <a> jako interaktywny do elementów listy:
<li>
<a href="#">
...
</a>
</li>
Użyj elementu <figure> do semantycznego przedstawienia obrazu i jego podpisu:
<figure>
<picture>
<img alt="..." loading="lazy" src="https://picsum.photos/500/500?1">
</picture>
<figcaption>Legends</figcaption>
</figure>
Zwróć uwagę na atrybuty alt i loading <img>. Tekst alternatywny dla multimediów
przewijanie to opcja UX, która pomaga nadać miniaturze dodatkowy kontekst.
tekst zastępczy, jeśli obraz nie został wczytany lub użytkownicy mają dostęp do interfejsu głosowego
korzysta z technologii wspomagających osoby z niepełnosprawnością, takich jak czytnik ekranu. Dowiedz się więcej o programie Five golden
reguły dotyczące zgodnego atrybutu alt
tekst.
Atrybut loading akceptuje słowo kluczowe lazy jako sygnał do wyświetlenia obrazu
powinno być pobierane tylko wtedy, gdy obraz znajduje się w widocznym obszarze. Może to być
dobrze sprawdza się w przypadku dużych list, ponieważ użytkownicy pobierają obrazy tylko
przewinięto do widoku.
Dostosowanie preferencji użytkownika do schematu kolorów
Użyj tagu color-scheme jako tagu <meta>, aby poinformować przeglądarkę, że strona
wymaga zarówno jasnego, jak i ciemnego stylu klienta użytkownika. To bezpłatny tryb ciemny
lub trybu jasnego, w zależności od tego, jak na to patrzysz:
<meta name="color-scheme" content="dark light">
Metatag jest źródłem najwcześniejszego możliwego sygnału, więc przeglądarka może wybrać ciemny domyślny kolor obszaru roboczego, jeśli użytkownik ma ustawiony ciemny motyw. Oznacza to, że podczas przechodzenia między stronami witryny nie będzie migać biały obszar roboczy. w tle między ładowaniami. Płynny ciemny motyw pomiędzy ładowaniami, znacznie ładniejszy na ekranie oczami.
Więcej informacji od Thomasa Steinera znajdziesz na https://web.dev/color-scheme/.
Dodaj treść
Biorąc pod uwagę powyższą strukturę treści pliku ul > li > a > figure > picture > img,
Kolejne zadanie to dodawanie obrazów i tytułów do przewijania. W prezentacji znalazłem się
statyczne obrazy i teksty zastępcze, ale możesz je wykorzystać
ulubionego źródła danych.
Dodaj styl za pomocą CSS
Nadszedł czas, aby usługa porównywania cen przekształciła tę ogólną listę treści w i uzyskiwanie dodatkowych informacji. Netflix, sklepy z aplikacjami i wiele innych witryn i aplikacji używa orientacji poziomej aby wypełnić widoczny obszar kategoriami i opcjami.
Tworzę układ przewijania
Ważne jest, aby nie obcinać treści w układach lub opierać się na tekście. obcinanie tekstu za pomocą wielokropka. Wiele telewizorów ma przewijanie multimediów ale często sięgają po treści elipsujące. Ten układ tego nie robi. Pozwala to też treści multimedialnej zastępować rozmiar kolumny, co powoduje utworzenie 1 układu. do obsługi wielu ciekawych kombinacji.
Kontener umożliwia zastąpienie rozmiaru kolumny przez podanie rozmiaru domyślnego jako do właściwości niestandardowej. Ten układ siatki ma wpływ na rozmiar kolumny. zarządzanie tylko odstępami i kierunkiem:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2); /* parent owned value for children to be relative to*/
margin: 0;
}
Właściwość niestandardowa jest następnie używana przez element <picture> do utworzenia podstawowego współczynnika proporcji: pola:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
Zostało tylko kilka mniejszych stylów, więc dopełnij elementy przewijane treści:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
& > li {
display: inline-block; /* removes the list-item bullet */
}
& picture {
inline-size: var(--size);
block-size: var(--size);
}
}
Ustawienie overflow ustawia <ul>, aby umożliwić przewijanie i nawigację za pomocą klawiatury
na swojej liście, dla każdego bezpośredniego elementu podrzędnego <li> usunięto element ::marker
dzięki nowemu typowi wyświetlania: inline-block.
Obrazy nie reagują jeszcze na te wiadomości i wyskakują prosto z ramek. nawet jeśli są w środku. Okiełznaj je za pomocą rozmiaru, dopasowania i stylu obramowania. gradient tła podczas leniwego ładowania:
img {
/* smash into whatever box it's in */
inline-size: 100%;
block-size: 100%;
/* don't squish but do cover the space */
object-fit: cover;
/* soften the edges */
border-radius: 1ex;
overflow: hidden;
/* if empty, show a gradient placeholder */
background-image:
linear-gradient(
to bottom,
hsl(0 0% 40%),
hsl(0 0% 20%)
);
}
Dopełnienie przewijania
Wyrównanie do zawartości strony oraz obszar przewijania od krawędzi do krawędzi są o znaczeniu harmonicznym i minimalnym.
Aby uzyskać układ przewijania od krawędzi do krawędzi, który jest zgodny z naszą typografią
i wiersze układu użyj parametru padding, który pasuje do scroll-padding:
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block: calc(var(--gap) / 2); /* make space for scrollbar and focus outline */
}
Poprawka błędu dopełnienia przewijania w poziomie Powyżej widać, jak łatwo powinno być kontener przewijania, ale są z nim nierozstrzygnięte problemy ze zgodnością (naprawiono je w Chromium 91 i nowszych wersjach). Zobacz tutaj. nie zawsze było uwzględniane dopełnienie. .
Aby podstępem nakłonić przeglądarki do dodania dopełnienia na końcu paska przewijania, na ostatnią figurę na każdej liście i dodaj pseudoelement, który jest żądanego dopełnienia.
.horizontal-media-scroller > li:last-of-type figure {
position: relative;
&::after {
content: "";
position: absolute;
inline-size: var(--gap);
block-size: 100%;
inset-block-start: 0;
inset-inline-end: calc(var(--gap) * -1);
}
}
Używanie właściwości logicznych umożliwia przewijanie multimediów w dowolnym trybie pisania i kierunek dokumentu.
Przyciąganie do przewijania
Przewijany kontener z nadmiarem może stać się „przyciągającym” widocznym obszarem dzięki jednej linii CSS, a następnie znajdować się w elementach podrzędnych i określić, jak mają się do niego dopasować.
.horizontal-media-scroller {
--size: 150px;
display: grid;
grid-auto-flow: column;
gap: calc(var(--gap) / 2);
margin: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-inline: var(--gap);
scroll-padding-inline: var(--gap);
padding-block-end: calc(var(--gap) / 2);
scroll-snap-type: inline mandatory;
& figure {
scroll-snap-align: start;
}
}
Ostrość
Inspiracją do stworzenia tego komponentu jest jego ogromna popularność w App Store i nie tylko. Wiele platform do gier wideo korzysta z rolki przewijania, podobny do tego, jako podstawowy układ ekranu głównego. Skupienie to duży UX tutaj, a nie tylko – Wyobraź sobie, że używasz tego przewijania multimediów z: na kanapie za pomocą pilota, wprowadź do tej interakcji kilka drobnych ulepszeń:
.horizontal-media-scroller a {
outline-offset: 12px;
&:focus {
outline-offset: 7px;
}
@media (prefers-reduced-motion: no-preference) {
& {
transition: outline-offset .25s ease;
}
}
}
Dzięki temu styl konturu ostrości 7px zostanie odsunięty od ramki, nadając mu ładny wygląd.
kosmosu. Jeśli użytkownik nie ma preferencji dotyczących ruchu dotyczących zmniejszania ruchu, przesunięcie
jest przekształcany, co nadaje sylwetce ostrości delikatny ruch.
Indeks Roving
Użytkownicy padów do gier i klawiatury wymagają szczególnej uwagi na tych długich listach przewijanych treści i opcji. Typowy wzorzec rozwiązania tego problemu to tzw. indeksie ruchu. Ma miejsce, gdy kontener z elementami jest ustawiony na klawiaturę, ale tylko 1 element podrzędny może przytrzymaj fokus za jednym razem. Ten pojedynczy element, który można zaznaczyć, umożliwia pomijać potencjalnie długą listę elementów zamiast naciskać klawisz 50+ do końca.
W pierwszym przewijanym ekranie wersji demonstracyjnej znajduje się 300 elementów. Możemy coś zrobić lepiej niż zapoznają się ze wszystkimi, aby dotrzeć do następnej sekcji.
Aby utworzyć takie działanie, JavaScript musi obserwować zdarzenia klawiatury i zaznaczyć elementy zdarzeń. Utworzyłem małą bibliotekę typu open source npm, który ułatwi zmianę uprawnień tego użytkownika łatwe do osiągnięcia. Oto jak go używać w przypadku 3 elementów przewijania:
import {rovingIndex} from 'roving-ux';
rovingIndex({
element: someElement
});
Ta wersja demonstracyjna wysyła zapytania do dokumentu w poszukiwaniu osób przewijających, a w przypadku każdej z nich wywołuje metodę
rovingIndex(). Pokaż element (rovingIndex()), aby ruszać w podróż
takich jak kontener listy
i selektor docelowego zapytania, w przypadku, gdy
cele kierowania nie są bezpośrednimi elementami potomnymi.
document.querySelectorAll('.horizontal-media-scroller')
.forEach(scroller =>
rovingIndex({
element: scroller,
target: 'a',
}))
Więcej informacji o tym efektie znajdziesz w bibliotece open source roving-ux.
Współczynnik proporcji
W momencie opublikowania tego posta wsparcie dla
aspect-ratio jest za
flagi w Firefoksie, ale są dostępne w przeglądarkach Chromium i na dekoderach. Ponieważ
Układ siatki przewijania multimediów określa tylko kierunek i odstępy,
zmiana w zapytaniu o media, która sprawdza obsługę współczynnika proporcji.
Stopniowe ulepszenie w bardziej dynamicznych przewijanych treściach.
@supports (aspect-ratio: 1) {
.horizontal-media-scroller figure > picture {
inline-size: auto; /* for a block-size driven ratio */
aspect-ratio: 1; /* boxes by default */
@nest section:nth-child(2) & {
aspect-ratio: 16/9;
}
@nest section:nth-child(3) & {
/* double the size of the others */
block-size: calc(var(--size) * 2);
aspect-ratio: 4/3;
/* adjust size to fit more items into the viewport */
@media (width <= 480px) {
block-size: calc(var(--size) * 1.5);
}
}
}
}
Jeśli przeglądarka obsługuje składnię aspect-ratio, obrazy przewijane multimediów są
uaktualniono do rozmiaru aspect-ratio. Korzystając ze składni zagnieżdżenia wersji roboczych, każdy obraz jest
zmienia współczynnik proporcji w zależności od tego, czy jest to pierwszy, drugi czy trzeci wiersz.
składnia Nest umożliwia też określenie
oraz korekty widocznego obszaru, a także inne metody określania rozmiaru.
Dzięki CSS, gdy ta funkcja jest dostępna w większej liczbie przeglądarek, ale też bardziej atrakcyjny wizualnie układ.
Preferowane są ograniczone dane
Ta następna metoda jest dostępna tylko
za flagą w
Canary
Chciałbym opowiedzieć, jak można zaoszczędzić znaczne ilości czasu wczytywania strony i
za pomocą kilku wierszy CSS. Zapytanie o media prefers-reduced-data z
Poziom 5 umożliwia pytanie, czy urządzenie jest
np. w trybie oszczędzania danych. Jeśli tak, mogę zmienić
dokument i — w tym przypadku — ukryj obrazy.
figure {
@media (prefers-reduced-data: reduce) {
& {
min-inline-size: var(--size);
& > picture {
display: none;
}
}
}
}
Treść jest nadal łatwa do przeglądania, ale nie trzeba ponosić kosztów kosztownych obrazów
pobrano. Oto strona przed dodaniem kodu CSS prefers-reduced-data:
(7 żądań, 100 KB zasobów w 131 ms)
Oto skuteczność witryny po dodaniu kodu CSS prefers-reduced-data:
(71 żądań, 1,2 MB zasobów w wersji 1.07)
64 żądań mniej, czyli około 60 obrazów w widocznym obszarze (testy wykonane na szerokim ekranie) tej karty przeglądarki, przyspieszenie wczytywania strony o około 80% 10% danych przez przewód. Obsługiwany kod CSS.
Podsumowanie
Skoro już wiesz, jak to robię, jak Ty?! 🙂
Stosujmy różne podejścia i poznajmy sposoby budowania obecności w internecie. Utwórz Codepen lub poprowadź własną prezentację i wyślij do mnie tweeta, a dodam ją do Remiksy przez społeczność znajdują się poniżej.
Źródło
Remiksy utworzone przez społeczność
Na razie nic tu nie ma.