Nowy sposób responsywny: projektowanie witryn w świecie opartym na komponentach

Kontrolowanie układu makro i mikro w nowej erze elastycznego projektowania witryn.

Una Kravets

Elastyczne projektowanie stron obecnie

Obecnie, gdy używamy terminu „elastyczne projektowanie stron”, najczęściej mamy na myśli używanie zapytań o media do zmiany układu podczas zmiany rozmiaru projektu z rozmiaru mobilnego na rozmiar tabletu i rozmiar komputera.

Wkrótce jednak takie postrzeganie elastycznego projektowania stron może zostać uznane za przestarzałe, podobnie jak używanie tabel do układu strony.

Zapytania o media oparte na widocznym obszarze dają Ci pewne zaawansowane narzędzia, ale brakuje im finezji. Nie mogą reagować na potrzeby użytkowników ani samodzielnie wstrzykiwać stylów elastycznych do komponentów.

Możesz używać globalnych informacji o widocznym obszarze do stylizowania komponentów, ale nadal nie będą one miały własnych stylów, co nie działa, gdy nasze systemy projektowania są oparte na komponentach, a nie na stronach.

Dobra wiadomość jest taka, że ekosystem się zmienia i to dość szybko. CSS się rozwija, a nowa era elastycznego projektowania stron jest już na horyzoncie.

Zdarza się to mniej więcej co 10 lat. 10 lat temu, około 2010–2012 roku, nastąpiła ogromna zmiana związana z urządzeniami mobilnymi i elastycznym projektowaniem stron oraz pojawieniem się CSS3.

Oś czasu stylów CSS
Źródło: Web Design Museum.

Okazuje się więc, że ekosystem jest już gotowy na dość duże zmiany w CSS. Inżynierowie Chrome i całej platformy internetowej tworzą prototypy, specyfikacje i rozpoczynają wdrażanie nowej ery elastycznego projektowania stron.

Te aktualizacje obejmują funkcje multimedialne oparte na preferencjach użytkownika, zapytania o kontenery i zapytania o multimedia dotyczące nowych typów ekranów, takich jak ekrany składane.

Dostosowują się do użytkownika, kontenera i formatu.

reagować na działania użytkownika,

Nowe funkcje multimedialne dotyczące preferencji użytkownika umożliwiają dostosowywanie stron internetowych do konkretnych preferencji i potrzeb użytkownika. Oznacza to, że funkcje multimedialne dotyczące preferencji pozwalają dostosować interfejs do doświadczeń użytkownika.

Te funkcje multimedialne dotyczące preferencji użytkownika obejmują:

  • prefers-reduced-motion
  • prefers-contrast
  • prefers-reduced-transparency
  • prefers-color-scheme
  • inverted-colors
  • i nie tylko.

Funkcje preferencji wykrywają preferencje ustawione przez użytkownika w systemie operacyjnym i pomagają tworzyć bardziej niezawodne i spersonalizowane środowisko internetowe, zwłaszcza dla osób z potrzebami związanymi z ułatwieniami dostępu.

Włączanie ustawień ułatwień dostępu w systemie operacyjnym

prefers-reduced-motion

Użytkownicy, którzy w preferencjach systemu operacyjnego ustawili ograniczenie ruchu, chcą, aby podczas korzystania z komputera wyświetlało się mniej animacji. Dlatego prawdopodobnie nie docenią efektownego ekranu powitalnego, animacji odwracania karty, skomplikowanego programu ładującego ani innych efektownych animacji podczas korzystania z internetu.

Dzięki prefers-reduced-motion możesz projektować strony z myślą o ograniczeniu ruchu i tworzyć bardziej dynamiczne treści dla osób, które nie mają ustawionych takich preferencji.

Ta karta zawiera informacje po obu stronach. Podstawowa wersja z ograniczonym ruchem wykorzystuje efekt przenikania, aby wyświetlić te informacje, natomiast wersja z ulepszonym ruchem wykorzystuje efekt odwracania karty.

Prefers-reduced-motion nie powinno oznaczać „brak ruchu”, ponieważ ruch jest bardzo ważny do przekazywania informacji online. Zamiast tego zapewnij solidne podstawowe wrażenia, które będą prowadzić użytkowników bez niepotrzebnego ruchu, i stopniowo ulepszaj te wrażenia dla użytkowników, którzy nie mają takich potrzeb ani preferencji dotyczących ułatwień dostępu.

