CSS jako silnik konfiguracji interfejsu. Czego Bootstrap 5.3 nauczył nas dzięki data-bs-theme
Jedną z najciekawszych zmian w Bootstrapie 5.3 nie są nowe komponenty ani kolejne klasy pomocnicze. Jest nią sposób zarządzania motywami za pomocą atrybutu data-bs-theme.
<html data-bs-theme="dark">oraz odpowiadający mu fragment CSS:
[data-bs-theme="dark"] {
--bs-body-bg: #212529;
--bs-body-color: #dee2e6;
}W rzeczywistości jest to znacznie więcej niż przełącznik trybu jasnego i ciemnego. To przykład wykorzystania CSS jako deklaratywnego mechanizmu konfiguracji całego interfejsu.
Jak to działa?
Przeglądarka nie potrzebuje JavaScriptu, aby zastosować odpowiedni motyw.
Podczas parsowania dokumentu HTML odczytywane są wszystkie atrybuty elementów. Następnie parser CSS sprawdza, które selektory pasują do których elementów.
Selektor
[data-bs-theme="dark"]oznacza po prostu:
Dopasuj każdy element posiadający atrybut
data-bs-themeo wartościdark.
Jeżeli dokument zawiera:
<html data-bs-theme="dark">reguły zostają zastosowane automatycznie.
Nie ma tutaj żadnej magii ani specjalnej funkcji Bootstrapa. Jest to standardowy mechanizm CSS obecny od wielu lat.
Dlaczego zmienia się cała strona?
Bootstrap opiera swój system kolorów na zmiennych CSS.
Przykładowo:
[data-bs-theme="dark"] {
--bs-body-bg: #212529;
--bs-primary: #0d6efd;
}a następnie w wielu miejscach wykorzystuje je w ten sposób:
body {
background: var(--bs-body-bg);
}
.btn-primary {
background: var(--bs-primary);
}Zmienne zdefiniowane na elemencie <html> są dziedziczone przez wszystkie elementy dokumentu.
W praktyce oznacza to, że jedna zmiana atrybutu może wpłynąć na tysiące elementów bez konieczności dodawania lub usuwania klas.
CSS jako system konfiguracji
Najciekawsze jest jednak to, że identyczny mechanizm można wykorzystać do znacznie większej liczby ustawień niż tylko wybór motywu.
Wyobraźmy sobie, że zamiast jednego atrybutu definiujemy kilka niezależnych parametrów interfejsu.
<html
data-bs-theme="dark"
data-bs-density="compact"
data-bs-radius="none"
data-bs-shadow="soft">Każdy z nich odpowiada za zupełnie inny aspekt wyglądu aplikacji.
Sprawdź sam
Poniższy przykład pokazuje, że JavaScript nie zmienia żadnych właściwości CSS. Jego jedynym zadaniem jest modyfikacja atrybutów data-bs-* elementu <html>. To silnik CSS dopasowuje selektory, przelicza zmienne i odświeża wygląd całej strony.
Wskazówka: Otwórz Narzędzia deweloperskie (F12), zaznacz element <html> i obserwuj, jak podczas kliknięcia zmieniają się wyłącznie atrybuty data-bs-*. Zwróć uwagę, że JavaScript nie ustawia żadnych stylów – robi to wyłącznie CSS.
Przykładowa karta
To jest zwykła karta Bootstrapa. Klikaj przyciski powyżej i obserwuj jak zmienia się wygląd całej strony.
Aktualna konfiguracja
W pokazanej demonstracji wykorzystaliśmy kilka własnych atrybutów (
data-bs-density,data-bs-radius,data-bs-accentitd.). Bootstrap 5.3 udostępnia oficjalnie jedyniedata-bs-theme, jednak nic nie stoi na przeszkodzie, aby tę samą technikę zastosować do budowy własnego systemu konfiguracji interfejsu.
To sprawia, że przykład nie jest tylko "gadżetem", ale staje się punktem zwrotnym artykułu. Najpierw wyjaśniasz teorię, potem pozwalasz czytelnikowi ją zweryfikować, a dopiero później rozwijasz temat o kolejne możliwości. To układ często stosowany w dobrych artykułach technicznych, bo utrzymuje zainteresowanie i wzmacnia zrozumienie.
Omówienie poszczególnych atrybutów (data-bs-density, ...)
Gęstość interfejsu
Pierwszym przykładem może być regulacja gęstości rozmieszczenia elementów.
[data-bs-density="compact"] {
--bs-spacer: .5rem;
--bs-btn-padding-y: .25rem;
--bs-btn-padding-x: .5rem;
}Dzięki temu cała aplikacja staje się bardziej zwarta.
W panelach administracyjnych można wyświetlić więcej informacji na ekranie, natomiast aplikacje mobilne mogą korzystać z większych odstępów bez zmiany pojedynczego komponentu.
Styl zaokrągleń
Drugim przykładem jest sterowanie wyglądem narożników.
[data-bs-radius="none"] {
--bs-border-radius: 0;
}lub
[data-bs-radius="pill"] {
--bs-border-radius: 100rem;
}Jedna wartość zmienia wygląd przycisków, formularzy, kart oraz wszystkich komponentów wykorzystujących zmienną --bs-border-radius.
Kolor akcentu
Bootstrap już dziś wykorzystuje zmienną --bs-primary.
Nic nie stoi na przeszkodzie, aby zmieniać ją deklaratywnie.
[data-bs-accent="green"] {
--bs-primary: #198754;
}
[data-bs-accent="purple"] {
--bs-primary: rebeccapurple;
}Aplikacja może oferować użytkownikowi kilka wariantów kolorystycznych bez przeładowywania arkuszy stylów.
Cienie
Podobnie można kontrolować intensywność cieni.
[data-bs-shadow="none"] {
--bs-box-shadow: none;
}
[data-bs-shadow="soft"] {
--bs-box-shadow: 0 .25rem .75rem rgba(0,0,0,.12);
}Projekt automatycznie przyjmuje bardziej płaski lub bardziej przestrzenny charakter.
Kontrast
Dostępność również może zostać opisana za pomocą atrybutu.
[data-bs-contrast="high"] {
--bs-border-color: black;
--bs-body-color: black;
}Nie jest potrzebna osobna wersja arkusza stylów.
Typografia
Zmiana kroju pisma również może zostać sprowadzona do prostego przełącznika.
[data-bs-font="serif"] {
--bs-body-font-family: Georgia, serif;
}lub
[data-bs-font="system"] {
--bs-body-font-family: system-ui, sans-serif;
}Skala interfejsu
Jeszcze ciekawszym rozwiązaniem jest wykorzystanie jednostek rem.
[data-bs-scale="large"] {
font-size: 112.5%;
}Ponieważ Bootstrap szeroko wykorzystuje jednostki względne, zmiana rozmiaru czcionki elementu <html> powoduje proporcjonalne przeskalowanie całego interfejsu.
Kompozycja zamiast klas
Największą zaletą tego podejścia jest możliwość łączenia wielu konfiguracji.
<html
data-bs-theme="dark"
data-bs-density="compact"
data-bs-radius="none"
data-bs-shadow="soft"
data-bs-accent="green"
data-bs-scale="large">Każdy atrybut odpowiada za jedną cechę projektu.
Nie ma potrzeby tworzenia dziesiątek klas typu:
.theme-dark.compact-ui.rounded-none.shadow-soft.accent-green
Nie trzeba również przełączać arkuszy stylów.
CSS sam dobiera odpowiednie reguły.
Zalety takiego podejścia
Najważniejsze korzyści są oczywiste:
- brak zależności od JavaScriptu,
- deklaratywna konfiguracja,
- możliwość dziedziczenia ustawień przez cały dokument,
- łatwe rozszerzanie o kolejne parametry,
- dobra współpraca ze zmiennymi CSS,
- większa czytelność kodu.
Każdy parametr staje się niezależnym elementem konfiguracji aplikacji.
Czy Bootstrap pójdzie w tym kierunku?
Trudno powiedzieć.
Bootstrap 5.3 pokazał jednak, że data-bs-theme nie musi być jedynie przełącznikiem trybu jasnego i ciemnego. Jest dowodem na to, że selektory atrybutów mogą pełnić rolę warstwy konfiguracji całego systemu projektowego.
Można sobie wyobrazić przyszłe wersje frameworków, w których większość ustawień wyglądu będzie definiowana właśnie za pomocą atrybutów data-*, a CSS stanie się nie tylko językiem opisu stylów, ale również deklaratywnym silnikiem konfiguracji interfejsu.
Podsumowanie
Przez wiele lat CSS był postrzegany jako język odpowiedzialny wyłącznie za wygląd elementów.
Nowoczesny CSS, wsparty zmiennymi, dziedziczeniem i selektorami atrybutów, pokazuje jednak inne podejście. Zamiast zarządzać wyglądem poprzez setki klas i skomplikowaną logikę JavaScriptu, można opisać stan całego interfejsu za pomocą kilku prostych atrybutów.
data-bs-theme jest tylko początkiem. Ten sam mechanizm można wykorzystać do definiowania gęstości interfejsu, promieni zaokrągleń, kontrastu, kolorów akcentów, cieni, typografii czy skali całej aplikacji.
Być może właśnie w tym kierunku będzie rozwijał się CSS – jako język nie tylko stylów, lecz także konfiguracji interfejsu.
