Preparati per un potenziamento CSS. La regola @property, parte della serie di API CSS Houdini, è ora completamente supportata in tutti i browser moderni. Questa funzionalità innovativa offre nuovi livelli di controllo e flessibilità per le proprietà personalizzate CSS (note anche come variabili CSS), rendendo i tuoi fogli di stile più intelligenti e dinamici.
I vantaggi di @property
- Significato semantico: utilizza
@propertyper definire un tipo (sintassi) per le tue proprietà personalizzate. Questo indica al browser il tipo di dati contenuti nella tua proprietà personalizzata (ad esempio colori, lunghezze o numeri), impedendo risultati imprevisti e supportando nuove possibilità come l'animazione di gradienti. - Valori di riserva: gli stili non scompariranno più. Utilizza
@propertyper impostare un valore iniziale per una proprietà personalizzata. Se in un secondo momento viene assegnato un valore non valido, il browser utilizza normalmente il fallback che hai definito. - Gestione degli errori migliorata:la sicurezza dei tipi migliorata e la possibilità di impostare i fallback aprono nuove opportunità di test e convalida direttamente all'interno del tuo CSS.
Creare proprietà personalizzate avanzate
Per creare una proprietà personalizzata "standard", imposta un nome della proprietà preceduto da -- e assegna un valore a questa proprietà. Il valore di queste proprietà personalizzate viene analizzato come stringa dal browser.
L'esempio seguente mostra come viene inizializzata una proprietà personalizzata predefinita (basata su stringhe).
:root {
--myColor: hotpink;
}
Per usufruire dei vantaggi di queste "proprietà personalizzate avanzate", inclusa la semantica al di là di una stringa, registra la tua proprietà personalizzata CSS con @property.
In questo esempio la stessa proprietà personalizzata viene inizializzata con @property.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
La proprietà personalizzata inizializzata con @property fornisce molti più dettagli rispetto a un nome e a un valore. Include il tipo di sintassi e imposta l'ereditarietà su true o false.
Il vantaggio di questo approccio è che, con la proprietà standard, ci si aspetta che la proprietà contenga un colore come valore e che lo utilizzerai altrove nel foglio di stile. Se qualcuno dovesse aggiornare la proprietà in modo che abbia un numero come valore, qualsiasi utilizzo della proprietà altrove non andrebbe a buon fine. Per utilizzare @property è stato definito un colore di riserva, insieme a un syntax che dichiara che questa proprietà deve contenere un valore di colore. Se viene usato un valore diverso dal colore, verrà usato il valore di riserva.
Demo: sfondo sfumato scintillante
Una delle interessanti applicazioni di @property è l'animazione fluida di proprietà di cui in precedenza non era possibile effettuare la transizione, come i gradienti, che vengono percepite come immagini dal browser. Tuttavia, se dai un significato sintattico alle variabili tramite @property, puoi utilizzarli in un'istruzione di gradiente. Ora stai descrivendo un'animazione tra due valori dichiarati all'interno del gradiente, attivando l'animazione. Prendi l'esempio seguente: una scheda con una sottile animazione di sfondo composta da due gradienti radiali che cambiano colore su sequenze temporali diverse:
@property per applicare uno stile ai colori animati in una sfumatura di sfondo.A questo scopo, imposta i valori delle proprietà personalizzate come colori:
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: lavender;
}
@property --shine-1 {
syntax: "<color>";
inherits: false;
initial-value: wheat;
}
@property --shine-2 {
syntax: "<color>";
inherits: false;
initial-value: lightpink;
}
Successivamente, accedi ai file per creare lo sfondo gradiente iniziale:
.card {
background: radial-gradient(
300px circle at 55% 60% in oklab,
var(--shine-2), transparent 100% 100%),
radial-gradient(farthest-side circle at 75% 30% in oklab,
var(--shine-1) 0%, var(--card-bg) 100%);
}
Inoltre, aggiorni i valori nei fotogrammi chiave:
@keyframes animate-color-1 {
to {
--shine-1: orange;
}
}
@keyframes animate-color-2 {
to {
--shine-2: hotpink;
}
}
E anima ogni elemento:
animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;
Conclusione
Le proprietà personalizzate registrate in CSS sono una funzionalità molto efficace che estende il linguaggio CSS fornendo significato e contesto alle variabili CSS. Ora, con un atterraggio di @property in valore di riferimento, il superpotere CSS sta crescendo di più.