prefers-color-scheme

Inną funkcją multimediów dotyczącą preferencji jest prefers-color-scheme. Ta funkcja pomaga dostosować interfejs do motywu preferowanego przez użytkownika. W systemie operacyjnym, zarówno na komputerze, jak i na urządzeniu mobilnym, użytkownicy mogą wybrać motyw jasny, ciemny lub automatyczny, który zmienia się w zależności od pory dnia.

Jeśli skonfigurujesz stronę za pomocą właściwości niestandardowych CSS, zamiana wartości kolorów będzie prosta. Możesz szybko zaktualizować wartości motywu kolorystycznego, takie jak backgroundColor i textOnPrimary, aby dynamicznie dostosowywać je do nowego motywu w zapytaniu o media.

Aby ułatwić testowanie niektórych z tych zapytań dotyczących preferencji, możesz użyć Narzędzi deweloperskich do emulacji, zamiast za każdym razem otwierać preferencje systemowe.

Projektowanie ciemnego motywu

Projektowanie ciemnego motywu nie polega tylko na odwróceniu kolorów tła i tekstu czy dodaniu ciemnych pasków przewijania. Jest kilka kwestii, o których możesz nie wiedzieć. Na przykład może być konieczne zmniejszenie nasycenia kolorów na ciemnym tle, aby ograniczyć wizualne wibracje.

Nie używaj żywych, nasyconych kolorów w ciemnych motywach

Zamiast używać cieni do tworzenia głębi i wyróżniania elementu, możesz użyć światła w kolorze tła elementu, aby go wyróżnić. Dzieje się tak, ponieważ cienie nie będą tak skuteczne na ciemnym tle.

Material Design zawiera świetne wskazówki dotyczące projektowania ciemnych motywów.

Ciemne motywy nie tylko zapewniają bardziej spersonalizowane wrażenia użytkownika, ale mogą też znacznie wydłużyć czas pracy na baterii w przypadku ekranów AMOLED. Takie ekrany są stosowane w nowszych telefonach wysokiej klasy i stają się coraz popularniejsze w urządzeniach mobilnych.

zrzut ekranu z prezentacji, w której pierwotnie pojawiła się ta grafika

Badanie Androida z 2018 r. dotyczące ciemnych motywów wykazało, że pozwalają one zaoszczędzić do 60% energii, w zależności od jasności ekranu i ogólnego interfejsu użytkownika. Wartość 60% uzyskano, porównując ekran odtwarzania w YouTube z wstrzymanym filmem przy 100% jasności ekranu i ciemnym motywie interfejsu aplikacji z jasnym motywem.

Zawsze, gdy jest to możliwe, należy zapewnić użytkownikom ciemny motyw.

Dostosowuje się do kontenera

Jednym z najbardziej obiecujących obszarów CSS są zapytania o kontenery, często nazywane też zapytaniami o elementy. Trudno przecenić wpływ, jaki przejście od elastycznego projektowania stron do elastycznego projektowania kontenerów będzie miało na rozwój ekosystemu projektowania.

Oto przykład zaawansowanych możliwości, jakie dają zapytania o kontenery. Możesz manipulować dowolnymi stylami elementu karty, w tym listą linków, rozmiarami czcionek i ogólnym układem na podstawie kontenera nadrzędnego:

Zobacz wersję demonstracyjną w Codepen (za flagą w Canary).

W tym przykładzie pokazano 2 identyczne komponenty z 2 różnymi rozmiarami kontenerów, które zajmują miejsce w układzie utworzonym za pomocą siatki CSS. Każdy komponent dopasowuje się do przydzielonego mu miejsca i odpowiednio się stylizuje.

Taki poziom elastyczności nie jest możliwy do osiągnięcia przy użyciu samych zapytań o media.

Zapytania o kontener zapewniają znacznie bardziej dynamiczne podejście do elastycznego projektowania stron. Oznacza to, że jeśli umieścisz ten komponent karty na pasku bocznym, w sekcji hero lub w siatce w głównej części strony, komponent sam będzie zawierał informacje o responsywności i będzie dostosowywał swój rozmiar do kontenera, a nie do widocznego obszaru.

