Kontrolowanie układu makro i mikro w nowej erze elastycznego projektowania stron internetowych.
Elastyczne projektowanie stron
Obecnie, gdy używasz terminu „projekt elastyczny”, najprawdopodobniej myślisz o używaniu zapytań o multimedia do zmiany układu podczas zmiany rozmiaru projektu z mobilnego na tabletowy i dalej na komputerowy.
Wkrótce jednak to postrzeganie projektowania responsywnego może być uważane za przestarzałe, podobnie jak używanie tabel do układu strony.
Zapytania o media oparte na obszarze wyświetlania dają Ci potężne narzędzia, ale brakuje im precyzji. Nie mogą one reagować na potrzeby użytkowników ani wstrzykiwać do komponentów stylów responsywnych.
Możesz używać globalnych informacji o obszarze widoku do określania stylu komponentów, ale nie są one właścicielami swoich 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 projektowania responsywnego jest tuż za rogiem.
Zdarza się to mniej więcej co 10 lat. Około 10 lat temu, w okresie 2010–2012, nastąpiła ogromna zmiana związana z urządzeniami mobilnymi i elastycznym projektowaniem stron oraz pojawieniem się CSS3.
W rezultacie ekosystem jest gotowy na dość duże zmiany w usługach porównywania cen. Inżynierowie z zespołu Chrome i zespołu platformy internetowej tworzą prototypy, specyfikacje i rozpoczynają wdrażanie kolejnej generacji projektowania responsywnego.
Obejmują one funkcje multimedialne oparte na preferencjach użytkownika, zapytania o kontenery i zapytania o media dotyczące nowych typów ekranów, takich jak ekrany składane.
Dostosowane do użytkownika
Nowe funkcje multimedialne dotyczące preferencji użytkownika umożliwiają stylizowanie stron internetowych zgodnie z jego konkretnymi preferencjami i potrzebami. Oznacza to, że funkcje multimedialne związane z preferencjami umożliwiają dostosowywanie wrażeń użytkowników do ich potrzeb.
Do tych funkcji multimedialnych związanych z preferencjami użytkownika należą:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- I nie tylko
Funkcje preferencji wykrywają ustawienia użytkownika w systemie operacyjnym i pomagają tworzyć bardziej niezawodne i spersonalizowane środowisko internetowe, zwłaszcza dla osób z potrzebami w zakresie ułatwień dostępu.
prefers-reduced-motion
Użytkownicy, którzy ustawili preferencje systemu operacyjnego dotyczące ograniczenia ruchu, proszą o wyświetlanie mniejszej liczby animacji podczas korzystania z komputera. Dlatego prawdopodobnie nie będą zadowoleni z efektownego ekranu wprowadzającego, animacji odwracania karty, skomplikowanego wczytywania czy innych efektownych animacji podczas korzystania z internetu.
Dzięki prefers-reduced-motion możesz projektować strony z myślą o osobach, które wolą ograniczone animacje, i tworzyć bardziej dynamiczne środowisko dla tych, które nie mają ustawionych takich preferencji.
Ta karta zawiera informacje po obu stronach. Podstawowa wersja z ograniczonym ruchem to przenikanie, a wersja z większym ruchem to obracanie karty.
Prefers-reduced-motion nie powinno oznaczać „brak ruchu”, ponieważ ruch jest tak ważny w przekazywaniu informacji online. Zamiast tego zapewnij solidne podstawowe wrażenia, które prowadzą użytkowników bez zbędnych ruchów, i stopniowo ulepszaj te wrażenia dla użytkowników, którzy nie mają takich potrzeb ani preferencji w zakresie ułatwień dostępu.
prefers-color-scheme
Kolejną funkcją multimedialną dotyczącą preferencji jest prefers-color-scheme. Ta funkcja pomaga dostosować interfejs do motywu, który preferuje użytkownik. W systemie operacyjnym (na komputerze lub urządzeniu mobilnym) użytkownicy mogą ustawić preferencje dotyczące motywów jasnego, ciemnego lub automatycznego, które zmieniają się w zależności od pory dnia.
Jeśli skonfigurujesz stronę za pomocą niestandardowych właściwości CSS, zamiana wartości kolorów będzie prosta. Możesz szybko zaktualizować wartości motywu kolorystycznego, takie jak backgroundColor i textOnPrimary, aby dynamicznie dostosować je do nowego motywu w ramach zapytania 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ć ustawienia systemowe.
Projektowanie z myślą o ciemnym motywie
Projektowanie ciemnego motywu nie polega tylko na odwróceniu kolorów tła i tekstu czy ciemnych paskach przewijania. Jest kilka kwestii, o których możesz nie wiedzieć. Może być na przykład konieczne zmniejszenie nasycenia kolorów na ciemnym tle, aby ograniczyć drgania obrazu.
Zamiast używać cieni do tworzenia głębi i wysuwania elementu do przodu, możesz użyć światła w kolorze tła elementu, aby go wysunąć. Dzieje się tak, ponieważ cienie nie są tak skuteczne na ciemnym tle.
Ciemne motywy nie tylko zapewniają większą wygodę użytkownikom, ale też mogą znacznie wydłużyć czas pracy baterii w przypadku ekranów AMOLED. Takie ekrany są stosowane w nowszych, zaawansowanych telefonach i stają się coraz popularniejsze na urządzeniach mobilnych.
Badanie z 2018 r. dotyczące ciemnych motywów na Androidzie wykazało oszczędność energii nawet o 60% w zależności od jasności ekranu i ogólnego interfejsu użytkownika. Dane dotyczące 60% pochodzą z porównania ekranu odtwarzania w YouTube z wstrzymanym filmem przy 100% jasności ekranu w przypadku interfejsu aplikacji z motywem ciemnym i jasnym.
Zawsze, gdy jest to możliwe, zapewniaj użytkownikom ciemny motyw.
Dostosowanie do kontenera
Jednym z najbardziej obiecujących nowych obszarów w CSS są zapytania o kontener, często nazywane też zapytaniami o element. Trudno przecenić, jak przejście od elastycznego projektowania opartego na stronach do elastycznego projektowania opartego na kontenerach wpłynie na rozwój ekosystemu projektowania.
Oto przykład możliwości, jakie dają zapytania o kontenery. Możesz modyfikować style dowolnego 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 2 różnych rozmiarach 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 dostosowuje swój styl.
Taka elastyczność nie jest możliwa w przypadku samych zapytań o media.
Zapytania o kontener zapewniają znacznie bardziej dynamiczne podejście do projektowania responsywnego. Oznacza to, że jeśli umieścisz ten komponent karty na pasku bocznym, w sekcji głównej lub w siatce w głównej części strony, komponent będzie zawierać informacje o dostosowywaniu się do różnych urządzeń i będzie zmieniać rozmiar w zależności od kontenera, a nie od obszaru wyświetlania.
Wymaga to reguły @container. Działa ona podobnie do zapytania o media z użyciem @media, ale zamiast informacji o obszarze wyświetlania i agencie użytkownika @container wysyła zapytanie do kontenera nadrzędnego.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Najpierw ustaw ograniczenie na elemencie nadrzędnym. Następnie napisz @containerzapytanie, aby określić styl dowolnego elementu w kontenerze na podstawie jego rozmiaru, używając min-width lub max-width.
Powyższy kod używa funkcji max-width i ustawia linki na display:none, a także zmniejsza rozmiar czcionki czasu, gdy kontener ma szerokość mniejszą niż 850px.
Karty z zapytaniami dotyczącymi kontenerów
Na tej demonstracyjnej stronie internetowej sklepu z roślinami wszystkie karty produktów, w tym karta w sekcji głównej, na pasku bocznym z ostatnio wyświetlanymi produktami i w siatce produktów, są dokładnie tym samym komponentem z tymi samymi znacznikami.
Do utworzenia tego układu nie użyto zapytań o multimedia, tylko zapytania o kontenery. Dzięki temu każda karta produktu może się dopasować do odpowiedniego układu, aby wypełnić przestrzeń. Na przykład siatka korzysta z układu kolumn minmax, aby umożliwić elementom przepływanie do ich przestrzeni i ponowne układanie siatki, gdy ta 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 elastycznego kontenera „row”.
Przy mniejszej ilości miejsca karty produktów układają się jedna na drugiej. Każda karta produktu ma własny styl, co byłoby niemożliwe w przypadku samych stylów globalnych.
Łączenie zapytań o kontenery z zapytaniami o multimedia
Zapytania o kontener mają wiele zastosowań, jednym z nich jest komponent kalendarza. Możesz używać zapytań o kontener, aby zmieniać układ wydarzeń w kalendarzu i innych segmentów w zależności od dostępnej szerokości elementu nadrzędnego.
Ten kontener demonstracyjny wysyła zapytania, aby zmienić układ i styl daty i dnia tygodnia w kalendarzu, a także dostosować marginesy i rozmiar czcionki w zaplanowanych wydarzeniach, aby lepiej pasowały do dostępnego miejsca.
Następnie użyj zapytania o media, aby przesunąć cały układ na mniejsze ekrany. Ten przykład pokazuje, jak przydatne jest łączenie zapytań o media (dostosowywanie stylów globalnych lub makro) z zapytaniami o kontener (dostosowywanie elementów podrzędnych kontenera i ich stylów mikro).
Dzięki temu możemy teraz myśleć o układach makro i mikro w ramach tego samego komponentu interfejsu, co pozwala podejmować naprawdę przemyślane decyzje projektowe.
Korzystanie z zapytań o kontener już dziś
Te wersje demonstracyjne są teraz dostępne w Chrome Canary za flagą. Otwórz
about://flags w Canary i włącz flagę #enable-container-queries.
Włączy to obsługę wartości @container, inline-size i block-size w przypadku właściwości contain oraz wdrożenie siatki LayoutNG.
Flaga włącza też odpowiednie funkcje Narzędzi deweloperskich w Chrome. Dowiedz się, jak sprawdzać i debugować zapytania o kontenery w Narzędziach.
Style ograniczone do zakresu
Aby korzystać z zapytań o kontener, używaj stylów ograniczonych za pomocą @scope, aby ograniczyć zasięg selektorów.
Style o ograniczonym zakresie umożliwiają stylizowanie poszczególnych komponentów, aby uniknąć konfliktów nazw. Wiele platform i wtyczek, takich jak moduły CSS, już umożliwia nam to w ramach platform. Style o ograniczonym zakresie umożliwiają natywne pisanie hermetyzowanych stylów dla komponentów z czytelnym kodem CSS bez konieczności dostosowywania kodu 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żesz 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 do zakresu, ale panel w tych kartach nie był objęty tymi stylami.
Dostosowanie do formatu
Kolejnym tematem w naszej rozmowie o nowej erze projektowania responsywnego 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 wirtualna rzeczywistość).
Składane lub elastyczne ekrany oraz projektowanie z myślą o wyświetlaniu na wielu ekranach to przykład zmiany formy, którą obserwujemy obecnie. Kolejną specyfikacją, nad którą pracujemy, jest rozciąganie ekranu, aby uwzględnić te nowe formy i potrzeby.
Pomocne może być eksperymentalne zapytanie o media dotyczące ekranów obejmujących całą szerokość. Obecnie działa to tak: @media
(spanning: <type of fold>). W wersji demonstracyjnej jest skonfigurowany układ siatki z 2 kolumnami: jedna ma szerokość --sidebar-width, która domyślnie wynosi 5 rem, a druga ma szerokość 1fr. Gdy układ jest wyświetlany na urządzeniu z 2 ekranami, które mają pojedyncze pionowe zgięcie, wartość --sidebar-width jest aktualizowana o wartość środowiska lewego zgię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 zgięcia, a interfejs aplikacji – drugiego. Zapobiega to powstawaniu „zagniecenia” w interfejsie.
Możesz testować składane ekrany w emulatorze Narzędzi deweloperskich w Chrome, aby debugować i tworzyć prototypy rozciągania ekranu bezpośrednio w przeglądarce.
Podsumowanie
Odkrywanie projektowania interfejsu wykraczającego poza płaski ekran to kolejny powód, dla którego zapytania o kontenery i style ograniczone do zakresu są tak ważne. Umożliwiają one odseparowanie stylów komponentów od układu strony, stylów globalnych i stylów użytkownika, co pozwala tworzyć bardziej odporne projekty elastyczne. Oznacza to, że możesz teraz projektować makroelementy układu za pomocą zapytań o media opartych na stronach, w tym niuansów dotyczących całego ekranu. Jednocześnie używaj mikroukładów z zapytaniami o kontenery w komponentach i dodawaj zapytania o media oparte na preferencjach użytkownika, aby dostosowywać wrażenia użytkownika do jego indywidualnych preferencji i potrzeb.
To jest nowy format elastyczny.
Łączy on układ makro z układem mikro, a dodatkowo uwzględnia dostosowanie przez użytkownika i format urządzenia.
Każda z tych zmian stanowiłaby znaczącą zmianę w sposobie projektowania stron internetowych. Jednak razem oznaczają one ogromną zmianę w sposobie, w jaki postrzegamy projektowanie elastyczne. Czas pomyśleć o projektowaniu responsywnym w kontekście nie tylko rozmiaru widocznego obszaru, ale też wszystkich tych nowych osi, aby tworzyć lepsze, oparte na komponentach i dostosowane do potrzeb użytkowników rozwiązania.
Nadchodzi nowa era elastycznego projektowania, którą możesz już zacząć poznawać.
web.dev/learnCSS
Jeśli chcesz podnieść poziom swojej wiedzy o usługach porównywania cen i przypomnieć sobie podstawy, mój zespół uruchamia nowy, całkowicie bezpłatny kurs i materiały referencyjne dotyczące usług porównywania cen na stronie web.dev. Możesz uzyskać do nich dostęp na stronie web.dev/learnCSS.
Mam nadzieję, że ten przegląd nowej ery projektowania responsywnego i niektórych związanych z nim podstawowych elementów był dla Ciebie interesujący. Mam też nadzieję, że tak jak ja z entuzjazmem podchodzisz do tego, co to oznacza dla przyszłości projektowania stron internetowych.
Daje nam to ogromną szansę na przyjęcie w społeczności projektantów interfejsów stylów opartych na komponentach i nowych form oraz tworzenie środowisk reagujących na działania użytkowników.