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

Zarządzanie układem makro i mikro w nowej epoce elastycznego projektowania witryn.

Responsive Design Today

Obecnie, gdy używasz terminu „projekt elastyczny”, najprawdopodobniej masz na myśli zapytania o multimedia, które zmieniają układ podczas zmiany rozmiaru projektu z wersji mobilnej na tabletową, a potem na komputerową.

Wkrótce jednak to podejście do projektowania responsywnego może być uważane za przestarzałe, podobnie jak stosowanie tabel do układu strony.

Zapytania o media oparte na widoku dają Ci dostęp do potężnych narzędzi, ale nie są zbyt subtelne. Nie można ich dostosować do potrzeb użytkowników ani wstrzyknąć w nie stylów dostosowanych do urządzeń.

Możesz używać globalnych informacji o widoku do stylizacji komponentów, ale nadal nie będą one mieć własnych stylów. Nie będzie to działać, gdy nasze systemy projektowania będą oparte na komponentach, a nie na stronach.

Dobra wiadomość jest taka, że ekosystem się zmienia i zmienia bardzo szybko. CSS się rozwija, a nowa era projektowania elastycznego jest już tuż za rogiem.

Zjawisko to występuje co 10 lat. 10 lat temu, czyli w okresie 2010–2012 r., mieliśmy do czynienia z wielkimi zmianami w zakresie projektowania responsywnego i mobilnego oraz z postępem technologii CSS3.

Okazuje się więc, że ekosystem jest gotowy na wprowadzenie dość dużych zmian w CSS. Inżynierowie z zespołu Chrome i zespół platformy internetowej tworzą prototypy, specyfikacje i rozpoczynają implementację nowej generacji responsywnego projektowania.

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

reagowanie na potrzeby użytkownika,

Nowe funkcje mediów dotyczące preferencji użytkownika umożliwiają dostosowanie wyglądu stron internetowych do konkretnych preferencji i potrzeb użytkownika. Oznacza to, że funkcje mediów preferencji umożliwiają dostosowanie wrażeń użytkownika do jego potrzeb.

Te funkcje mediów dotyczące preferencji użytkownika to:

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

Funkcje preferencji uwzględniają preferencje ustawione przez użytkownika w systemie operacyjnym i pomagają tworzyć bardziej stabilne i spersonalizowane wrażenia z korzystania z internetu, zwłaszcza w przypadku osób z potrzebami w zakresie ułatwień dostępu.

prefers-reduced-motion

Użytkownicy, którzy w ustawieniach systemu operacyjnego mają włączoną opcję ograniczonej animacji, żądają mniej animacji podczas ogólnego korzystania z komputera. Dlatego prawdopodobnie nie spodoba im się efektowny ekran powitalny, animacja odwracania karty, skomplikowany ładujący się obrazek ani inne efektowne animacje.

Dzięki prefers-reduced-motion możesz projektować strony z uwzględnieniem ograniczonego ruchu, a także tworzyć strony z większą ilością animacji dla osób, które nie mają ustawionej tej opcji.

Ta karta zawiera informacje po obu stronach. W przypadku wersji podstawowej z ograniczonym ruchem informacje są wyświetlane w ramach przejścia płynnego, a w wersji z wzmocnionym ruchem – w ramach przewracania karty.

Prefers-reduced-motion nie oznacza „bez animacji”, ponieważ animacja jest bardzo ważna w przekazywaniu informacji online. Zamiast tego zapewnij użytkownikom solidne podstawowe wrażenia, które będą ich prowadzić bez zbędnych ruchów, i stopniowo ulepszaj je bez uwzględniania potrzeb lub preferencji związanych z dostępnością.

prefers-color-scheme

Inną funkcją mediów preferowanych jest prefers-color-scheme. Ta funkcja pozwala dostosować interfejs użytkownika do motywu, który preferuje. W systemie operacyjnym, niezależnie od tego, czy jest to komputer czy urządzenie mobilne, użytkownicy mogą ustawić preferencje dotyczące jasnego, ciemnego lub automatycznego motywu, które zmieniają się w zależności od pory dnia.

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

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

Projektowanie w ciemnym trybie

Projektowanie ciemnego motywu nie polega tylko na odwróceniu kolorów tła i tekstu lub ciemnych suwaków. Istnieje kilka kwestii, o których możesz nie wiedzieć. Możesz na przykład zmniejszyć nasycenie kolorów na ciemnym tle, aby zmniejszyć wibracje wizualne.

Zamiast cieni, aby uzyskać efekt głębi i wysunąć element do przodu, 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.

Motywy ciemne nie tylko zapewniają większą wygodę użytkowania, ale też znacznie wydłużają czas pracy baterii na ekranach AMOLED. Takie ekrany są stosowane w nowszych zaawansowanych telefonach i stają się coraz bardziej popularne na urządzeniach mobilnych.

