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

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

Elastyczne projektowanie witryn

Obecnie, gdy używasz terminu „elastyczne projektowanie”, zapewne starasz się użyć zapytań o multimedia do zmiany układu interfejsu z rozmiaru urządzenia mobilnego, na tablet, aż do rozmiaru komputera.

Wkrótce jednak projektowanie responsywne może zostać uznane za nieaktualne, jak używanie tabel do układu strony.

Zapytania o multimedia oparte na obszarach widocznych oferują wiele zaawansowanych narzędzi, ale nie są dostatecznie szczegółowe. Nie są w stanie reagować na potrzeby użytkowników ani w samych komponentach, które dodają elastyczne style.

Za pomocą globalnych informacji o widocznym obszarze możesz określić styl komponentów, ale style te nie należą do Ciebie. Ta metoda nie działa, gdy nasze systemy projektowe opierają się na komponentach, a nie na stronach.

Dobra wiadomość jest taka, że ekosystem zmienia się i następuje szybko. CSS ewoluuje, a nowa era projektowania elastycznego jest tuż na horyzoncie.

Dzieje się tak mniej więcej co 10 lat. 10 lat temu, mniej więcej w latach 2010–2012, byliśmy świadkami ogromnej zmiany w projekcie mobilnym i elastycznym, a także z powstaniem CSS3.

Okazuje się więc, że ekosystem jest gotowy na wprowadzenie poważnych zmian w CSS. Inżynierowie Chrome i całej platformy internetowej opracowują prototypy, opracowują specyfikacje i rozpoczynają wdrażanie tych rozwiązań na nową erę projektowania responsywnego.

Aktualizacje te obejmują funkcje multimedialne oparte na preferencjach użytkownika, zapytania dotyczące kontenerów oraz zapytania o multimedia dla nowych typów ekranów, takich jak ekrany składane.

Dostosowanie do użytkownika

Nowe funkcje multimedialne związane z ustawieniami wybranymi przez użytkownika pozwalają Ci dostosować środowisko internetowe do jego preferencji i potrzeb. Oznacza to, że preferowane funkcje multimedialne pozwalają dostosować wrażenia użytkownika do jego potrzeb.

Funkcje multimedialne związane z preferencjami użytkownika obejmują:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• oraz inne informacje.

Funkcje preferencji korzystają z preferencji określonych przez użytkownika w systemie operacyjnym i pomagają tworzyć bardziej niezawodne i spersonalizowane funkcje internetowe, szczególnie dla osób z niepełnosprawnościami.

prefers-reduced-motion

Użytkownicy, którzy ustawili w systemie operacyjnym preferencje dotyczące zmniejszonego ruchu, żądają mniejszej liczby animacji podczas korzystania z komputera. Dlatego prawdopodobnie nie docenią efektownego ekranu z wprowadzeniem, animacji odwracania karty, skomplikowanego modułu wczytywania ani innych krzykliwych animacji w internecie.

Dzięki prefers-reduced-motion możesz projektować strony z myślą o zminimalizowanym ruchu i tworzyć treści z lepszymi efektami ruchu osobom, które nie mają takich ustawień.

Ta karta zawiera informacje po obu stronach. Podstawowy efekt zmniejszonego ruchu wyświetla się w postaci przenikania, a efekt Ulepszony ruch to widok karty.

Zwolennik mniejszej ilości ruchu nie powinien oznaczać „braku ruchu”, ponieważ ruch jest niezwykle ważny przy przekazywaniu informacji online. Zamiast tego zadbaj o dobre środowisko, które poprowadzi użytkowników bez zbędnego ruchu, i stopniowo ulepszaj wrażenia użytkowników, ignorując potrzeby i preferencje związane z ułatwieniami dostępu.

prefers-color-scheme

Kolejną preferowaną funkcją multimediów jest prefers-color-scheme. Ta funkcja pozwala dostosować interfejs do motywu, który preferuje użytkownik. W swoim systemie operacyjnym, zarówno na komputerze, jak i na urządzeniu mobilnym, użytkownicy mogą ustawić jasny, ciemny lub automatyczny motyw, które zmieniają się w zależności od pory dnia.

Jeśli konfigurujesz stronę za pomocą niestandardowych właściwości CSS, zamiana kolorów jest prosta. Możesz szybko zaktualizować wartości motywu kolorów, np. backgroundColor i textOnPrimary, aby dynamicznie dostosowywać się do nowego motywu w zapytaniu o media.

Aby ułatwić testowanie niektórych z tych zapytań preferencji, możesz użyć DevTools do emulacji, zamiast za każdym razem otwierać preferencje systemowe.

Projektowanie z myślą o ciemnym motywie

Projektując ciemny motyw, nie musisz tylko odwracać kolorów tła i tekstu ani ciemnych pasków przewijania. Jest kilka kwestii, o których możesz nie wiedzieć. Możesz na przykład zmniejszyć nasycenie kolorów na ciemnym tle, aby ograniczyć wibracje wizualne.

