Stwórz dynamiczny CSS dzięki niestandardowym właściwościom CSS

Jeśli piszesz CSS od jakiegoś czasu, musiałeś w pewnym momencie odczuć potrzebę zmiennych. Niestandardowe właściwości CSS są trochę jak własna implementacja zmiennych CSS. Jednak przy odpowiednim użyciu mogą być czymś więcej niż tylko zmiennymi.

Niestandardowe właściwości CSS umożliwiają:

• Przypisz dowolne wartości do właściwości o wybranej przez siebie nazwie
• Użyj funkcji var() , aby użyć tych wartości w innych właściwościach

Chociaż obsługa niestandardowych właściwości CSS jest w tej chwili dość wyboista, a niektóre przeglądarki obsługują je pod flagami, które należy wcześniej aktywować lub ustawić na true, oczekuje się, że ich obsługa znacznie wzrośnie, więc ważne jest, aby zrozumieć jak z nich korzystać i jak je wykorzystać. ¹

W tym artykule dowiesz się, jak wykorzystać niestandardowe właściwości CSS, aby uczynić arkusze stylów nieco bardziej dynamicznymi, być może czyniąc ten dodatkowy krok Sass/LESS w potoku zasobów przestarzałymi.

Oryginalna i mniej wydajna zmienna CSS

Zanim zaczniemy omawiać niestandardowe właściwości CSS, należy zauważyć, że od dłuższego czasu CSS ma rodzaj zmiennej, a jest to słowo kluczowe currentColor . Ta rzadko używana, ale szeroko obsługiwana zmienna odnosi się do aktualnej wartości koloru elementu. Może być używany w dowolnej deklaracji, która akceptuje wartość color i idealnie kaskaduje.

Spójrzmy na przykład:

 .element { color: blue; border: 2px solid currentColor; /* Sets a solid, 2px wide, blue border to the element */ }

Oprócz kaskadowania może to również generować:

 .element span { background: currentColor; /* Sets a blue background color for every span child of .element, unless a color property is declared in this same block */ } .element span.red { color: red; /* Sets a red background color for every span child of .element that has the class .red, since currentColor is applied to the background of every span child of .element no matter if they have the .red class or not */ }

Głównym problemem z currentColor , poza faktem, że nie było go w specyfikacji jako zmiennej per se, jest to, że akceptuje tylko wartość właściwości color, co może w niektórych przypadkach utrudnić pracę.

W pełni rozwinięte zmienne CSS

Jedną z głównych zalet korzystania z pre/postprocesorów CSS jest to, że pozwalają one na przechowywanie wartości w słowie kluczowym i w razie potrzeby ograniczają je do określonego selektora.

Po długich prośbach programistów powstał projekt interpretacji zmiennych natywnych dla CSS. Są one formalnie określane jako niestandardowe właściwości CSS, ale czasami są również określane jako zmienne CSS.

Obecna specyfikacja niestandardowych właściwości natywnych CSS obejmuje wszystkie te same zachowania, co zmienne pre/postprocesor. Umożliwia to przechowywanie kodów kolorów, rozmiarów ze wszystkimi znanymi jednostkami lub tylko liczb całkowitych w razie potrzeby (np. gdy trzeba użyć tego samego dzielnika lub mnożnika).