Badanie dotyczące ciemnych motywów na Androidzie przeprowadzone w 2018 r. wykazało oszczędność energii do 60%, w zależności od jasności ekranu i ogólnego interfejsu użytkownika. Statystyka 60% została uzyskana na podstawie porównania ekranu odtwarzania w YouTube z zatrzymanym filmem przy 100% jasności ekranu w ciemnym motywie interfejsu aplikacji w porównaniu z jasnym motywem.

W miarę możliwości zawsze udostępniaj użytkownikom ciemny motyw.

Dostosowywanie do kontenera

Jednym z najbardziej ekscytujących obszarów w CSS są zapytania dotyczące kontenera, które często nazywa się zapytaniami dotyczącymi elementów. Trudno jest przecenić wpływ, jaki przejście z elastycznego projektowania stron na elastyczne projektowanie na podstawie kontenera wywrze na ekosystem projektowania.

Oto przykład potężnych możliwości, jakie zapewniają zapytania dotyczące kontenerów. Możesz modyfikować dowolne style elementu karty, w tym listę linków, rozmiary czcionek i ogólny układ na podstawie kontenera nadrzędnego:

Ten przykład pokazuje 2 identyczne komponenty o różnych rozmiarach kontenera, które zajmują miejsce w układzie utworzonym za pomocą siatki CSS. Każdy komponent dopasowuje się do swojego unikalnego miejsca i odpowiednio się stylizuje.

Tego rodzaju elastyczności nie można uzyskać za pomocą samych zapytań dotyczących multimediów.

Zapytania dotyczące kontenera zapewniają znacznie bardziej dynamiczne podejście do projektowania responsywnego. Oznacza to, że jeśli umieścisz ten komponent karty w sekcji bocznej lub w sekcji głównej lub w siatce w głównym obszarze strony, sam komponent będzie mieć informacje i rozmiary responsywne zgodnie z kontenerem, a nie obszarem widoku.

Wymaga to użycia atrybutu at-rule @container. Działa to podobnie do zapytania o multimedia z użyciem atrybutu @media, ale zamiast tego @container wysyła zapytanie do nadrzędnego kontenera w celu uzyskania informacji, a nie do przeglądarki ani do przeglądarki użytkownika.

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

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

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

Najpierw ustaw ograniczenie dla elementu nadrzędnego. Następnie napisz zapytanie @container, aby nadać styl dowolnemu elementowi w kontenerze na podstawie jego rozmiaru, używając do tego min-width lub max-width.

Kod powyżej używa max-width i ustawia linki na display:none, a także zmniejsza rozmiar czcionki czasu, gdy kontener ma mniej niż 850px szerokości.

Karty zapytań kontenera

Na tej stronie internetowej demonstracyjnej każdej z kart produktów, w tym tej w hero, na pasku bocznym z ostatnio przeglądanymi elementami i w siatce produktów, jest tym samym komponentem ze tą samą sygnaturą.

