CSS Custom Properties: deklarera och uppdatera
Deklarera variabler med -- på :root, referera till dem med var() och uppdatera dem dynamiskt med JavaScript för temaanpassning i realtid.
CSS Custom Properties: deklarera och uppdatera är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Sammanfattning: Deklaration och scope
CSS custom properties deklareras med prefixet -- på valfritt element. Egenskaper som deklareras på :root är tillgängliga globalt. Underordnade element ärver värdena och kan skriva över dem lokalt.
:root {
--spacing: 8px;
--color-brand: #6366f1;
}
.card {
--spacing: 12px; /* local override for .card and its children */
padding: var(--spacing);
}Liveuppdateringar med JavaScript
Custom properties kan ändras vid körning. Använd element.style.setProperty('--name', value) för åsidosättningar på elementnivå, eller uppdatera en global variabel på :root för att påverka alla användare direkt.
// Change globally:
document.documentElement.style.setProperty('--color-brand', '#ef4444');
// Change locally on one element:
const card = document.querySelector('.card');
card.style.setProperty('--bg', '#f9f9f9');Läsa värden för custom properties i JS
Läs en custom property med getComputedStyle(element).getPropertyValue('--name').trim(). Det läser det beräknade värdet (efter kaskaden), inte bara värdet som angetts inline.
const brandColor = getComputedStyle(document.documentElement)
.getPropertyValue('--color-brand')
.trim();
console.log(brandColor); // '#6366f1'Animera custom properties
Custom properties kan interpoleras av webbläsaren med @property (Houdini) eller användas i övergångar när de kombineras med calc(). Utan @property kan webbläsare inte övergå direkt mellan variabelvärden.
@property — Registrerade custom properties
CSS-regeln @property registrerar en custom property med en typ, ett initialvärde och en regel för arv. Registrerade egenskaper kan övergå och animeras med inbyggt webbläsarstöd.
@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;
}Tokensystem med custom properties
Design tokens-modellen: lagra alla designbeslut som custom properties. Komponenter använder tokens i stället för hårdkodade värden. När en token ändras sprids ändringen överallt.
: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;
}Responsiva custom properties
Ändra värden för custom properties i media queries. Komponenter som använder variablerna anpassas automatiskt — det är renare än att skriva separata komponentregler för varje brytpunkt.
:root {
--container-max: 640px;
--font-size-base: 15px;
}
@media (min-width: 1024px) {
:root {
--container-max: 1280px;
--font-size-base: 16px;
}
}Custom properties i calc()
Använd variabler i calc() för härledd marginal och storlek. Det skapar ett sammanhängande och matematiskt konsekvent storlekssystem.
: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 */Teman för flera varumärken
Ange olika temats tokens per data-attribut. En sida kan stödja flera teman för white-labeling.
[data-theme='brand-a'] { --primary: #2563eb; }
[data-theme='brand-b'] { --primary: #16a34a; }
[data-theme='brand-c'] { --primary: #dc2626; }Custom properties i SVG
SVG-attribut som fill och stroke kan använda custom properties. Det gör att du kan tematisera ikoner från CSS utan att ändra SVG-markupen.
/* CSS */
:root { --icon-fill: #6366f1; }
/* SVG inline or referenced */
svg { fill: var(--icon-fill); }Felsöka custom properties
I Chrome DevTools väljer du ett element och tittar på fliken Computed för värdena för custom properties. I rutan Styles visas var varje variabel deklareras. Avsnittet Inherited visar variabler från överordnade element.
Snabbkontroll
Vilken JavaScript-metod uppdaterar en CSS custom property på ett element?
Sammanfattning: CSS custom properties på djupet
Deklarera på :root för globala värden och skriv över på underordnade element för lokalt scope. Uppdatera med style.setProperty från JS. Läs med getComputedStyle. @property möjliggör inbyggda övergångar. Använd custom properties som design tokens för en enda källa till sanning. Skriv över dem i media queries för responsiva tokens.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”CSS Custom Properties: deklarera och uppdatera” gratis?
Ja – hela texten till ”CSS Custom Properties: deklarera och uppdatera” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”CSS Custom Properties: deklarera och uppdatera”?
Deklarera variabler med -- på :root, referera till dem med var() och uppdatera dem dynamiskt med JavaScript för temaanpassning i realtid. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”CSS Custom Properties: deklarera och uppdatera”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- CSS Custom Properties: deklarera och uppdatera
- Övergångar: egenskap, varaktighet och timing
- @keyframes-animationer
- Respektera prefers-reduced-motion