Składnia niestandardowych właściwości CSS jest nieco dziwna w porównaniu z innymi językami, ale ma dużo sensu, jeśli porównasz ich składnię z innymi funkcjami w tym samym ekosystemie CSS:

 :root { --color-black: #2e2e2e; } .element { background: var(--color-black); }

Teraz możesz pomyśleć: „Co to za składnia!?”

Cóż, Lea Verou wyjaśnia przyczynę tej składni „kreska-kreska” z absolutną prostotą, jak mówi w swoim niesamowitym wykładzie CSS Variables: var(–subtitle):

Działają dokładnie tak samo, jak każda inna właściwość CSS […]. Tak wiele osób pyta mnie, dlaczego nie użyliśmy znaku dolara [znaku] lub czegoś podobnego, a powodem, dla którego nie użyliśmy znaku dolara, jest to, że chcemy, aby ludzie mogli używać zarówno SASS, jak i zmiennych preprocesorowych i Zmienne CSS. Obie są różnymi rzeczami, osiągają różne cele, są rzeczy, które możesz zrobić ze zmiennymi CSS, których absolutnie nie możesz zrobić za pomocą SASS, i są rzeczy, których możesz zrobić ze zmiennymi SASS, których nie możesz zrobić ze zmiennymi CSS, więc chcemy ludzie mogą używać ich obu w tym samym arkuszu stylów, więc możesz wyobrazić sobie składnię myślnik-kreskę jako właściwość przedrostka z pustym przedrostkiem.

Możemy pobrać wartość właściwości niestandardowej za pomocą funkcji var() , której możemy używać wszędzie z wyjątkiem selektorów, nazw właściwości lub deklaracji zapytań o media.

Warto zauważyć, że podczas gdy zmienne pre/postprocesor są używane tylko w czasie kompilacji, zmienne CSS mogą być używane i aktualizowane dynamicznie. Co to znaczy? Oznacza to, że są one zachowywane w aktualnym arkuszu stylów CSS. Tak więc przekonanie, że są to zmienne, pozostanie nawet po skompilowaniu arkuszy stylów.

Aby było to jaśniejsze, pozwolę sobie zilustrować sytuację na kilku przykładach. Poniższy blok kodu jest częścią arkusza stylów SASS:

 :root { $value: 30px; } @media screen and (min-width: 768px) { $value: 60px; } .corners { border-radius: $value; }

Ten fragment deklaracji i reguł SASS jest kompilowany do CSS w następujący sposób:

 .corners { border-radius: 30px; }

Widać, że zarówno właściwości wewnątrz :root , jak i zapytanie o media giną po kompilacji, ponieważ zmienne SASS nie mogą istnieć w pliku CSS (lub, mówiąc dokładniej, mogą być zmuszone do istnienia w pliku CSS, ale są ignorowane ponieważ część ich składni jest nieprawidłowa w CSS), więc wartość zmiennej nie może być później aktualizowana.

Rozważmy teraz ten sam przypadek, ale zastosowano tylko zmienne CSS bez zastosowania pre/postprocesora CSS (tj. bez żadnej transpilacji lub kompilacji):

 :root { --value: 30px; } @media screen and (min-width: 768px) { --value: 60px; } .corners { border-radius: var(--value); }

Oczywiście nic się nie zmienia, ponieważ niczego nie kompilowaliśmy/transpilowaliśmy, a wartość właściwości niestandardowej można aktualizować dynamicznie. Na przykład, jeśli zmienimy wartość --value za pomocą czegoś takiego jak JavaScript, wartość zostanie zaktualizowana za każdym razem, gdy zostanie wywołana za pomocą funkcji var().

Możliwości właściwości niestandardowych sprawiają, że ta funkcja jest tak potężna, że ​​możesz nawet robić takie rzeczy, jak autoprefiks.

Lea Verou daje przykład, używając właściwości clip-path . Zaczynamy od ustawienia wartości właściwości, którą chcemy poprzedzić jako initial , ale używamy właściwości niestandardowej, a następnie przechodzimy do ustawienia wartości każdej właściwości z przedrostkiem na wartość właściwości niestandardowej:

 * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

Po tym wszystkim, co pozostało, jest zmiana wartości właściwości niestandardowej w selektorze:

 header { --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%); }

Jeśli chcesz dowiedzieć się więcej na ten temat, zapoznaj się z pełnym artykułem Lea na temat autoprefiksu za pomocą zmiennych CSS.

Niestandardowe właściwości CSS Bulletproofing

Jak wspomniano, obsługa przez przeglądarkę właściwości niestandardowych CSS jest nadal w dużej mierze niestandardowa. Jak więc można to przezwyciężyć?