Wymaga to reguły at-rule @container. Działa to podobnie do zapytania o media z @media, ale @container wysyła zapytanie do kontenera nadrzędnego, a nie do widocznego obszaru i klienta użytkownika.

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

Najpierw ustaw ograniczenie w elemencie nadrzędnym. Następnie napisz zapytanie @container, aby nadać styl dowolnym elementom w kontenerze na podstawie jego rozmiaru, używając min-width lub max-width.

Powyższy kod używa max-width i ustawia linki na display:none, a także zmniejsza rozmiar czcionki czasu, gdy szerokość kontenera jest mniejsza niż 850px.

Karty zapytań dotyczących kontenerów

W tej demonstracyjnej witrynie sklepu z roślinami każda karta produktu, w tym karta w głównej sekcji, na pasku bocznym z ostatnio wyświetlanymi produktami i w siatce produktów, jest dokładnie tym samym komponentem z tymi samymi znacznikami.

Zobacz wersję demonstracyjną w Codepen (za flagą w Canary).

Do utworzenia tego układu nie użyto żadnych zapytań o media, a jedynie zapytania o kontenery. Dzięki temu każda karta produktu może zostać przesunięta do odpowiedniego układu, aby wypełnić przestrzeń. Na przykład siatka używa układu kolumn minmax, aby elementy mogły wypełniać przestrzeń, i zmienia układ siatki, gdy przestrzeń jest zbyt skompresowana (co oznacza, że osiągnęła minimalny rozmiar).

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

Gdy w siatce jest co najmniej 350px miejsca, układ karty zmienia się na poziomy, ponieważ jest ustawiony na display: flex, który ma domyślny kierunek elastyczny „row”.

Jeśli miejsca jest mniej, karty produktów są ułożone jedna na drugiej. Każda karta produktu ma własny styl, co byłoby niemożliwe przy użyciu samych stylów globalnych.

Łączenie zapytań dotyczących kontenerów z zapytaniami o multimedia

Zapytania o kontener mają wiele zastosowań, m.in. w komponencie kalendarza. Możesz użyć zapytań o kontener, aby zmienić układ wydarzeń w kalendarzu i innych segmentów na podstawie dostępnej szerokości ich elementu nadrzędnego.

Zobacz wersję demonstracyjną w Codepen (za flagą w Canary).

Ten kontener demonstracyjny wysyła zapytania, aby zmienić układ i styl daty oraz dnia tygodnia w kalendarzu, a także dostosować marginesy i rozmiar czcionki w zaplanowanych wydarzeniach, aby lepiej pasowały do dostępnej przestrzeni.

Następnie użyj zapytania o media, aby zmienić cały układ na mniejszych ekranach. Ten przykład pokazuje, jak skuteczne jest łączenie zapytań o media (dostosowywanie stylów globalnych lub makrostyli) z zapytaniami o kontenery (dostosowywanie elementów podrzędnych kontenera i ich mikrostyli).

Teraz możemy myśleć o układach makro i mikro w ramach tego samego komponentu interfejsu, co pozwala na podejmowanie naprawdę precyzyjnych decyzji projektowych.

Korzystanie z zapytań o kontenery obecnie

Te wersje demonstracyjne są teraz dostępne do grania za flagą w Chrome Canary. Otwórz about://flags w Canary i włącz flagę #enable-container-queries. Spowoduje to włączenie obsługi wartości @container, inline-size i block-size właściwości contain oraz implementacji LayoutNG Grid.

Flaga włącza też odpowiednie funkcje Narzędzi deweloperskich w Chrome. Dowiedz się, jak sprawdzać i debugować zapytania o kontenery w Narzędziach deweloperskich.

Style ograniczone do zakresu

Aby rozszerzyć zapytania o kontenery, użyj stylów ograniczonych za pomocą @scope, aby ograniczyć zasięg selektorów.

diagram stylów o ograniczonym zakresie
Ilustracja autorstwa Miriam Suzanne.

Style ograniczone umożliwiają stylizowanie komponentów, co pozwala uniknąć kolizji nazw. Wiele platform i wtyczek, takich jak moduły CSS, już teraz umożliwia to w ramach platform. Style ograniczone umożliwiają natywne pisanie hermetyzowanych stylów dla komponentów z czytelnym kodem CSS bez konieczności dostosowywania znaczników.

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

