Czas zacząć używać niestandardowych właściwości CSS

Używamy preprocesorów do przechowywania kolorów, preferencji czcionek, szczegółów układu — głównie wszystkiego, czego używamy w CSS.

Ale zmienne preprocesora mają pewne ograniczenia:

• Nie możesz ich zmieniać dynamicznie.
• Nie są świadomi struktury DOM.
• Nie można ich odczytać ani zmienić z JavaScript.

Jako srebrny środek na te i inne problemy, społeczność wymyśliła niestandardowe właściwości CSS. Zasadniczo wyglądają i działają jak zmienne CSS, a sposób, w jaki działają, znajduje odzwierciedlenie w ich nazwie.

Właściwości niestandardowe otwierają nowe horyzonty dla tworzenia stron internetowych.

Składnia do deklarowania i używania niestandardowych właściwości

Typowym problemem, gdy zaczynasz z nowym preprocesorem lub frameworkiem, jest to, że musisz nauczyć się nowej składni.

Każdy preprocesor wymaga innego sposobu deklarowania zmiennych. Zwykle zaczyna się od zarezerwowanego symbolu — na przykład $ w Sass i @ w LESS.

Własności niestandardowe CSS poszły w ten sam sposób i używają -​- do wprowadzenia deklaracji. Ale dobrą rzeczą jest to, że możesz nauczyć się tej składni raz i używać jej ponownie w różnych przeglądarkach!

Możesz zapytać: „Dlaczego nie wykorzystać ponownie istniejącej składni?”

Tu jest powód. Krótko mówiąc, ma zapewnić sposób na użycie niestandardowych właściwości w dowolnym preprocesorze. W ten sposób możemy dostarczać i używać niestandardowych właściwości, a nasz preprocesor ich nie skompiluje, więc właściwości trafią bezpośrednio do wynikowego CSS. I można ponownie wykorzystać zmienne preprocesora w natywnych, ale opiszę to później.

(Jeśli chodzi o nazwę: ponieważ ich pomysły i cele są bardzo podobne, czasami właściwości niestandardowe nazywane są zmiennymi CSS, chociaż prawidłowa nazwa to niestandardowe właściwości CSS, a czytając dalej, zrozumiesz, dlaczego ta nazwa najlepiej je opisuje.)

Tak więc, aby zadeklarować zmienną zamiast zwykłej właściwości CSS, takiej jak color lub padding , po prostu podaj właściwość o niestandardowej nazwie, która zaczyna się od -​- :

 .box{ --box-color: #4d4e53; --box-padding: 0 10px; }

Wartość właściwości może być dowolną prawidłową wartością CSS: kolorem, ciągiem, wartością układu, a nawet wyrażeniem.

Oto przykłady prawidłowych właściwości niestandardowych:

 :root{ --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); --logo-border-color: rebeccapurple; --header-height: 68px; --content-padding: 10px 20px; --base-line-height: 1.428571429; --transition-duration: .35s; --external-link: "external link"; --margin-top: calc(2vh + 20px); /* Valid CSS custom properties can be reused later in, say, JavaScript. */ --foo: if(x > 5) this.width = 10; }

Jeśli nie jesteś pewien, do czego pasuje :root , w HTML jest to to samo co html , ale z większą szczegółowością.

Podobnie jak w przypadku innych właściwości CSS, niestandardowe kaskady kaskadowe w ten sam sposób i są dynamiczne. Oznacza to, że w każdej chwili można je zmienić, a zmiana jest odpowiednio przetwarzana przez przeglądarkę.

