@property: aggiungere superpoteri alle variabili CSS

Una Kravets

CSS Houdini è un termine generico che descrive una di API di basso livello che espongono parti del motore di rendering CSS e sviluppatori ad accedere al modello a oggetti CSS. È una grande opportunità per l'ecosistema CSS, in quanto consente agli sviluppatori di indicare al browser leggere e analizzare codice CSS personalizzato senza aspettare che i fornitori del browser ti forniscano il supporto integrato per queste funzioni. Che emozione!

Una delle aggiunte più interessanti al CSS nel programma Houdini è la Proprietà e valori tramite Google Cloud.

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

Scrittura di proprietà personalizzate Houdini

Di seguito è riportato un esempio di impostazione di una proprietà personalizzata (ad esempio una variabile CSS), ma ora con una sintassi (type), un valore iniziale (di riserva) ed un valore booleano per l'ereditarietà (non eredita il valore dall'elemento padre o no?). Al momento, puoi farlo tramite CSS.registerProperty() in JavaScript, ma nei browser di supporto puoi usare @property:

File JavaScript separato (Chromium 78)

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

Incluso nel file CSS (Chromium 85)

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

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

Quando scrivi una proprietà personalizzata registrata con un syntax specificato, devi includere anche un initial-value.

Valori di riserva

Come con qualsiasi altra proprietà personalizzata, puoi ottenere (utilizzando var) o impostare (scrittura/riscrittura), ma con le proprietà personalizzate Houdini, se imposti un valore falso durante l'override, il motore di rendering CSS invia il valore iniziale (il suo valore di riserva) invece di ignorare la linea.

Considera l'esempio riportato di seguito. La variabile --colorPrimary ha un valore initial-value di magenta. ma lo sviluppatore l'ha considerata non valida "23". Senza @property, il parser CSS ignorerebbe il codice non valido. Ora il parser torna a magenta. Ciò consente i veri fallback e i test in 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 CSS semantici specificando di un determinato tipo. I tipi attualmente consentiti sono:

• 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 controllare il tipo di proprietà personalizzate. Questo approccio comporta molti vantaggi.

Per spiegare questo punto, ti mostrerò come animare una sfumatura. Al momento, non è possibile animare (o interpolare) uniformemente i valori dei gradienti, ogni dichiarazione del gradiente viene analizzata come una stringa.

Utilizzo di una proprietà personalizzata con un "numero" la sintassi, il gradiente a sinistra mostra un la transizione tra i valori di interruzione. Il gradiente a destra utilizza una proprietà personalizzata predefinita (nessuna sintassi definita) e mostra una transizione brusca.

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

Il browser a sinistra supporta l'API Houdini Properties and Values, abilitando una transizione di interruzione del gradiente uniforme. mentre quello a destra no. La browser che non supporta questa modifica è in grado di comprendere questa modifica solo come una stringa dal punto A al punto B. Non è possibile interpolare i valori e quindi non vedrai 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. Tu può 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%;
  }
}

Al momento di animarlo, puoi aggiornare il valore dal valore iniziale 40% a 100%:

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

In questo modo la transizione del gradiente verrà uniforme.

Bordi gradienti con transizione fluida. Guarda la demo su Glitch

Conclusione

La regola @property rende una tecnologia interessante ancora più accessibile consentendoti di scrivere codice CSS semanticamente significativo all'interno del CSS stesso. Per ulteriori informazioni di più su CSS Houdini e sull'API Properties and Values, dai un'occhiata a queste di risorse:

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

Foto di Cristian Escobar su Unsplash.