Questa pagina è stata tradotta dall'API Cloud Translation.

@property: variabili CSS di nuova generazione ora con supporto universale del browser

Una Kravets

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.

Supporto dei browser

Origine

I vantaggi di `@property`

Significato semantico: utilizza @property per 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 @property per 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 uno "standard" proprietà personalizzata, imposta un nome 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:

di Gemini Advanced.

Utilizzo di @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ù.