Zamiast korzystać z cieni, aby tworzyć głębię i przeciągać element do przodu, możesz wykorzystać światło w kolorze tła elementu, aby go przyciągnąć. Wynika to z faktu, że cienie nie będą tak skuteczne na ciemnym tle.

Ciemne motywy nie tylko zapewniają bardziej spersonalizowane wrażenia, ale mogą też znacznie zwiększyć żywotność baterii na ekranach AMOLED. Takie ekrany widać na nowszych telefonach zaawansowanych, które cieszą się coraz większą popularnością na urządzeniach mobilnych.

Badanie z Androida w 2018 r. dotyczące ciemnych motywów wykazało, że w zależności od jasności ekranu i ogólnego interfejsu użytkownika można zaoszczędzić nawet 60%. 60% statystyk wynikało z porównania ekranu odtwarzania w YouTube z wstrzymanym filmem przy 100% jasności ekranu, używając ciemnego motywu w interfejsie aplikacji z jasnym motywem.

Zawsze, gdy to możliwe, włączaj ciemny motyw użytkownikom.

Reakcja na kontener

Jednym z najciekawszych nowych obszarów CSS są zapytania o kontenery, nazywane też zapytaniami dotyczącymi elementów. Trudno zaprzeczyć, jak przejście z elastycznego projektowania stron na elastyczne projektowanie oparte na kontenerach wpłynie na ewolucję ekosystemu projektowania.

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

Ten przykład pokazuje 2 identyczne komponenty o 2 różnych rozmiarach kontenerów, które zajmują miejsce w układzie utworzonym za pomocą siatki CSS. Każdy komponent pasuje do swojego unikalnego przydziału przestrzeni i odpowiednio do nich pasuje.

Tak duża elastyczność jest niemożliwa w przypadku samych zapytań o multimedia.

Zapytania dotyczące kontenerów zapewniają znacznie bardziej dynamiczne podejście do elastycznego projektowania stron. Oznacza to, że jeśli umieścisz komponent karty w pasku bocznym, w sekcji banera powitalnego lub w siatce w głównej części strony, sam komponent będzie miał swoje elastyczne informacje i rozmiary zgodne z kontenerem, a nie widocznym obszarem.

Wymaga to reguły @container. Działa to podobnie jak w przypadku zapytania o multimedia z użyciem @media, ale zamiast tego @container wysyła zapytanie do kontenera nadrzędnego, by uzyskać informacje, a nie o widoczny obszar i klienta użytkownika.

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

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

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

Najpierw ustaw blokadę elementu nadrzędnego. Następnie wpisz zapytanie @container, aby stylizować dowolne elementy w kontenerze na podstawie jego rozmiaru, korzystając z metody min-width lub max-width.

Powyższy kod używa parametru max-width i ustawia linki na display:none, a także zmniejsza rozmiar czcionki czasu, gdy kontener ma szerokość poniżej 850px.

Karty zapytań kontenera

W tej witrynie demonstracyjnej wszystkie karty produktów, w tym karta główna, pasek boczny ostatnio wyświetlanych produktów i siatka produktów, stanowią dokładnie ten sam komponent z tymi samymi znacznikami.

