Regola CSS @property

Definizione e uso

CSS @property Le regole vengono utilizzate per definire direttamente le proprietà CSS personalizzate nel foglio di stile, senza eseguire alcun JavaScript.

@property Le regole hanno funzionalità di controllo del tipo di dati e vincoli, possono impostare valori predefiniti e definire se l'attributo può ereditare valori.

Usare @property I vantaggi sono:

  • Controllo del tipo e vincoli: deve essere specificato il tipo di dati della proprietà personalizzata, ad esempio <number>、<color>、<length> ecc. Questo può prevenire errori e garantire l'uso corretto delle proprietà personalizzate.
  • Impostare il valore predefinito: può essere impostato un valore predefinito per la proprietà personalizzata. Questo garantisce che se viene assegnato un valore non valido in seguito, il browser utilizzerà il valore di fallback definito.
  • Impostare il comportamento di ereditarietà: deve essere specificato se la proprietà personalizzata può ereditare il valore dall'elemento padre.

Esempio: definire proprietà personalizzate

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

La definizione sopra indicata significa che --my-color è una proprietà di colore, che può ereditare il valore dall'elemento padre e ha come valore predefinito lightgray.

Utilizzare proprietà personalizzate in CSS:

body {}}
  backgound-color: var(--my-color);
}

Esempio

Esempio 1

Specificare due attributi personalizzati per lagradiente - e utilizzarli per animare la gradazione:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Prova a te stesso

Esempio 2

Specificare due attributi personalizzati: uno per la dimensione degli elementi e uno per il colore degli elementi:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Prova a te stesso

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
--propertyname Obbligatorio. Il nome dell'attributo personalizzato.
syntax

Può essere <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function> o <custom-ident>, o una lista di tipi di dati e valori chiave.

+ (spazi separati) e # (separati da virgola) servono a rappresentare una lista di valori, ad esempio <color># rappresenta una lista di valori <color> separati da virgola.

La barra verticale (|) può creare una condizione 'o' per la sintassi desiderata, ad esempio <length> | auto accetta <length> o auto, mentre <color># | <integer># si aspetta una lista di valori <color> separati da virgola o una lista di valori <integer> separati da virgola.

initial-value Imposta il valore iniziale dell'attributo.
inherits true o false. Controlla se l'ereditarietà dell'attributo personalizzato specificato con @property è abilitata per impostazione predefinita.

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la regola @ per la prima volta.

Chrome Edge Firefox Safari Opera
85 85 128 16.4 71

Pagine correlate

Corso:Regola CSS @property