Reserveverdier og var()
Angi reserveverdier i var() for tilfeller der en egendefinert egenskap er udefinert eller ugyldig.
Reserveverdier og var() er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Syntaks for var()-fallback
Funksjonen var() godtar et valgfritt ekstra argument som reserveverdi, og denne brukes når den egendefinerte egenskapen ikke er definert.
<button class="button">Fallback: royalblue</button>
Når fallback brukes
Fallback-verdien brukes når:
- Egenskapen ikke er definert i omfanget
- Egenskapen har verdien
initial - Egenskapen er deklarert med en verdi som er ugyldig i den aktuelle konteksten
Flere fallback-nivåer
Bygg inn var()-kall for å kjede sammen flere fallback-nivåer:
<p class="text">Falls through two levels to #3b82f6</p>
Fallback kan være en hvilken som helst verdi
Fallback-verdier kan være enhver gyldig verdi for egenskapen – inkludert andre variabler, beregnede verdier eller literaler:
<div class="card">16px / 50%</div>
Nøkkelordet initial
Når en egendefinert egenskap settes til initial, blir resultatet som om den aldri var satt. Kombinert med fallback lar dette komponenter velge bort en arvet egendefinert egenskap.
<div class="no-theme">
<button class="button">Falls back to gray</button>
</div>
Garantert ugyldig verdi
Å bruke initial som verdi for en egendefinert egenskap er en teknikk for å garantere at fallback aktiveres. Dette kan opprette valgfrie funksjonsflagg i CSS.
Egendefinert egenskap + @property
Regelen @property (Houdini) registrerer en typeangitt egendefinert egenskap med en garantert initialverdi. Dette er mer robust enn å stole på fallback-verdier.
<div class="track">
<div class="bar"></div>
</div>
Fallback for animasjonssikre verdier
Sørg for at overganger fungerer selv når en egendefinert egenskap ikke er angitt, ved å angi en trygg fallback-verdi som det kan animeres fra:
<div class="modal">Modal shown via --modal-opacity: 1 (fallback is 0 when unset)</div>
Feilsøking av manglende variabler
Hvis en egendefinert egenskap mangler og ingen fallback-verdi er angitt, beregnes egenskapen til initialverdien (ofte nøkkelordet initial). For farger kan dette gi uventede gjennomsiktige eller svarte resultater. Legg alltid til fallback-verdier for kritiske egenskaper.
var() i egendefinerte egenskaper
Verdier for egendefinerte egenskaper kan selv referere til andre egendefinerte egenskaper, slik at det opprettes en kjede av tokens:
<div class="swatch swatch-primary"></div>
<div class="swatch swatch-light"></div>
Reserveverdier og spesifisitet
Reserveverdier har ingenting med spesifisitet å gjøre – de brukes bare når den refererte egendefinerte egenskapen er udefinert eller ugyldig. Spesifisitet avgjør hvilken regel som angir den egendefinerte egenskapen, ikke hvilken reserveverdi som brukes.
Kort sjekk
Hva gjør color: var(--theme-text, #111) når --theme-text ikke er definert?
Oppsummering
var(--name, fallback) angir en reserveverdi når den egendefinerte egenskapen ikke er definert. Reserveverdier kan nøstes for flere nivåer. Bruk @property for typede egendefinerte egenskaper med garanterte startverdier. Angi alltid reserveverdier for kritiske visuelle egenskaper.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Reserveverdier og var()» gratis?
Ja – hele teksten i «Reserveverdier og var()» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Reserveverdier og var()»?
Angi reserveverdier i var() for tilfeller der en egendefinert egenskap er udefinert eller ugyldig. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Reserveverdier og var()»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Deklarere og bruke egendefinerte egenskaper
- Reserveverdier og var()
- Avgrense variabler til komponenter
- Oppdatere variabler med JavaScript