Do utworzenia tego układu nie użyto żadnych zapytań o multimedia, tylko zapytania kontenerowe. Dzięki temu każda karta produktu może przejść na odpowiedni układ, aby wypełnić swoją przestrzeń. Siatka korzysta na przykład z łatwo dopasowującego się do dostępnej przestrzeni układu kolumn minmax, który ponownie układa siatkę, gdy przestrzeń jest zbyt ciasna (co oznacza, że osiągnięto 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 staje się poziomy, ponieważ ustawia się na display: flex, który ma domyślny kierunek flexa „wiersz”.

W przypadku mniejszej ilości miejsca karty produktów są ułożone w stos. Każda karta produktu ma swój własny styl, co byłoby niemożliwe przy użyciu samych stylów globalnych.

Mieszanie zapytań kontenera z zapytaniami o multimedia

Zapytania dotyczące kontenerów mają wiele zastosowań, jednym z nich jest komponent kalendarza. Za pomocą zapytań dotyczących kontenera możesz ponownie rozmieścić wydarzenia w kalendarzu i inne segmenty na podstawie dostępnej szerokości ich elementu nadrzędnego.

Ten kontener demo zawiera zapytania, które służą do zmiany układu i stylu daty w kalendarzu oraz dnia tygodnia, a także dopasowywania marginesów i rozmiaru czcionki zaplanowanych wydarzeń, aby lepiej pasowały do dostępnej przestrzeni.

Następnie użyj zapytania o media, aby zmienić cały układ na mniejsze ekrany. Ten przykład pokazuje, jak potężne jest łączenie zapytań dotyczących mediów (zmienianie stylów globalnych lub makro) z zapytaniami dotyczącymi kontenera (zmienianie elementów podrzędnych kontenera i ich stylów mikro).

Teraz możemy tworzyć układy makro i mikro w ramach tego samego komponentu UI, aby umożliwić podejmowanie naprawdę trafnych decyzji projektowych.

Korzystanie z zapytań dotyczących kontenerów

Te wersje demonstracyjne są teraz dostępne do grania po włączeniu flagi w Chrome Canary. Otwórz about://flags w Canary i włącz flagę #enable-container-queries. Umożliwi to obsługę wartości @container, inline-size i block-size w usłudze contain oraz wdrożenia siatki LayoutNG.

Flaga włącza też odpowiednie funkcje Narzędzi deweloperskich Chrome. Dowiedz się, jak przeglądać i debugować zapytania do kontenera w Narzędziach dla programistów.

Style ograniczone

Aby tworzyć zapytania dotyczące kontenerów, użyj stylów ograniczonych za pomocą @scope, aby ograniczyć zasięg selektorów.

Stylizacja ograniczona do zakresu umożliwia stylizację poszczególnych komponentów, aby uniknąć kolizji nazw, co jest już możliwe w ramach wielu frameworków i wtyczek, takich jak moduły CSS. Stylizacja ograniczona umożliwia tworzenie zaszyfrowanych stylów natywnych 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 pierścienia, w których można określić górny i dolny limit. Selektory zawarte w regułach @scope są dopasowywane w zakresie tych limitów.

Przykładem może być panel kart, w którym chcesz, aby karty miały styl ograniczony, ale nie dotyczył on panelu na tych kartach.

dostosowują się do formatu;

Kolejnym tematem w naszej rozmowie na temat nowej ery responsywnego projektowania jest zmiana form czynników i rosnące możliwości, które będziemy musieli uwzględnić w projektach jako społeczność internetowa (np. ekrany o zmieniającym się kształcie czy rzeczywistość wirtualną).

Składane lub elastyczne ekrany oraz projektowanie na ekrany o większej powierzchni to tylko niektóre z obecnych zmian w formie. Rozszerzanie ekranu to kolejna specyfikacja, nad którą pracujemy, aby zaspokoić te nowe potrzeby i wymagania.

W tym przypadku może nam pomóc eksperymentalny query dotyczący multimediów. Obecnie działa w ten sposób: @media (spanning: <type of fold>). W tym przykładzie ustawiono układ siatki z 2 kolumnami: jedna ma szerokość --sidebar-width, która domyślnie wynosi 5 rem, a druga –1fr. Gdy układ jest wyświetlany na ekranie z 2 częściami, z jedną pionową zakładką, wartość --sidebar-width jest aktualizowana za pomocą wartości środowiska z lewej zakładki.

: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ń jednej z składanych części, a interfejs aplikacji – drugiej. Zapobiega to „załamaniom” w interfejsie.

Możesz testować składane ekrany w emulatorze Narzędzi deweloperskich w Chrome, aby ułatwić debugowanie i prototypowanie ekranów rozciągających się bezpośrednio w przeglądarce.

Podsumowanie

Poznawanie projektowania interfejsu poza płaskim ekranem to kolejny powód, dla którego zapytania kontenera i stylizowane style są tak ważne. Umożliwiają one stosowanie stylów komponentów z układem strony i stylami globalnymi oraz stylami użytkownika, co pozwala na bardziej elastyczny projekt responsywny. Oznacza to, że teraz możesz projektować makrolayouty za pomocą zapytań dotyczących multimediów na stronie, w tym niuansów na cały ekran. Jednocześnie możesz używać mikroukładów z zapytaniami kontenerowymi w komponentach oraz dodawać zapytania dotyczące multimediów na podstawie preferencji użytkownika, aby dostosować wrażenia użytkowników do ich indywidualnych preferencji i potrzeb.

To jest nowa reklama elastyczna.

Łączy ona układ makro z mikroukładem, a dodatkowo uwzględnia personalizację i formę urządzenia użytkownika.

Każda z tych zmian stanowiłaby znaczną zmianę w sposobie projektowania stron internetowych. Jednak w zbiorze oznaczają one naprawdę dużą zmianę w sposobie, w jaki postrzegamy projektowanie elastyczne. Nadszedł czas, aby zastanowić się nad tym, jak projektować strony responsywne z uwzględnieniem nie tylko rozmiaru widoku, ale też wszystkich tych nowych osi, aby zapewnić lepsze wrażenia użytkownika oparte na komponentach i spersonalizowane.

Nadchodzi nowa era projektowania stron responsywnych, którą możesz już zacząć poznawać.

web.dev/learnCSS

Jeśli chcesz zwiększyć swoje umiejętności w zakresie CSS i przypomnieć sobie podstawy, mój zespół wprowadza zupełnie nowy, całkowicie bezpłatny kurs i podręcznik CSS na stronie web.dev. Możesz go znaleźć pod adresem web.dev/learnCSS.

Mam nadzieję, że spodobał Ci się ten przegląd kolejnej ery projektowania responsywnego i niektórych prymitywów, które się z nim wiążą. Mam też nadzieję, że podzielasz naszą ekscytację na myśl o tym, co to oznacza dla przyszłości projektowania stron internetowych.

Daje to nam jako społeczności UI ogromne możliwości korzystania ze stylów opartych na komponentach, nowych form czynników i tworzenia responsywnych interfejsów.