@property: aggiungere superpoteri alle variabili CSS

Una Kravets

CSS Houdini è un termine generico che indica una serie di API di basso livello che espongono parti del motore di rendering CSS e forniscono agli sviluppatori l'accesso al modello a oggetti CSS. Si tratta di un enorme cambiamento per l'ecosistema CSS, in quanto consente agli sviluppatori di indicare al browser come leggere e analizzare CSS personalizzati senza attendere che i fornitori dei browser forniscano il supporto integrato per queste funzionalità. Così emozionante!

Una delle aggiunte più interessanti al CSS all'interno dell'ombrello di Houdini è l'API Properties and Values.

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

Scrittura di proprietà personalizzate Houdini

Ecco un esempio di impostazione di una proprietà personalizzata (ad esempio una variabile CSS), ma ora con sintassi (tipo), valore iniziale (di riserva) ed ereditarietà booleana (il valore viene ereditato o meno dal valore principale). Attualmente puoi farlo tramite CSS.registerProperty() in JavaScript, ma nei browser supportati puoi usare @property:

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

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

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

Valori di riserva

Come per qualsiasi altra proprietà personalizzata, puoi ottenere (utilizzando var) o impostare (scrittura/riscrittura) valori, ma con le proprietà personalizzate Houdini, se imposti un valore falso quando lo sostituisci, il motore di rendering CSS invia il valore iniziale (il suo valore di riserva) anziché ignorare la riga.

Considera l'esempio riportato di seguito. La variabile --colorPrimary ha un initial-value di magenta. Ma lo sviluppatore ha assegnato il valore non valido "23". Senza @property, il parser CSS ignorerebbe il codice non valido. Ora il parser torna a magenta. Ciò consente di fallback e test reali all'interno del CSS. Perfetto!

.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 codice 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 identificatore personalizzata)

L'impostazione di una sintassi consente al browser di eseguire il controllo dei tipi di proprietà personalizzate. Questo offre molti vantaggi.

Per spiegare questo punto, ti mostrerò come animare un gradiente. Al momento, non è possibile animare (o eseguire l'interpolazione) in modo fluido tra i valori dei gradienti, 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 fluida verso il basso con il gradiente di colore superiore.

Il browser a sinistra supporta l'API Houdini Properties and Values, consentendo una transizione con interruzione uniforme del gradiente. mentre il browser a destra non lo fa. Il browser non supportato è in grado di comprendere questa modifica solo come una stringa che va dal punto A al punto B. Non c'è opportunità di interpolare i valori e, di conseguenza, non ottieni una transizione fluida.

Tuttavia, se dichiari il tipo di sintassi durante la scrittura di proprietà personalizzate e poi utilizzi queste proprietà personalizzate per attivare l'animazione, vedrai la transizione. Puoi creare un'istanza della proprietà personalizzata --gradPoint in questo modo:

/* Check for Houdini support & register property */
@supports (background: paint(something)) {
  @property --gradPoint {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

Poi, quando arriva il momento di animarla, puoi aggiornare il valore dal valore 40% iniziale a 100%:

@supports (background: paint(something)) {
  .post:hover,
  .post:focus {
    --gradPoint: 100%;
  }
}

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

Conclusione

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

• Houdini è già pronta?
• Riferimento MDN Houdini
• Proprietà personalizzate più intelligenti con la nuova API di Houdini
• Coda dei problemi CSSWG Houdini

Foto di Cristian Escobar su Unsplash.