0Pricing
CSS Academy · Lezione

API CSS Properties and Values (@property)

Registri proprietà personalizzate con tipi ed ereditarietà utilizzando @property per creare variabili CSS animabili.

API CSS Properties and Values (@property) è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Che cos'è @property?

@property è il meccanismo CSS per registrare una proprietà personalizzata con un tipo, un comportamento di ereditarietà e un valore iniziale. È la forma dichiarativa della CSS Properties and Values API (CSS.registerProperty).

Sintassi di @property

Registri una proprietà personalizzata con tre descrittori obbligatori:

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

Descrittore syntax

Il descrittore syntax definisce il tipo della proprietà utilizzando i nomi dei tipi CSS:

  • "<number>", "<integer>", "<percentage>"
  • "<angle>", "<color>", "<length>"
  • "<image>", "<transform-list>"
  • "*" — accetta qualsiasi valore (come una proprietà non registrata)

Descrittore inherits

Controlla se la proprietà viene ereditata attraverso il DOM. Imposti false per le proprietà che devono essere isolate per elemento.

Descrittore initial-value

Fornisce un valore iniziale garantito quando la proprietà non è impostata. Questo rende la proprietà animabile.

Animare le proprietà personalizzate

Il vantaggio principale di @property è che le proprietà personalizzate registrate possono essere sottoposte a transizioni e animate, perché il browser ne conosce il tipo e può interpolare i valori:

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

Senza @property

Senza registrazione, CSS non conosce i tipi delle proprietà personalizzate. Le transizioni tra due valori di variabili passano bruscamente da uno all'altro invece di interpolare: il browser non può calcolare il valore intermedio di un tipo sconosciuto.

@property per animare i gradienti

Animazione delle interruzioni di colore dei gradienti (prima impossibile senza @property):

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

Equivalente JavaScript

È anche possibile registrare le proprietà utilizzando l'API JavaScript:

<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>

Supporto dei browser

@property è supportato in Chrome 85+, Edge 85+, Safari 16.4+ e Firefox 128+. È ampiamente disponibile nei browser moderni.

Usi pratici di @property

Casi d'uso comuni:

  • Animazione delle posizioni e dei colori dei gradienti
  • Animazione di tonalità/saturazione nei colori HSL
  • Animazioni del riempimento delle barre di avanzamento
  • Animazioni di contatori per la visualizzazione dei numeri
  • Transizioni fluide tra modalità scura e chiara tramite animazioni dei token di colore

Verifica rapida

Perché @property è necessario per animare le proprietà personalizzate CSS?

Riepilogo

@property registra le proprietà personalizzate con un tipo syntax, un flag inherits e un initial-value. Le proprietà registrate possono essere animate e sottoposte a transizioni perché il browser è in grado di interpolarne i valori tipizzati. Questo consente animazioni dei gradienti, transizioni della tonalità e animazioni dei contatori impossibili con proprietà personalizzate non registrate.

Domande Frequenti

La lezione «API CSS Properties and Values (@property)» è gratuita?

Sì — il testo completo di «API CSS Properties and Values (@property)» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «API CSS Properties and Values (@property)»?

Registri proprietà personalizzate con tipi ed ereditarietà utilizzando @property per creare variabili CSS animabili. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «API CSS Properties and Values (@property)»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. CSS Typed Object Model (OM)
  2. API CSS Properties and Values (@property)
  3. CSS Paint API: worklet
  4. CSS Layout API e ambito
← Torna a CSS Academy