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