Aby użyć zmiennej, musisz użyć funkcji CSS var() i podać nazwę właściwości wewnątrz:

 .box{ --box-color:#4d4e53; --box-padding: 0 10px; padding: var(--box-padding); } .box div{ color: var(--box-color); }

Deklaracje i przypadki użycia

Funkcja var() to wygodny sposób na podanie wartości domyślnej. Możesz to zrobić, jeśli nie masz pewności, czy właściwość niestandardowa została zdefiniowana i chcesz podać wartość, która będzie używana jako rezerwa. Można to łatwo zrobić, przekazując do funkcji drugi parametr:

 .box{ --box-color:#4d4e53; --box-padding: 0 10px; /* 10px is used because --box-margin is not defined. */ margin: var(--box-margin, 10px); }

Jak można się spodziewać, możesz ponownie użyć innych zmiennych, aby zadeklarować nowe:

 .box{ /* The --main-padding variable is used if --box-padding is not defined. */ padding: var(--box-padding, var(--main-padding)); --box-text: 'This is my box'; /* Equal to --box-highlight-text:'This is my box with highlight'; */ --box-highlight-text: var(--box-text)' with highlight'; }

Operacje: +, -, *, /

Jak przyzwyczailiśmy się do preprocesorów i innych języków, chcemy móc używać podstawowych operatorów podczas pracy ze zmiennymi. W tym celu CSS udostępnia funkcję calc() , która sprawia, że ​​przeglądarka ponownie oblicza wyrażenie po dokonaniu jakiejkolwiek zmiany wartości właściwości niestandardowej:

 :root{ --indent-size: 10px; --indent-xl: calc(2*var(--indent-size)); --indent-l: calc(var(--indent-size) + 2px); --indent-s: calc(var(--indent-size) - 2px); --indent-xs: calc(var(--indent-size)/2); }

Jeśli spróbujesz użyć wartości bez jednostek, pojawi się problem. Ponownie, calc() jest twoim przyjacielem, ponieważ bez niego nie zadziała:

 :root{ --spacer: 10; } .box{ padding: var(--spacer)px 0; /* DOESN'T work */ padding: calc(var(--spacer)*1px) 0; /* WORKS */ }

Zakres i dziedziczenie

Zanim zaczniemy mówić o zakresach właściwości niestandardowych CSS, przypomnijmy zakresy JavaScript i preprocesora, aby lepiej zrozumieć różnice.

Wiemy, że np. przy zmiennych JavaScript ( var ) zakres jest ograniczony do funkcji.

Podobną sytuację mamy z let i const , ale są to zmienne lokalne o zasięgu blokowym.

closure w JavaScript to funkcja, która ma dostęp do zewnętrznych (zamykających) zmiennych funkcji — łańcucha zasięgu. Zamknięcie ma trzy łańcuchy zasięgu i ma dostęp do następujących elementów:

• własny zakres (tzn. zmienne zdefiniowane między jego nawiasami klamrowymi),
• zmienne funkcji zewnętrznej,
• zmienne globalne.

Podobnie jest z preprocesorami. Użyjmy Sassa jako przykładu, ponieważ jest to prawdopodobnie najpopularniejszy obecnie preprocesor.

W Sassie mamy dwa rodzaje zmiennych: lokalną i globalną.

Zmienną globalną można zadeklarować poza dowolnym selektorem lub konstrukcją (na przykład jako mixin). W przeciwnym razie zmienna byłaby lokalna.

Wszelkie zagnieżdżone bloki kodu mogą uzyskać dostęp do otaczających zmiennych (jak w JavaScript).

Oznacza to, że w Sassie zakresy zmiennej w pełni zależą od struktury kodu.

Jednak niestandardowe właściwości CSS są domyślnie dziedziczone i podobnie jak inne właściwości CSS, działają kaskadowo.

Nie możesz również mieć zmiennej globalnej, która deklaruje niestandardową właściwość poza selektorem — to nie jest prawidłowy CSS. Globalny zakres niestandardowych właściwości CSS to w rzeczywistości zakres :root , przy czym właściwość jest dostępna globalnie.

Wykorzystajmy naszą wiedzę o składni i dostosujmy przykład Sassa do HTML i CSS. Stworzymy demonstrację, używając natywnych niestandardowych właściwości CSS. Po pierwsze, kod HTML:

 global <div class="enclosing"> enclosing <div class="closure"> closure </div> </div>

A oto CSS:

 :root { --globalVar: 10px; } .enclosing { --enclosingVar: 20px; } .enclosing .closure { --closureVar: 30px; font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar)); /* 60px for now */ } 

Zmiany we właściwościach niestandardowych są natychmiast stosowane do wszystkich wystąpień

