Sintassi

@property nome-proprietà {
  syntax: tipo;
  initial-value: valore iniziale;
  inherits: boolean;
}

Descrizione dei parametri principali

• nome-proprietà: il nome della proprietà CSS personalizzata, in formato kebab-case (minuscolo con trattini). Esempio: --main-color.

• syntax: il tipo di dato accettato dalla proprietà. Può essere, ad esempio: <color>, <length>, <angle>, <number>, ecc.

• initial-value: il valore predefinito della proprietà, valido per il tipo specificato. Esempi: #ff6347, 0px, 1.5.

• inherits: indica se la proprietà eredita il valore dal suo elemento genitore (true o false).

Esempio proprietà: @property

Codice Esempio: @property

CODE: CSS

1. @property --my-color {

2.   syntax: '<color>';

3.   initial-value: #50a14f;

4.   inherit: false;

5. }

7. .box {

8.   width: 200px;

9.   height: 200px;

10.   background-color: var(--my-color);

11.   transition: background-color 1s;

12. }

14. .box:hover {

15.   --my-color: #ff6347;

16. }

Contenuto Esempio: @property

  
  <style>
    @property --my-color {
      syntax: '<color>';
      initial-value: #50a14f;
      inherit: false;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: var(--my-color);
      transition: background-color 1s;
    }

    .box:hover {
      --my-color: #ff6347;
    }
  </style>

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

⚠️ Note compatibilità:
La proprietà @property in CSS è una funzionalità relativamente nuova che consente di definire proprietà personalizzate direttamente nel foglio di stile, rendendo possibile il loro utilizzo per transizioni o animazioni. È una parte della proposta CSS Houdini, che punta a dare ai CSS più potere e flessibilità, simile a quanto avviene con JavaScript, ma in modo più "nativo" e integrato nei CSS.

Questa proprietà è ancora in fase di implementazione e non è completamente supportata da tutti i browser, quindi è importante fare attenzione quando la si utilizza, verificando la compatibilità.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser