Proprietà personalizzate più intelligenti con la nuova API di Houdini

Transizioni e protezione dei dati in CSS

Sam Richard

Le proprietà CSS personalizzate, note anche come variabili CSS, ti consentono di definire le tue proprietà in CSS e di utilizzare i relativi valori in tutto il CSS. Sebbene oggi siano incredibilmente utili, presentano delle carenze che possono complicare il loro utilizzo: possono assumere qualsiasi valore, quindi potrebbero essere accidentalmente sostituiti con qualcosa di imprevisto, ereditano sempre i valori dall'elemento principale e non puoi eseguirne la transizione. Con l'API CSS Properties and Values 1.0 di Houdini, ora disponibile in Chrome 78, questi limiti sono superati, rendendo le proprietà personalizzate CSS incredibilmente potenti.

Che cos'è Houdini?

Prima di parlare della nuova API, parliamo brevemente di Houdini. Il CSS-TAG Houdini Task Force, meglio noto come CSS Houdini o semplicemente Houdini, ha lo scopo di "sviluppare funzionalità che spieghino la "magia" dello stile e del layout sul web". La raccolta di specifiche Houdini è progettata per sfruttare la potenza del motore di rendering del browser, consentendo sia una conoscenza più approfondita dei nostri stili sia la possibilità di estenderne il funzionamento. In questo modo, è finalmente possibile utilizzare valori CSS digitati in JavaScript e eseguire il polyfilling o creare nuovo CSS senza influire sul rendimento. Houdini ha il potenziale per potenziare la creatività sul web.

Livello 1 dell'API CSS Properties and Values

Il livello 1 dell'API Proprietà e valori CSS (Houdini Props e Vals) ci consente di dare struttura alle nostre proprietà personalizzate. Questa è la situazione attuale quando si utilizzano le proprietà personalizzate:

.thing {
  --my-color: green;
}

Poiché le proprietà personalizzate non hanno tipi, possono essere sostituite in modi inaspettati. Ad esempio, considera cosa succede se definisci --my-color con un URL.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

Qui, poiché --my-color non è digitato, non sa che un URL non è un valore di colore valido. Quando lo utilizziamo, vengono utilizzati i valori predefiniti (nero per color, trasparente per background). Con Houdini Props e Vals, le proprietà personalizzate possono essere registrate in modo che il browser sappia cosa deve essere.

Ora la proprietà personalizzata --my-color è registrata come colore. In questo modo, il browser sa quali tipi di valori sono consentiti e come può digitare e trattare la proprietà.

Anatomia di una proprietà registrata

La registrazione di una proprietà avviene nel seguente modo:

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

Supporta le seguenti opzioni:

name: string

Il nome della proprietà personalizzata.

syntax: string

Come analizzare la proprietà personalizzata. Puoi trovare un elenco completo dei valori possibili nella specifica Valori e unità CSS. Il valore predefinito è *.

inherits: boolean

Indica se eredita il valore del relativo elemento principale. Il valore predefinito è true.

initialValue: string

Valore iniziale della proprietà personalizzata.

Uno sguardo ravvicinato a syntax. Esistono diverse opzioni valide, che vanno da numeri a colori a tipi di <custom-ident>. Queste sintassi possono essere modificate anche utilizzando i seguenti valori

• L'aggiunta di + indica che accetta un elenco di valori separati da spazi di quella sintassi. Ad esempio, <length>+ sarebbe un elenco di lunghezze separate da spazi
• L'aggiunta di# indica che accetta un elenco separato da virgole di valori di quella sintassi. Ad esempio, <color># sarebbe un elenco di colori separati da virgole
• L'aggiunta di | tra sintassi o identificatori indica che qualsiasi opzione fornita è valida. Ad esempio, <color># | <url> | magic consentirebbe un elenco di colori separati da virgole, un URL o la parola magic.

Problemi

Esistono due problemi con gli oggetti e i valori Houdini. Il primo è che, una volta definita, non è possibile aggiornare una proprietà registrata esistente e il tentativo di registrare nuovamente una proprietà comporterà l'emissione di un messaggio di errore che indica che è già stata definita.

In secondo luogo, a differenza delle proprietà standard, le proprietà registrate non vengono convalidate al momento dell'analisi. ma vengono convalidati quando vengono calcolati. Ciò significa che i valori non validi non verranno visualizzati come non validi durante l'ispezione delle proprietà dell'elemento e che l'inclusione di una proprietà non valida dopo una valida non farà fare ricorso a quella valida; una proprietà non valida, tuttavia, farà ricorso al valore predefinito della proprietà registrata.

Animazione delle proprietà personalizzate

Una proprietà personalizzata registrata offre un bonus divertente oltre al controllo del tipo: la possibilità di animarla. Un esempio di animazione di base è il seguente:

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

Quando passi il mouse sopra il pulsante, questo passa dal rosso al verde. Se non registri la proprietà, il browser passerà da un colore all'altro perché, se non è registrato, non sa cosa aspettarsi tra un valore e l'altro e quindi non può garantire la possibilità di eseguire la transizione. Questo esempio può essere portato un passo avanti, però, per animare i gradienti CSS. Il seguente CSS può essere scritto con la stessa proprietà registrata:

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

In questo modo, verrà animata la proprietà personalizzata che fa parte di linear-gradient, quindi anche il gradiente lineare. Dai un'occhiata a Glitch di seguito per vedere il codice completo in azione e provarlo tu stesso.

Conclusione

Houdini è in arrivo nei browser e, con esso, modi completamente nuovi per lavorare con il CSS e estenderlo. Con l'API Paint già implementata e ora con Prop e Val personalizzati, la nostra cassetta degli attrezzi per le creatività si sta espandendo, il che ci consente di definire proprietà CSS con tipi e di utilizzarle per creare e animare design nuovi ed entusiasmanti. Ci sono altre novità in arrivo anche nella coda dei problemi di Houdini, dove puoi inviare feedback e scoprire cosa c'è di nuovo per Houdini. Houdini è nato per sviluppare funzionalità che spiegano la "magia" dello stile e del layout sul web, quindi inizia subito a usarle.

Foto di Maik Jonietz su Unsplash