Jak dotąd nie widzieliśmy, czym różni się to od zmiennych Sassa. Przypiszmy jednak zmienną po jej użyciu:

W przypadku Sassa nie ma to żadnego wpływu:

 .closure { $closureVar: 30px; // local variable font-size: $closureVar +$enclosingVar+ $globalVar; // 60px, $closureVar: 30px is used $closureVar: 50px; // local variable } 

Ale w CSS obliczona wartość jest zmieniana, ponieważ wartość font-size jest przeliczana ze zmienionej wartości –closureVar :

 .enclosing .closure { --closureVar: 30px; font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar)); /* 80px for now, --closureVar: 50px is used */ --closureVar: 50px; } 

To pierwsza duża różnica: jeśli ponownie przypiszesz wartość właściwości niestandardowej, przeglądarka ponownie obliczy wszystkie zmienne i wyrażenia calc() tam, gdzie jest ona zastosowana.

Preprocesory nie są świadome struktury DOM

Załóżmy, że chcielibyśmy użyć domyślnego font-size dla bloku, z wyjątkiem sytuacji, w których występuje highlighted klasa.

Oto kod HTML:

 <div class="default"> default </div> <div class="default highlighted"> default highlighted </div>

Zróbmy to za pomocą niestandardowych właściwości CSS:

 .highlighted { --highlighted-size: 30px; } .default { --default-size: 10px; /* Use default-size, except when highlighted-size is provided. */ font-size: var(--highlighted-size, var(--default-size)); }

Ponieważ drugi element HTML z klasą default przenosi highlighted klasę, właściwości z highlighted klasy zostaną zastosowane do tego elementu.

W tym przypadku oznacza to, że –highlighted-size: 30px; zostanie zastosowana, co z kolei spowoduje, że przypisywana właściwość font-size użyje –highlighted-size .

Wszystko jest proste i działa:

Teraz spróbujmy osiągnąć to samo za pomocą Sassa:

 .highlighted { $highlighted-size: 30px; } .default { $default-size: 10px; /* Use default-size, except when highlighted-size is provided. */ @if variable-exists(highlighted-size) { font-size: $highlighted-size; } @else { font-size: $default-size; } }

Wynik pokazuje, że domyślny rozmiar jest stosowany do obu:

Dzieje się tak, ponieważ wszystkie obliczenia i przetwarzanie Sass mają miejsce w czasie kompilacji i oczywiście nie wie nic o strukturze DOM, polegając w pełni na strukturze kodu.

Jak widać, właściwości niestandardowe mają zalety określania zakresu zmiennych i dodają zwykłe kaskadowanie właściwości CSS, będąc świadomym struktury DOM i przestrzegając tych samych reguł, co inne właściwości CSS.

Drugim wnioskiem jest to, że niestandardowe właściwości CSS są świadome struktury DOM i są dynamiczne .

Słowa kluczowe w całym CSS i all właściwość

Niestandardowe właściwości CSS podlegają tym samym regułom, co zwykłe niestandardowe właściwości CSS. Oznacza to, że możesz przypisać do nich dowolne popularne słowa kluczowe CSS:

• inherit
  To słowo kluczowe CSS stosuje wartość rodzica elementu.
• initial
  Dotyczy to wartości początkowej zdefiniowanej w specyfikacji CSS (pusta wartość lub w niektórych przypadkach pusta wartość w przypadku niestandardowych właściwości CSS).
• unset
  Stosuje to wartość dziedziczoną, jeśli właściwość jest zwykle dziedziczona (jak w przypadku właściwości niestandardowych) lub wartość początkową, jeśli właściwość normalnie nie jest dziedziczona.
• revert
  Powoduje to zresetowanie właściwości do wartości domyślnej ustalonej przez arkusz stylów klienta użytkownika (wartość pusta w przypadku niestandardowych właściwości CSS).

Oto przykład:

 .common-values{ --border: inherit; --bgcolor: initial; --padding: unset; --animation: revert; }

