Deklarowanie i używanie właściwości niestandardowych
Nauczy się Pan/Pani definiować niestandardowe właściwości CSS z prefiksem -- oraz używać ich za pomocą funkcji var().
Deklarowanie i używanie właściwości niestandardowych to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym są niestandardowe właściwości CSS?
Niestandardowe właściwości CSS (nazywane również zmiennymi CSS) pozwalają zdefiniować wartość raz i używać jej w całym arkuszu stylów. Stosują składnię --name: value.
Deklarowanie niestandardowych właściwości
Niestandardowe właściwości można deklarować na dowolnym elemencie. Zadeklarowanie ich na :root sprawia, że są dostępne globalnie:
<div class="demo">Custom properties declared on :root</div>
Używanie funkcji var()
Do niestandardowej właściwości należy odwoływać się za pomocą funkcji var():
<button>Styled Button</button>
Niestandardowe właściwości są dziedziczone
Niestandardowe właściwości podlegają normalnemu dziedziczeniu CSS. Właściwość zdefiniowana na elemencie nadrzędnym jest dostępna dla wszystkich jego elementów potomnych, chyba że zostanie nadpisana.
<div class="card">
<div class="card__body">Inherits --card-bg from .card</div>
</div>
Nieprawidłowe wartości niestandardowych właściwości
W przeciwieństwie do zwykłych właściwości CSS nieprawidłowa wartość niestandardowej właściwości nie powoduje zignorowania deklaracji — zmienna jest po prostu rozwijana do swojej wartości w niezmienionej postaci. Dopiero właściwość korzystająca z tej wartości określa, czy jest ona prawidłowa.
Niestandardowe właściwości a zmienne Sass
Najważniejsze różnice:
- Niestandardowe właściwości CSS są dynamiczne w przeglądarce — aktualizują się na bieżąco
- Zmienne Sass są usuwane podczas kompilacji w czasie budowania
- Niestandardowe właściwości można zmieniać za pomocą JavaScriptu
- Niestandardowe właściwości uwzględniają kaskadę i dziedziczenie
Konwencje nazewnictwa
Niestandardowe właściwości należy nazywać semantycznie, a nie na podstawie ich wyglądu. Ułatwia to ich późniejszą aktualizację:
<p class="demo">Named --color-primary, --color-text, --size-spacing-sm</p>
Zakres globalny a zakres komponentu
Globalne tokeny należy definiować w :root, a wartości właściwe dla komponentu — na głównej klasie komponentu:
<div class="card">Global font-size-base + component-scoped card vars</div>
Niestandardowe właściwości w calc()
Niestandardowe właściwości działają wewnątrz calc() — jeśli są używane w obliczeniach wymiarów, muszą zawierać jednostki:
<div class="nav">Navbar (var(--nav-height))</div>
<div class="main-content">Main content fills the rest via calc()</div>
Responsywne niestandardowe właściwości
Wartości niestandardowych właściwości należy zmieniać wewnątrz zapytań medialnych, aby tworzyć responsywne systemy tokenów:
<div class="section">Padding grows to 6rem on wide screens</div>
Niestandardowe właściwości na potrzeby animacji
Elementy można animować przez zmianę niestandardowej właściwości (często za pośrednictwem JavaScriptu), zamiast zmieniać wiele pojedynczych właściwości:
<div class="progress-track">
<div class="progress"></div>
</div>
Szybkie sprawdzenie
Jak zadeklarować globalną niestandardową właściwość CSS o nazwie --accent?
Podsumowanie
Niestandardowe właściwości CSS deklaruje się za pomocą --name: value, a korzysta z nich za pomocą var(--name). Globalne tokeny należy deklarować na :root, a wartości komponentów ograniczać do selektorów komponentów. Są dynamiczne, uwzględniają kaskadę i można je zmieniać za pomocą JavaScriptu — dzięki czemu są znacznie potężniejsze od zmiennych Sass.
Często zadawane pytania
Czy lekcja „Deklarowanie i używanie właściwości niestandardowych” jest bezpłatna?
Tak — pełny tekst „Deklarowanie i używanie właściwości niestandardowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Deklarowanie i używanie właściwości niestandardowych”?
Nauczy się Pan/Pani definiować niestandardowe właściwości CSS z prefiksem -- oraz używać ich za pomocą funkcji var(). Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Deklarowanie i używanie właściwości niestandardowych”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Deklarowanie i używanie właściwości niestandardowych
- Wartości awaryjne i var()
- Zakres zmiennych dla komponentów
- Aktualizowanie zmiennych za pomocą JavaScript