PricingLoginStart free
CSS Academy · Lektion

API:t CSS Properties and Values (@property)

Registrera anpassade egenskaper med typer och arv med @property för animerbara CSS-variabler.

Lektion 2 av 413 steg

API:t CSS Properties and Values (@property) är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 2 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 CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad är @property?

@property är CSS-sättet att registrera en anpassad egenskap med en typ, ett arvningsbeteende och ett initialvärde. Det är den deklarativa formen av CSS Properties and Values API (CSS.registerProperty).

@property-syntax

Registrera en anpassad egenskap med tre obligatoriska deskriptorer:

<div class="box"></div>

syntax-deskriptor

Deskriptorn syntax definierar egenskapens typ med hjälp av CSS-typenamn:

  • "<number>", "<integer>", "<percentage>"
  • "<angle>", "<color>", "<length>"
  • "<image>", "<transform-list>"
  • "*" – accepterar alla värden (som en oregistrerad egenskap)

inherits-deskriptor

Styr om egenskapen ärvs genom DOM-trädet. Ange false för egenskaper som ska vara isolerade per element.

initial-value-deskriptor

Anger ett garanterat initialvärde när egenskapen inte har angetts. Det gör egenskapen animerbar.

Animera anpassade egenskaper

Den viktigaste fördelen med @property är att registrerade anpassade egenskaper kan övergå och animeras, eftersom webbläsaren känner till deras typ och kan interpolera mellan värdena:

<div class="element is-hovered"></div>

Utan @property

Utan registrering känner CSS inte till de anpassade egenskapernas typer. Övergångar mellan två variabelvärden hoppar i stället för att interpoleras – webbläsaren kan inte beräkna mittpunkten för en okänd typ.

@property för gradientanimering

Animering av gradientstopp (tidigare omöjligt utan @property):

<div class="loader loading"></div>

Motsvarighet i JavaScript

Du kan också registrera egenskaper med hjälp av JavaScript-API:et:

<div id="box"></div>
<script>
  // JavaScript equivalent of @property
  CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });

  document.getElementById('box').style.setProperty('--rotation', '45deg');
</script>

Webbläsarstöd

@property stöds i Chrome 85+, Edge 85+, Safari 16.4+ och Firefox 128+. Det är allmänt tillgängligt i moderna webbläsare.

Praktiska användningsområden för @property

Vanliga användningsområden:

  • Animering av gradientpositioner och färger
  • Animering av nyans/mättnad i HSL-färger
  • Animering av fyllning i förloppsindikatorer
  • Räknaranimeringar för att visa tal
  • Smidiga övergångar mellan mörkt och ljust läge genom animering av färgtoken

Snabbkontroll

Varför krävs @property för att animera anpassade CSS-egenskaper?

Besvara frågan i den interaktiva lektionen

Sammanfattning

@property registrerar anpassade egenskaper med en syntax-typ, en inherits-flagga och ett initial-value. Registrerade egenskaper kan animeras och övergå eftersom webbläsaren kan interpolera deras typade värden. Det möjliggör gradientanimeringar, nyansövergångar och räknaranimeringar som är omöjliga med oregistrerade anpassade egenskaper.

Gratis att börja

Lär dig CSS 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
40
Lektioner
159
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”API:t CSS Properties and Values (@property)” gratis?

Ja – hela texten till ”API:t CSS Properties and Values (@property)” 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 CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”API:t CSS Properties and Values (@property)”?

Registrera anpassade egenskaper med typer och arv med @property för animerbara CSS-variabler. Ni övar på CSS 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 CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS 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 2 av 4.

Hur lång tid tar lektionen ”API:t CSS Properties and Values (@property)”?

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 CSS Academy-lektionen?

Ja. Varje CSS 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

  1. CSS Typed Object Model (OM)
  2. API:t CSS Properties and Values (@property)
  3. CSS Paint API: worklets
  4. CSS Layout API och dess omfattning
← Tillbaka till CSS Academy