Rozważmy inny przypadek. Załóżmy, że chcesz zbudować komponent i chcesz mieć pewność, że żadne inne style lub niestandardowe właściwości nie zostaną do niego przypadkowo zastosowane (w takim przypadku do stylów zwykle stosuje się modułowe rozwiązanie CSS).

Ale teraz jest inny sposób: użyć właściwości all CSS. Ten skrót resetuje wszystkie właściwości CSS.

Wraz ze słowami kluczowymi CSS możemy wykonać następujące czynności:

 .my-wonderful-clean-component{ all: initial; }

Spowoduje to zresetowanie wszystkich stylów naszego komponentu.

Niestety słowo kluczowe all nie resetuje właściwości niestandardowych. Trwa dyskusja na temat dodania przedrostka -​- , który zresetowałby wszystkie niestandardowe właściwości CSS.

Tak więc w przyszłości pełny reset można wykonać w ten sposób:

 .my-wonderful-clean-component{ --: initial; /* reset all CSS custom properties */ all: initial; /* reset all other CSS styles */ }

Przypadki użycia właściwości niestandardowych CSS

Istnieje wiele zastosowań właściwości niestandardowych. Pokażę najciekawsze z nich.

Emuluj nieistniejące reguły CSS

Nazwa tych zmiennych CSS to „własności niestandardowe”, więc dlaczego nie użyć ich do emulacji nieistniejących właściwości?

Jest ich wiele: translateX/Y/Z , background-repeat-x/y (wciąż nie kompatybilne z różnymi przeglądarkami), box-shadow-color .

Spróbujmy, aby ostatnia działała. W naszym przykładzie zmieńmy kolor box-shadow po najechaniu myszą. Chcemy tylko przestrzegać zasady DRY (nie powtarzaj się), więc zamiast powtarzać całą wartość box-shadow w sekcji :hover , po prostu zmienimy jej kolor. Niestandardowe właściwości na ratunek:

 .test { --box-shadow-color: yellow; box-shadow: 0 0 30px var(--box-shadow-color); } .test:hover { --box-shadow-color: orange; /* Instead of: box-shadow: 0 0 30px orange; */ } 

Motywy kolorystyczne

Jednym z najczęstszych przypadków użycia właściwości niestandardowych są motywy kolorystyczne w aplikacjach. Właściwości niestandardowe zostały stworzone, aby rozwiązać właśnie tego rodzaju problem. Dlatego zapewnijmy prosty motyw kolorystyczny dla komponentu (te same kroki można wykonać dla aplikacji).

