@property: aggiungere superpoteri alle variabili CSS

Una Kravets

CSS Houdini è un termine generico che copre un insieme di API di basso livello che espongono parti del motore di rendering CSS e forniscono agli sviluppatori l'accesso al modello di oggetti CSS. Si tratta di un'enorme variazione per l'ecosistema CSS, in quanto consente agli sviluppatori di indicare al browser come leggere e analizzare il CSS personalizzato senza attendere che i fornitori di browser forniscano supporto integrato per queste funzionalità. Che emozione!

Una delle aggiunte più interessanti al CSS nell'ambito di Houdini è l'API Properties and Values.

Questa API potenzia le proprietà CSS personalizzate (chiamate comunemente anche variabili CSS) assegnando loro un significato semantico (definito da una sintassi) e persino valori di riserva, consentendo i test CSS.

Scrittura di proprietà personalizzate Houdini

Ecco un esempio di impostazione di una proprietà personalizzata (ad es. una variabile CSS), ma ora con una sintassi (tipo), un valore iniziale (valore predefinito) e un booleano di ereditarietà (eredita il valore dall'elemento principale o meno?). Il modo attuale per farlo è tramite CSS.registerProperty() in JavaScript, ma nei browser supportati puoi utilizzare @property:

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Ora puoi accedere a --colorPrimary come a qualsiasi altra proprietà CSS personalizzata tramite var(--colorPrimary). Tuttavia, la differenza è che --colorPrimary non viene solo letto come stringa. Contiene dati.

Valori di riserva

Come con qualsiasi altra proprietà personalizzata, puoi recuperare (utilizzando var) o impostare (scrivere/riscrivere) i valori, ma con le proprietà personalizzate di Houdini, se imposti un valore falsey quando lo sostituisci, il motore di rendering CSS invierà il valore iniziale (il valore di riserva) anziché ignorare la riga.

Considera l'esempio riportato di seguito. La variabile --colorPrimary ha un valore initial-value pari a magenta. Tuttavia, lo sviluppatore ha assegnato il valore non valido "23". Senza @property, l'analizzatore sintattico CSS ignorerebbe il codice non valido. Ora, l'interprete esegue il fallback su magenta. In questo modo è possibile eseguire test e utilizzare valori di riserva veri all'interno del CSS. Ottimo!

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

Sintassi

Con la funzionalità di sintassi, ora puoi scrivere CSS semantico specificando un tipo. I tipi attualmente consentiti includono:

• length
• number
• percentage
• length-percentage
• color
• image
• url
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (una stringa di identificatore personalizzato)

L'impostazione di una sintassi consente al browser di eseguire il controllo del tipo delle proprietà personalizzate. Questo approccio presenta numerosi vantaggi.

Per illustrare questo punto, ti mostrerò come animare un gradiente. Al momento, non è possibile animare (o interpolare) in modo uniforme tra i valori del gradiente, poiché ogni dichiarazione del gradiente viene analizzata come stringa.

In questo esempio, la percentuale di interruzione del gradiente viene animata da un valore iniziale del 40% a un valore finale del 100% tramite un'interazione con il passaggio del mouse. Dovresti vedere una transizione graduale del colore del gradiente superiore verso il basso.

Il browser a sinistra supporta l'API Houdini Properties and Values, consentendo una transizione graduale delle interruzioni del gradiente. Il browser a destra no. Il browser che non supporta questa funzionalità è in grado di comprendere questa modifica solo come stringa che va dal punto A al punto B. Non è possibile eseguire l'interpolazione dei valori, pertanto non viene visualizzata la transizione graduale.

Tuttavia, se dichiari il tipo di sintassi quando scrivi le proprietà personalizzate e poi le utilizzi per attivare l'animazione, vedrai la transizione. Puoi eseguire l'inizializzazione della proprietà personalizzata --gradPoint nel seguente modo:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

Quando è il momento di animarlo, puoi aggiornare il valore dall'iniziale 40% a 100%:

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

In questo modo verrà attivata la transizione graduale del gradiente.

Conclusione

La regola @property rende ancora più accessibile una tecnologia entusiasmante, consentendoti di scrivere CSS semanticamente significativo all'interno del CSS stesso. Per scoprire di più su CSS Houdini e sull'API Properties and Values, consulta queste risorse:

• Houdini è già pronto?
• Riferimenti MDN su Houdini
• Proprietà personalizzate più intelligenti con la nuova API di Houdini
• Houdini CSSWG Issue Queue

Foto di Cristian Escobar su Unsplash.