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

Una Kravets

Data di pubblicazione: 12 luglio 2024

Preparati a un potenziamento del CSS. La regola @property, che fa parte dell'insieme di API CSS Houdini, è ora completamente supportata in tutti i browser moderni. Questa funzionalità rivoluzionaria sblocca nuovi livelli di controllo e flessibilità per le proprietà CSS personalizzate (note anche come variabili CSS), rendendo gli stili di fogli di stile più intelligenti e dinamici.

I vantaggi di @property

  • Significato semantico: utilizza @property per definire un tipo (sintassi) per le proprietà personalizzate. In questo modo, il browser viene informato sul tipo di dati contenuti nella proprietà personalizzata (ad esempio colori, lunghezze o numeri), evitando risultati imprevisti e supportando nuove possibilità come l'animazione dei gradienti.
  • Valori di riserva: non ci saranno più stili che scompaiono. 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 in modo corretto il valore di riserva definito.
  • Gestione degli errori migliorata:la sicurezza di tipo avanzata e la possibilità di impostare i valori di riserva aprono nuove opportunità di test e convalida direttamente all'interno del CSS.

Creare proprietà personalizzate avanzate

Per creare una proprietà personalizzata "standard", imposta un nome di 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 oltre una stringa, registra la 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 di un semplice nome e valore. Include il tipo di sintassi e imposta l'eredità su true o false.

Il vantaggio di questo approccio è che, con la proprietà standard, prevedi che questa contenga un colore come valore e che lo utilizzerai altrove nello stile. Se qualcuno aggiornasse la proprietà in modo che abbia un numero come valore, qualsiasi utilizzo della proprietà altrove non andrebbe a buon fine. Se utilizzi @property, è definito un colore di riserva, insieme a un syntax che dichiara che questa proprietà deve contenere un valore di colore. Se viene utilizzato un valore diverso dal colore, verrà utilizzato il valore di riserva.

Demo: sfondo con gradiente scintillante

Una delle applicazioni interessanti di @property è l'animazione fluida di proprietà per le quali in precedenza era impossibile eseguire la transizione, come i gradienti, che vengono percepiti come immagini dal browser. Tuttavia, se assegni alle variabili un significato sintattico tramite @property, queste possono essere utilizzate in un'istruzione di gradiente. Ora descrivi un'animazione tra due valori dichiarati all'interno del gradiente, attivando l'animazione. Prendiamo l'esempio seguente: una scheda con un'animazione di sfondo discreta composta da due gradienti radiali che cambiano colore su tracce temporali diverse:

Utilizzo di @property per applicare uno stile ai colori animati in un gradiente di sfondo.

Per farlo, 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;
}

Poi accedi a questi dati per creare lo sfondo sfumato 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, aggiorna i valori nei fotogrammi chiave:

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

E anima ogni:

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

Conclusione

Le proprietà personalizzate registrate CSS sono una funzionalità molto potente che estende il linguaggio CSS fornendo significato e contesto alle variabili CSS. Ora, con l'inserimento di @property nella linea di base, questa superpotenza CSS sta crescendo.

Letture aggiuntive