Oto kod naszego komponentu przycisku:

 .btn { background-image: linear-gradient(to bottom, #3498db, #2980b9); text-shadow: 1px 1px 3px #777; box-shadow: 0px 1px 3px #777; border-radius: 28px; color: #ffffff; padding: 10px 20px 10px 20px; }

Załóżmy, że chcemy odwrócić motyw kolorystyczny.

Pierwszym krokiem byłoby rozszerzenie wszystkich zmiennych kolorów na niestandardowe właściwości CSS i przepisanie naszego komponentu. Wynik byłby taki sam:

 .btn { --shadow-color: #777; --gradient-from-color: #3498db; --gradient-to-color: #2980b9; --color: #ffffff; background-image: linear-gradient( to bottom, var(--gradient-from-color), var(--gradient-to-color) ); text-shadow: 1px 1px 3px var(--shadow-color); box-shadow: 0px 1px 3px var(--shadow-color); border-radius: 28px; color: var(--color); padding: 10px 20px 10px 20px; }

Ma wszystko, czego potrzebujemy. Dzięki niemu możemy nadpisać zmienne kolorów odwróconymi wartościami i zastosować je w razie potrzeby. Moglibyśmy na przykład dodać globalną inverted klasę HTML (np. do elementu body ) i zmienić kolory, gdy jest stosowana:

 body.inverted .btn{ --shadow-color: #888888; --gradient-from-color: #CB6724; --gradient-to-color: #D67F46; --color: #000000; }

Poniżej znajduje się demo, w którym możesz kliknąć przycisk, aby dodać i usunąć klasę globalną:

Takiego zachowania nie można osiągnąć w preprocesorze CSS bez narzutu związanego z powielaniem kodu. W przypadku preprocesora zawsze będziesz musiał zastąpić rzeczywiste wartości i reguły, co zawsze skutkuje dodatkowym CSS.

Dzięki niestandardowym właściwościom CSS rozwiązanie jest tak czyste, jak to tylko możliwe, a kopiowanie i wklejanie jest unikane, ponieważ tylko wartości zmiennych są przedefiniowane.

Używanie niestandardowych właściwości z JavaScript

Wcześniej, aby wysłać dane z CSS do JavaScript, często musieliśmy uciekać się do sztuczek, pisząc wartości CSS za pomocą zwykłego JSON w wyjściu CSS, a następnie odczytując je z JavaScript.

Teraz możemy łatwo wchodzić w interakcję ze zmiennymi CSS z JavaScript, czytając i pisząc do nich za pomocą dobrze znanych .getPropertyValue() i .setProperty() , które są używane do zwykłych właściwości CSS:

 /** * Gives a CSS custom property value applied at the element * element {Element} * varName {String} without '--' * * For example: * readCssVar(document.querySelector('.box'), 'color'); */ function readCssVar(element, varName){ const elementStyles = getComputedStyle(element); return elementStyles.getPropertyValue(`--${varName}`).trim(); } /** * Writes a CSS custom property value at the element * element {Element} * varName {String} without '--' * * For example: * readCssVar(document.querySelector('.box'), 'color', 'white'); */ function writeCssVar(element, varName, value){ return element.style.setProperty(`--${varName}`, value); }

Załóżmy, że mamy listę wartości zapytania o media:

 .breakpoints-data { --phone: 480px; --tablet: 800px; }

Ponieważ chcemy je ponownie wykorzystać tylko w JavaScript — na przykład w Window.matchMedia() — możemy je łatwo uzyskać z CSS:

 const breakpointsData = document.querySelector('.breakpoints-data'); // GET const phoneBreakpoint = getComputedStyle(breakpointsData) .getPropertyValue('--phone');

Aby pokazać, jak przypisać niestandardowe właściwości z JavaScript, stworzyłem interaktywną prezentację kostki CSS 3D, która reaguje na działania użytkownika.

Nie jest to trudne. Wystarczy dodać proste tło, a następnie umieścić pięć ścian sześcianu z odpowiednimi wartościami właściwości transform : translateZ() , translateY() , rotateX() i rotateY() .

Aby zapewnić odpowiednią perspektywę, dodałem do otoki strony:

 #world{ --translateZ:0; --rotateX:65; --rotateY:0; transform-style:preserve-3d; transform: translateZ(calc(var(--translateZ) * 1px)) rotateX(calc(var(--rotateX) * 1deg)) rotateY(calc(var(--rotateY) * 1deg)); }

Brakuje tylko interaktywności. Demo powinno zmieniać kąty widzenia X i Y ( –rotateX i –rotateY ) podczas ruchu myszy oraz powiększać i pomniejszać podczas przewijania myszy ( –translateZ ).

Oto JavaScript, który załatwia sprawę:

 // Events onMouseMove(e) { this.worldXAngle = (.5 - (e.clientY / window.innerHeight)) * 180; this.worldYAngle = -(.5 - (e.clientX / window.innerWidth)) * 180; this.updateView(); }; onMouseWheel(e) { /*…*/ this.worldZ += delta * 5; this.updateView(); }; // JavaScript -> CSS updateView() { this.worldEl.style.setProperty('--translateZ', this.worldZ); this.worldEl.style.setProperty('--rotateX', this.worldXAngle); this.worldEl.style.setProperty('--rotateY', this.worldYAngle); };

Teraz, gdy użytkownik porusza myszką, demo zmienia widok. Możesz to sprawdzić, poruszając myszą i używając kółka myszy do powiększania i pomniejszania:

Zasadniczo właśnie zmieniliśmy wartości niestandardowych właściwości CSS. Cała reszta (obracanie, powiększanie i pomniejszanie) jest wykonywane przez CSS.

Wskazówka: jednym z najłatwiejszych sposobów debugowania wartości niestandardowej właściwości CSS jest po prostu pokazanie jej zawartości w treści generowanej przez CSS (co działa w prostych przypadkach, takich jak ciągi), tak aby przeglądarka automatycznie wyświetlała aktualnie zastosowaną wartość:

 body:after { content: '--screen-category : 'var(--screen-category); }

Możesz to sprawdzić w zwykłym demo CSS (bez HTML lub JavaScript). (Zmień rozmiar okna, aby przeglądarka automatycznie odzwierciedlała zmienioną wartość niestandardowej właściwości CSS).

Obsługa przeglądarki

Niestandardowe właściwości CSS są obsługiwane we wszystkich głównych przeglądarkach:

Oznacza to, że możesz zacząć z nich korzystać natywnie.

Jeśli potrzebujesz obsługiwać starsze przeglądarki, możesz zapoznać się ze składnią i przykładami użycia oraz rozważyć możliwe sposoby równoległego przełączania lub używania CSS i zmiennych preprocesorów.

Oczywiście musimy być w stanie wykryć wsparcie zarówno w CSS, jak i JavaScript, aby zapewnić rozwiązania zastępcze lub ulepszenia.

To całkiem proste. W przypadku CSS możesz użyć warunku @supports z fikcyjnym zapytaniem funkcji:

 @supports ( (--a: 0)) { /* supported */ } @supports ( not (--a: 0)) { /* not supported */ }

W JavaScript możesz użyć tej samej fikcyjnej właściwości niestandardowej z metodą statyczną CSS.supports() :

 const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else { /* not supported */ }

Jak widzieliśmy, niestandardowe właściwości CSS nadal nie są dostępne w każdej przeglądarce. Wiedząc o tym, możesz stopniowo ulepszać swoją aplikację, sprawdzając, czy są obsługiwane.

Na przykład, możesz wygenerować dwa główne pliki CSS: jeden z niestandardowymi właściwościami CSS i drugi bez nich, w którym właściwości są wbudowane (wkrótce omówimy sposoby na zrobienie tego).

Załaduj domyślnie drugi. Następnie po prostu sprawdź JavaScript i przełącz się na wersję rozszerzoną, jeśli obsługiwane są niestandardowe właściwości:

 <!-- HTML --> <link href="without-css-custom-properties.css" rel="stylesheet" type="text/css" media="all" />

 // JavaScript if(isSupported){ removeCss('without-css-custom-properties.css'); loadCss('css-custom-properties.css'); // + conditionally apply some application enhancements // using the custom properties }

To tylko przykład. Jak zobaczysz poniżej, są lepsze opcje.

Jak zacząć z nich korzystać

Według niedawnej ankiety Sass nadal jest preferowanym preprocesorem dla społeczności programistów.

Zastanówmy się więc, jak zacząć korzystać z niestandardowych właściwości CSS lub przygotować się do nich za pomocą Sassa.

Mamy kilka opcji.

1. Ręcznie sprawdź w kodzie wsparcia

Jedną z zalet tej metody ręcznego sprawdzania w kodzie, czy niestandardowe właściwości są obsługiwane, jest to, że działa i możemy to zrobić już teraz (nie zapominaj, że przeszliśmy na Sass):

 $color: red; :root { --color: red; } .box { @supports ( (--a: 0)) { color: var(--color); } @supports ( not (--a: 0)) { color: $color; } }

Ta metoda ma wiele wad, z których nie tylko to, że kod staje się skomplikowany, a kopiowanie i wklejanie staje się dość trudne w utrzymaniu.

2. Użyj wtyczki, która automatycznie przetwarza wynikowy CSS

Ekosystem PostCSS udostępnia dziś dziesiątki wtyczek. Kilka z nich przetwarza niestandardowe właściwości (wartości wbudowane) w wynikowym wyniku CSS i sprawia, że ​​działają, zakładając, że dostarczasz tylko zmienne globalne (tj. deklarujesz lub zmieniasz niestandardowe właściwości CSS tylko w selektorach :root ), więc ich wartości można łatwo wstawić.

Przykładem są właściwości postcss-custom-properties.

Ta wtyczka ma kilka zalet: Dzięki niej składnia działa; jest kompatybilny z całą infrastrukturą PostCSS; i nie wymaga wiele konfiguracji.

Są jednak wady. Wtyczka wymaga użycia niestandardowych właściwości CSS, więc nie masz ścieżki do przygotowania projektu do przełączenia się ze zmiennych Sass. Ponadto nie będziesz mieć dużej kontroli nad transformacją, ponieważ jest ona wykonywana po skompilowaniu Sassa do CSS. Wreszcie wtyczka nie dostarcza zbyt wielu informacji o debugowaniu.

3. css-vars Mixin

Zacząłem używać niestandardowych właściwości CSS w większości moich projektów i wypróbowałem wiele strategii:

• Przełącz się z Sass na PostCSS za pomocą cssnext.
• Przełącz się ze zmiennych Sass na czyste niestandardowe właściwości CSS.
• Użyj zmiennych CSS w Sass, aby sprawdzić, czy są obsługiwane.

W wyniku tego doświadczenia zacząłem szukać rozwiązania, które spełni moje kryteria:

• Rozpoczęcie korzystania z Sassa powinno być łatwe.
• Powinien być prosty w użyciu, a składnia musi być jak najbardziej zbliżona do natywnych niestandardowych właściwości CSS.
• Przełączanie wyjścia CSS z wartości wbudowanych na zmienne CSS powinno być łatwe.
• Członek zespołu, który zna niestandardowe właściwości CSS, będzie mógł korzystać z rozwiązania.
• Powinien istnieć sposób na uzyskanie informacji debugowania o przypadkach brzegowych przy użyciu zmiennych.

W rezultacie stworzyłem css-vars, mixin Sassa, który można znaleźć na Github. Używając go, możesz zacząć używać składni niestandardowych właściwości CSS.

Korzystanie z css-vars Mixin

Aby zadeklarować zmienną(e), użyj domieszki w następujący sposób:

 $white-color: #fff; $base-font-size: 10px; @include css-vars(( --main-color: #000, --main-bg: $white-color, --main-font-size: 1.5*$base-font-size, --padding-top: calc(2vh + 20px) ));

Aby użyć tych zmiennych, użyj funkcji var() :

 body { color: var(--main-color); background: var(--main-bg, #f00); font-size: var(--main-font-size); padding: var(--padding-top) 0 10px; }

Daje to możliwość kontrolowania wszystkich danych wyjściowych CSS z jednego miejsca (z Sass) i zaznajomienia się ze składnią. Dodatkowo możesz ponownie wykorzystać zmienne Sass i logikę z domieszką.

Gdy wszystkie przeglądarki, które chcesz obsługiwać, pracują ze zmiennymi CSS, wystarczy dodać to:

 $css-vars-use-native: true;

Zamiast wyrównywać właściwości zmiennych w wynikowym CSS, mixin zacznie rejestrować niestandardowe właściwości, a instancje var() przejdą do wynikowego CSS bez żadnych przekształceń. Oznacza to, że w pełni przełączysz się na niestandardowe właściwości CSS i będziesz mieć wszystkie omówione przez nas zalety.

Jeśli chcesz włączyć przydatne informacje dotyczące debugowania, dodaj następujące informacje:

 $css-vars-debug-log: true;

To da ci:

• dziennik, gdy zmienna nie została przypisana, ale została użyta;
• dziennik, gdy zmienna jest ponownie przypisywana;
• informacje, gdy zmienna nie jest zdefiniowana, ale przekazywana jest wartość domyślna, która jest używana zamiast tego.

Wniosek

Teraz wiesz więcej o niestandardowych właściwościach CSS, w tym o ich składni, zaletach, dobrych przykładach użycia i interakcji z nimi za pomocą JavaScript.

Nauczyłeś się rozpoznawać, czy są one obsługiwane, czym różnią się od zmiennych preprocesora CSS i jak zacząć używać natywnych zmiennych CSS, dopóki nie będą obsługiwane w różnych przeglądarkach.

To właściwy moment, aby zacząć korzystać z niestandardowych właściwości CSS i przygotować się do ich natywnej obsługi w przeglądarkach.