CSS Houdini è un termine generico che descrive un insieme di API di basso livello che espongono parti del motore di rendering CSS e consentono agli sviluppatori di accedere al modello degli oggetti CSS. Si tratta di un cambiamento enorme 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 il 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à personalizzate CSS (chiamate anche variabili CSS) dando 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. Ha dei dati.
Valori di riserva
Come per 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
initial-value pari a magenta. Tuttavia, lo sviluppatore ha assegnato il valore non valido "23". Senza @property, il parser CSS ignorerebbe il codice non valido. Ora il parser passa a magenta. Ciò consente di eseguire test e fallback 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 sono:
lengthnumberpercentagelength-percentagecolorimageurlintegerangletimeresolutiontransform-listtransform-functioncustom-ident(una stringa identificatore personalizzata)
L'impostazione di una sintassi consente al browser di controllare il tipo di proprietà personalizzata. Questo approccio presenta molti 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 non supportato è in grado di comprendere questa modifica solo come una stringa che va dal punto A al punto B. Non è possibile interpolare i 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 creare un'istanza della proprietà personalizzata --gradPoint in questo modo:
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
Quando è il momento di animarlo, puoi aggiornare il valore da 40% iniziale a 100%:
.post:hover,
.post:focus {
--gradPoint: 100%;
}
In questo modo verrà attivata la transizione graduale del gradiente.
Conclusione
La regola @property rende un'entusiasmante tecnologia ancora più accessibile
consentendoti di scrivere CSS semanticamente significativi all'interno del CSS stesso. Per saperne 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
- Coda dei problemi relativi al CSSWG Houdini
Foto di Cristian Escobar su Unsplash.