Właściwości niestandardowe CSS: deklarowanie i aktualizowanie
Proszę deklarować zmienne za pomocą -- w :root, odwoływać się do nich przez var() oraz dynamicznie aktualizować je za pomocą JavaScriptu na potrzeby zmiany motywu w czasie rzeczywistym.
Właściwości niestandardowe CSS: deklarowanie i aktualizowanie to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Podsumowanie: deklarowanie i określanie zakresu
Właściwości niestandardowe CSS deklaruje się z prefiksem -- na dowolnym elemencie. Właściwości zadeklarowane na :root są dostępne globalnie. Elementy potomne dziedziczą te wartości i mogą lokalnie je nadpisywać.
:root {
--spacing: 8px;
--color-brand: #6366f1;
}
.card {
--spacing: 12px; /* local override for .card and its children */
padding: var(--spacing);
}Aktualizacje na żywo za pomocą JavaScriptu
Właściwości niestandardowe można zmieniać w czasie działania programu. Użyj element.style.setProperty('--name', value), aby nadpisać wartość na poziomie elementu, albo zaktualizuj zmienną globalną na :root, aby natychmiast wpłynąć na wszystkie elementy, które z niej korzystają.
// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');
// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');Odczytywanie wartości właściwości niestandardowych w JS
Odczytaj właściwość niestandardową za pomocą getComputedStyle(element).getPropertyValue('--name').trim(). Odczytuje to obliczoną wartość wynikającą z kaskady, a nie tylko wartość ustawioną bezpośrednio w elemencie.
const brandColor = getComputedStyle(document.documentElement)
.getPropertyValue('--color-brand')
.trim();
console.log(brandColor); // '#6366f1'Animowanie właściwości niestandardowych
Przeglądarka może interpolować właściwości niestandardowe za pomocą @property (Houdini) albo używać ich w przejściach w połączeniu z calc(). Bez @property przeglądarki nie mogą bezpośrednio wykonywać przejścia między wartościami zmiennych.
@property — zarejestrowane właściwości niestandardowe
Reguła CSS @property rejestruje właściwość niestandardową wraz z jej typem, wartością początkową i regułą dziedziczenia. Zarejestrowane właściwości można natywnie animować i stosować do nich przejścia.
@property --brand-opacity {
syntax: '<number>';
inherits: false;
initial-value: 1;
}
.card {
opacity: var(--brand-opacity);
transition: --brand-opacity 0.3s;
}
.card:hover {
--brand-opacity: 0.7;
}Systemy tokenów z właściwościami niestandardowymi
Model tokenów projektowych: przechowuj wszystkie decyzje projektowe jako właściwości niestandardowe. Komponenty korzystają z tokenów, a nie z wartości zapisanych na stałe. Zmiana tokenu jest propagowana wszędzie.
:root {
/* Colour tokens */
--token-primary: #6366f1;
--token-primary-hover: #4f46e5;
--token-surface: #ffffff;
--token-on-surface: #1f2937;
/* Spacing tokens */
--token-space-sm: 8px;
--token-space-md: 16px;
--token-space-lg: 24px;
}Responsywne właściwości niestandardowe
Zmieniaj wartości właściwości niestandardowych wewnątrz zapytań medialnych. Komponenty korzystające ze zmiennych automatycznie się dostosują — jest to przejrzystsze niż pisanie osobnych reguł komponentów dla każdego punktu przerwania.
:root {
--container-max: 640px;
--font-size-base: 15px;
}
@media (min-width: 1024px) {
:root {
--container-max: 1280px;
--font-size-base: 16px;
}
}Właściwości niestandardowe w calc()
Używaj zmiennych wewnątrz calc() do wyliczania odstępów i rozmiarów. Tworzy to spójny, matematycznie poprawny system rozmiarów.
:root { --base-space: 8px; }
.m-2 { margin: calc(var(--base-space) * 2); } /* 16px */
.m-4 { margin: calc(var(--base-space) * 4); } /* 32px */
.p-3 { padding: calc(var(--base-space) * 3); } /* 24px */Motywy dla wielu marek
Ustawiaj różne tokeny motywu dla poszczególnych atrybutów data. Jedna strona może obsługiwać wiele motywów na potrzeby white-labelingu.
[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }Właściwości niestandardowe w SVG
Atrybuty SVG, takie jak fill i stroke, mogą korzystać z właściwości niestandardowych. Dzięki temu można zmieniać motyw ikon z poziomu CSS bez modyfikowania znaczników SVG.
/* CSS */
:root { --icon-fill: #6366f1; }
/* SVG inline or referenced */
svg { fill: var(--icon-fill); }Debugowanie właściwości niestandardowych
W Chrome DevTools wybierz element i poszukaj wartości właściwości niestandardowych na karcie Computed. Panel Styles pokazuje, gdzie zadeklarowano każdą zmienną. Sekcja Inherited pokazuje zmienne odziedziczone po elementach nadrzędnych.
Szybkie sprawdzenie
Jaka metoda JavaScriptu aktualizuje właściwość niestandardową CSS na elemencie?
Podsumowanie: właściwości niestandardowe CSS w praktyce
Deklaruj właściwości na :root, aby były globalne, a na elementach potomnych nadpisuj je, aby ograniczyć ich zakres. Aktualizuj je z JavaScriptu za pomocą style.setProperty. Odczytuj je za pomocą getComputedStyle. @property umożliwia natywne przejścia. Używaj właściwości jako tokenów projektowych, aby zachować jedno źródło prawdy. Nadpisuj je w zapytaniach medialnych, aby tworzyć responsywne tokeny.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Właściwości niestandardowe CSS: deklarowanie i aktualizowanie” jest bezpłatna?
Tak — pełny tekst „Właściwości niestandardowe CSS: deklarowanie i aktualizowanie” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Właściwości niestandardowe CSS: deklarowanie i aktualizowanie”?
Proszę deklarować zmienne za pomocą -- w :root, odwoływać się do nich przez var() oraz dynamicznie aktualizować je za pomocą JavaScriptu na potrzeby zmiany motywu w czasie rzeczywistym. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 „Właściwości niestandardowe CSS: deklarowanie i aktualizowanie”?
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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- Właściwości niestandardowe CSS: deklarowanie i aktualizowanie
- Przejścia: właściwość, czas trwania, funkcja czasowa
- Animacje @keyframes
- Respektowanie prefers-reduced-motion