@property in CSS: creare custom properties tipizzate

Con l'arrivo delle CSS Typed Custom Properties tramite la regola @property, il CSS diventa ancora più potente. Questa nuova funzionalità permette di registrare custom properties (le variabili CSS) specificando il loro tipo, se ereditano dai genitori e quale valore iniziale hanno.

In questo articolo vedremo:

Cosa sono le custom properties registrate
La sintassi di @property
Differenze con le variabili CSS classiche
Esempi pratici
Compatibilità browser

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

🎯 Cosa sono le custom properties registrate

Le variabili classiche in CSS (es: --main-color: red;) sono dinamiche: il browser non conosce il tipo di valore che contengono. Non è possibile animarle direttamente né validarle.

Con @property, puoi dichiarare una custom property “registrata” con:

Un tipo (es: <color>)
Un valore iniziale
Se eredita da elementi genitori

📌 Esempio Base

@property --logo {
  syntax: "<color>";
  inherits: true;
  initial-value: red;
}

Ora puoi usare --logo come una proprietà CSS vera e propria:

:root {
  --logo: red;
}

button {
  background-color: var(--logo);
}

⚙️ Sintassi Completa

@property --nome {
  syntax: "<tipo>";
  inherits: true | false;
  initial-value: valore;
}

Parametri:

--nome: il nome della custom property
syntax: specifica il tipo, ad esempio <color>, <length>, <number>
inherits: indica se la proprietà eredita dai genitori
initial-value: il valore iniziale della proprietà

✨ Esempio con animazione

@property --accent {
  syntax: "<color>";
  inherits: false;
  initial-value: orange;
}

:root {
  --accent: orange;
}

.box {
  width: 100px;
  height: 100px;
  background: var(--accent);
  transition: --accent 0.5s ease;
}

.box:hover {
  --accent: deeppink;
}

👉 In questo esempio, --accent cambia colore con una transizione fluida al passaggio del mouse. Questo è possibile solo grazie a @property.

📌 Differenze con le variabili CSS classiche

Variabili CSS	Custom Properties Registrate
No tipo definito	Tipo definito (`<color>`, `<number>`, ecc.)
Non animabili	Animabili se registrate
Non validate	Controllo sintattico sui valori
Compatibili ovunque	Solo su browser moderni

🧪 Altri Tipi supportati

Puoi registrare proprietà con diversi tipi CSS:

<color>
<length>
<number>
<angle>
<percentage>

🌐 Compatibilità Browser

La regola @property è una funzionalità relativamente nuova e non è supportata da tutti i browser.

Verifica sempre in quali browser puoi utilizzarla oppure ti conviene usare feature detection o fallback se punti alla massima compatibilità.

✅ Conclusione

Le custom properties registrate con @property portano il CSS a un livello superiore, permettendoti di:

Animare proprietà personalizzate
Definire tipi per valori CSS
Migliorare la robustezza del tuo codice

Usa @property per rendere le tue variabili CSS più intelligenti, animate e controllabili!

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment

Techelopment

Cerca nel blog