Do utworzenia całego układu nie ma żadnych zapytań o media, a jedynie zapytania dotyczące kontenerów. Dzięki temu poszczególne karty produktów będą mogły przejść do odpowiedniego układu, aby wypełnić całą przestrzeń. Na przykład w siatce jest stosowany układ kolumn Minmax, który pozwala elementom umieścić w swojej przestrzeni, a siatka jest ponownie układana, gdy ta przestrzeń jest zbyt skompresowana (co oznacza, że osiągnie 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 wolnego miejsca, układ karty jest układany w poziomie, ustawiając wartość display: flex, która ma domyślny kierunek zwijania „wiersza”.

Mając mniej miejsca, można grupować karty produktów w stosy Każda karta produktu ma własny styl, co byłoby niemożliwe, gdyby poza stylem globalnym

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

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

To przykładowe zapytania kontenera, które pozwalają zmienić układ i styl daty i dnia tygodnia w kalendarzu, a także dostosowywanie marginesów i rozmiaru czcionki zaplanowanych wydarzeń, by lepiej pasowały do przestrzeni.

Następnie użyj zapytania o multimedia, aby przesunąć cały układ na potrzeby mniejszych ekranów. Ten przykład pokazuje, jak skuteczne jest combine zapytań o media (dostosowanie stylów globalnych lub makr) z zapytaniami dotyczącymi kontenerów (dostosowanie elementów podrzędnych kontenera i ich mikrostylów).

Układy makro i mikro w ramach jednego elementu interfejsu użytkownika umożliwiają podejmowanie przemyślanych decyzji projektowych.

Korzystanie z zapytań dotyczących kontenerów na dziś

Teraz możesz wypróbować te wersje demonstracyjne w Chrome Canary. Otwórz about://flags w wersji Canary i włącz flagę #enable-container-queries. Umożliwi to obsługę wartości @container, inline-size i block-size w przypadku właściwości contain i implementacji siatki UkładNG.

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

Style zakresu

Aby tworzyć zapytania dotyczące kontenerów, grupa robocza ds. usług porównywania cen aktywnie omawia style zakresu, by ułatwić dobór właściwego tempa nazw i zapobieganie kolizji w przypadku komponentów.

Style o zakresie zakresu pozwalają na stosowanie stylów przelotowych i specyficznych dla komponentów, co eliminuje kolizje nazw. Jest to coś, co wiele platform i wtyczek, takich jak moduły CSS, umożliwia już nam wykonywanie w ramach platform. Ta specyfikacja umożliwiłaby nam teraz bezpośrednie pisanie stylów hermetycznych dla naszych komponentów w czytelnym kodzie 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ślenie zakresu pozwoliłoby nam utworzyć selektory w kształcie pierścienia, w których można określić, gdzie styl ma być zamknięty, i gdzie wychodzić z tego stylu, aby odnosić się do stylu bardziej globalnego.

Przykładem może być panel kart, w którym karty mają pobierać styl zakresu, i panel na kartach, by uzyskać styl nadrzędny.

Dostosowanie do formatu

Następnym tematem, z którego rozmawiamy o nowej erze projektowania responsywnego, jest zmiana formatu oraz rosnące możliwości tworzenia dla społeczności internetowej (takich jak przesuwanie ekranu czy rzeczywistość wirtualna).

Ekrany składane lub elastyczne, a projektowanie pod kątem rozpiętości ekranu to jeden z przykładów dzisiejszej zmiany formatu. Rozpiętość ekranu to kolejna specyfikacja, nad którą pracujemy, aby uwzględnić nowe formaty i potrzeby.

Pomóc nam w tym eksperymentalne zapytanie o multimedia do poszerzania ekranu. Obecnie działa ono w ten sposób: @media (spanning: <type of fold>). W wersji demonstracyjnej układ siatki składa się z 2 kolumn: jedna ma szerokość --sidebar-width, która domyślnie wynosi 5 rem, a druga 1fr. Gdy układ wyświetla się na podwójnym ekranie z pojedynczym złożeniem w pionie, wartość --sidebar-width jest aktualizowana o wartość środowiska w części strony widocznej po lewej stronie.

: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 utworzenie układu, w którym pasek boczny – w tym przypadku elementy nawigacyjne – wypełnia miejsce w jednej części strony, gdzie interfejs aplikacji wypełnia drugą. Zapobiega to powstawaniu zagniecenia interfejsu.

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

Podsumowanie

Poznawanie interfejsu użytkownika wykraczającego poza płaski ekran to kolejny powód, dla którego zapytania kontenerów i style zakresu są tak ważne. Umożliwiają odseparowanie stylów komponentów od układu strony i stylów globalnych po style użytkownika, co zwiększa elastyczność elastycznego projektowania stron. Oznacza to, że możesz teraz projektować układy makr, korzystając z zapytań o multimedia na podstawie stron, w tym niuansów obejmujących całą zawartość ekranu. Jednocześnie można używać mikroukładów z zapytaniami dotyczącymi kontenerów na poziomie komponentów, a także dodawać zapytania o media z preferencjami użytkownika, aby dostosować wrażenia użytkowników do własnych preferencji i potrzeb.

To jest nowa elastyczna reklama.

Łączy ona układ makro z układem mikro, a co najważniejsze, bierzemy pod uwagę dostosowanie użytkownika oraz format reklamy.

Każda z tych zmian mogłaby spowodować znaczącą zmianę w sposobie projektowania witryn. razem oznacza to ogromną zmianę, w której nawet koncepcjonujemy elastyczne projektowanie. Czas pomyśleć o elastycznym projektowaniu stron wykraczających poza rozmiar widocznego obszaru i zacząć uwzględniać wszystkie nowe osie, aby lepiej korzystać z komponentów i dostosowań do potrzeb użytkownika.

Rozpoczęła się nowa era projektowania responsywnego, a możesz już samodzielnie ją odkrywać.

web.dev/learnCSS

Jeśli chcesz przenieść swoją grę na wyższy poziom lub wrócić do podstaw, nasz zespół uruchamia zupełnie nowy, całkowicie bezpłatny kurs CSS i materiały referencyjne na stronie web.dev. Możesz go otworzyć na stronie web.dev/learnCSS.

Mam nadzieję, że zainteresowało Cię to omówienie nowej ery projektowania stron responsywnych i kilku związanych z nim podstawowych rozwiązań. Mam też nadzieję, że także nie możesz się doczekać, co to oznacza dla przyszłości projektowania witryn.

Daje to nam, jako społeczności interfejsu, ogromne możliwości wykorzystania stylów opartych na komponentach i nowych formatów oraz tworzenia responsywnych rozwiązań.