Określanie zakresu umożliwia tworzenie selektorów „w kształcie pączka”, w których można określić górny i dolny limit. Selektory zawarte w regule @scope są dopasowywane w tych granicach.

Przykładem może być panel kart, w którym chcesz, aby karty miały style ograniczone, ale panel w tych kartach nie był nimi objęty.

Dostosowuje się do formatu.

Kolejnym tematem w naszej rozmowie o nowej erze elastycznego projektowania stron jest zmiana formatów i rosnące możliwości tego, co będziemy musieli projektować jako społeczność internetowa (np. ekrany zmieniające kształt lub rzeczywistość wirtualna).

Diagram rozpiętości
Diagram z Microsoft Edge Explainers.

Składane lub elastyczne ekrany i projektowanie pod kątem wyświetlania na wielu ekranach to jeden z przykładów zmiany formatu, którą możemy dziś zaobserwować. Kolejną specyfikacją, nad którą pracujemy, jest rozciąganie ekranu, które ma na celu uwzględnienie nowych formatów i potrzeb.

W tym przypadku może nam pomóc eksperymentalne zapytanie o media dotyczące rozciągania ekranu. Obecnie działa to tak: @media (spanning: <type of fold>). Wersja demonstracyjna konfiguruje układ siatki z 2 kolumnami: jedna ma szerokość --sidebar-width, która domyślnie wynosi 5 rem, a druga to 1fr. Gdy układ jest wyświetlany na podwójnym ekranie z jednym pionowym zagięciem, wartość --sidebar-width jest aktualizowana o wartość środowiska lewego zagięcia.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

Umożliwia to układ, w którym pasek boczny (w tym przypadku nawigacja) wypełnia przestrzeń jednego ze zgięć, a interfejs aplikacji wypełnia drugie. Zapobiega to „zagięciu” w interfejsie.

Możesz przetestować składane ekrany w emulatorze Narzędzi deweloperskich w Chrome, aby debugować i prototypować rozciąganie ekranu bezpośrednio w przeglądarce.

Podsumowanie

Odkrywanie projektowania interfejsu poza płaskim ekranem to kolejny powód, dla którego zapytania o kontenery i style ograniczone są tak ważne. Dzięki nim możesz odizolować style komponentów od układu strony, stylów globalnych i stylów użytkownika, co pozwala na bardziej elastyczne projektowanie stron. Oznacza to, że możesz teraz projektować układy makro, korzystając z zapytań o media opartych na stronach, w tym z niuansów związanych z rozciąganiem ekranu. Jednocześnie używaj mikroukładów z zapytaniami o kontenery w komponentach i dodawaj zapytania o media na podstawie preferencji użytkownika, aby dostosowywać wrażenia użytkownika do jego unikalnych preferencji i potrzeb.

W nowym, elastycznym

To jest nowy sposób reagowania.

Łączy układ makro z układem mikro, a do tego uwzględnia dostosowywanie przez użytkownika i format.

Każda z tych zmian sama w sobie stanowiłaby znaczną zmianę w sposobie projektowania stron internetowych. Jednak razem oznaczają one naprawdę dużą zmianę w sposobie, w jaki postrzegamy elastyczne projektowanie stron. Czas pomyśleć o elastycznym projektowaniu stron, które nie ogranicza się do rozmiaru widocznego obszaru, i zacząć brać pod uwagę wszystkie te nowe osie, aby zapewnić lepsze, oparte na komponentach i spersonalizowane wrażenia.

Nowa era elastycznego projektowania stron już nadeszła i możesz już zacząć ją odkrywać.

web.dev/learnCSS

Jeśli chcesz podnieść swoje umiejętności CSS i przypomnieć sobie podstawy, mój zespół uruchamia zupełnie nowy, całkowicie bezpłatny kurs CSS i materiały referencyjne na web.dev. Możesz uzyskać do nich dostęp na stronie web.dev/learnCSS.

Mam nadzieję, że to omówienie nowej ery elastycznego projektowania stron i niektórych związanych z nią elementów podstawowych było dla Ciebie interesujące. Mam też nadzieję, że tak jak ja nie możesz się doczekać, aby zobaczyć, co to oznacza dla przyszłości projektowania stron internetowych.

Daje to społeczności UI ogromne możliwości wykorzystania stylów opartych na komponentach i nowych formatów oraz tworzenia interfejsów reagujących na działania użytkownika.