W tym miejscu do gry wkracza PostCSS i jego wtyczka, postcss-css-variables.

Jeśli zastanawiasz się, czym jest PostCSS, sprawdź mój artykuł PostCSS: SASS's New Play Date i wróć do tego, gdy skończysz. Będziesz wtedy miał podstawowe pojęcie o tym, co możesz zrobić z tym niesamowitym narzędziem i nie poczujesz się zdezorientowany podczas czytania reszty artykułu.

Dzięki postcss-css-variables i jej opcji preserve ustawionej na true możemy zachować wszystkie deklaracje funkcji var() w danych wyjściowych i mieć obliczoną wartość jako deklarację rezerwową. Przechowuje również obliczone deklaracje --var . Należy pamiętać, że korzystając z tej wtyczki PostCSS, niestandardowe właściwości mogą być aktualizowane dynamicznie po procesie transpilacji, ale wartości zastępcze pozostaną takie same, chyba że są specjalnie ukierunkowane i wyraźnie zmienione indywidualnie.

Jeśli szukasz sposobu na użycie zmiennych CSS bez pre/postprocesorów, zawsze możesz ręcznie sprawdzić bieżącą obsługę za pomocą reguły CSS @support i zastosować odpowiednią rezerwę, gdy obsługa jest niejednolita lub nie istnieje. Na przykład:

 :root { --color-blue: #1e90ff; /* hex value for dodgerblue color */ } .element { background: var(--color-blue); } @supports (not(--value: 0)) { /* CSS variables not supported */ .element { background: dodgerblue; } }

Zmiana wartości niestandardowej właściwości za pomocą JavaScript

W całym artykule wspominałem, że zmienne można aktualizować za pomocą JavaScript, więc przejdźmy do tego.

Załóżmy, że masz jasny motyw i chcesz zmienić go na ciemny, zakładając, że masz jakiś CSS, taki jak ten:

 :root { --text-color: black; --background-color: white; } body { color: var(--text-color); background: var(--background-color); }

Możesz zaktualizować niestandardowe właściwości --text-color i --background-color , wykonując następujące czynności:

 var bodyStyles = document.body.style; bodyStyles.setProperty('--text-color', 'white'); bodyStyles.setProperty('--background-color', 'black');

Ciekawe przypadki użycia

Przez lata rozwoju i dyskusji na temat specyfikacji właściwości niestandardowych CSS pojawiło się kilka interesujących przypadków użycia. Oto kilka przykładów:

Tematyka: Korzystanie z zestawu motywów dla witryny jest dość łatwe przy implementacji zmiennych CSS. Chcesz mieć jasną lub ciemną odmianę swojego obecnego stylu? Po prostu zmień wartość niektórych właściwości niestandardowych za pomocą JavaScript i gotowe.

Korekty odstępów: musisz dostosować odstępy w witrynie, powiedzmy rynnę między kolumnami? Zmień wartość pojedynczej zmiennej CSS i zobacz, jak ta zmiana zostanie odzwierciedlona w całej witrynie.

W pełni dynamiczne funkcje calc(): Teraz możesz mieć w pełni dynamiczne funkcje calc() , korzystając z niestandardowych właściwości w tych funkcjach, eliminując potrzebę wykonywania skomplikowanych lub efemerycznych obliczeń w JavaScript, a następnie ręcznej aktualizacji tych wartości przy każdym wystąpieniu.

Tchnij nowe życie w swoje pliki CSS

Niestandardowe właściwości CSS to potężny i innowacyjny sposób na ożywienie arkuszy stylów, wprowadzając po raz pierwszy całkowicie dynamiczne wartości w CSS.

Specyfikacja ma obecnie status Rekomendacji Kandydata, co oznacza, że ​​standaryzacja jest tuż za rogiem, co jest dobrym powodem, aby zagłębić się w tę funkcję i jak najlepiej ją wykorzystać.