Wartości awaryjne i var()
Nauczy się Pan/Pani podawać wartości awaryjne w var() na wypadek, gdy właściwość niestandardowa jest niezdefiniowana lub nieprawidłowa.
Wartości awaryjne i var() to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 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.
Składnia wartości zapasowej var()
Funkcja var() przyjmuje opcjonalny drugi argument będący wartością zapasową, używaną, gdy niestandardowa właściwość nie jest zdefiniowana.
<button class="button">Fallback: royalblue</button>
Kiedy używane są wartości zapasowe
Wartość zapasowa jest używana, gdy:
- Właściwość nie jest zdefiniowana w danym zakresie
- Właściwość ma wartość
initial - Właściwość została zadeklarowana z wartością nieprawidłową w danym kontekście
Wiele poziomów wartości zapasowych
Wywołania var() należy zagnieżdżać, aby utworzyć łańcuch wielu poziomów wartości zapasowych:
<p class="text">Falls through two levels to #3b82f6</p>
Wartość zapasowa może być dowolną wartością
Wartości zapasowe mogą być dowolnymi prawidłowymi wartościami danej właściwości — w tym innymi zmiennymi, wartościami obliczonymi lub literałami:
<div class="card">16px / 50%</div>
Słowo kluczowe initial
Ustawienie niestandardowej właściwości na initial sprawia, że zachowuje się ona tak, jakby nigdy nie została ustawiona. W połączeniu z wartością zapasową pozwala to komponentom zrezygnować z odziedziczonej niestandardowej właściwości.
<div class="no-theme">
<button class="button">Falls back to gray</button>
</div>
Gwarantowana nieprawidłowa wartość
Użycie initial jako wartości niestandardowej właściwości gwarantuje uruchomienie wartości zapasowej. Można w ten sposób tworzyć opcjonalne flagi funkcji w CSS.
Niestandardowa właściwość + @property
Reguła @property (Houdini) rejestruje typowaną niestandardową właściwość z zagwarantowaną wartością początkową. Jest to bardziej niezawodne niż poleganie na wartościach zapasowych.
<div class="track">
<div class="bar"></div>
</div>
Wartość zapasowa zapewniająca bezpieczną animację
Należy zapewnić działanie przejść nawet wtedy, gdy niestandardowa właściwość nie jest ustawiona, podając bezpieczną wartość zapasową, od której można rozpocząć przejście:
<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>
Debugowanie brakujących zmiennych
Jeśli brakuje niestandardowej właściwości i nie podano wartości zapasowej, właściwość przyjmuje swoją wartość początkową (często jest to słowo kluczowe initial). W przypadku kolorów może to prowadzić do nieoczekiwanych wyników, takich jak przezroczysty lub czarny kolor. Zawsze należy dodawać wartości zapasowe do właściwości krytycznych.
var() w niestandardowych właściwościach
Wartości niestandardowych właściwości mogą same odwoływać się do innych niestandardowych właściwości, tworząc łańcuch tokenów:
<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>
Wartości zapasowe a specyficzność
Wartości zapasowe nie mają nic wspólnego ze specyficznością — mają zastosowanie wyłącznie wtedy, gdy używana właściwość niestandardowa jest niezdefiniowana lub nieprawidłowa. Specyficzność określa, która reguła ustawia właściwość niestandardową, a nie to, która wartość zapasowa zostanie użyta.
Szybkie sprawdzenie
Co robi color: var(--theme-text, #111), gdy --theme-text nie jest zdefiniowana?
Podsumowanie
var(--name, fallback) udostępnia wartość zapasową, gdy właściwość niestandardowa nie jest zdefiniowana. Wartości zapasowe można zagnieżdżać, aby obsługiwać wiele poziomów. Należy używać @property dla typowanych właściwości niestandardowych z gwarantowanymi wartościami początkowymi. Dla kluczowych właściwości wizualnych zawsze należy definiować wartości zapasowe.
Często zadawane pytania
Czy lekcja „Wartości awaryjne i var()” jest bezpłatna?
Tak — pełny tekst „Wartości awaryjne i var()” 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 „Wartości awaryjne i var()”?
Nauczy się Pan/Pani podawać wartości awaryjne w var() na wypadek, gdy właściwość niestandardowa jest niezdefiniowana lub nieprawidłowa. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Wartości awaryjne i var()”?
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