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

Transizioni e protezione dei dati in CSS

Sam Richard

Le proprietà personalizzate CSS, note anche come variabili CSS, ti permettono di definire le tue proprietà in CSS e di utilizzare i relativi valori in 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. Grazie al livello 1 dell'API CSS Proprietà e Valori di Houdini, ora disponibile in Chrome 78, questi limiti vengono superati e le proprietà CSS personalizzate sono 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.

API Proprietà e valori CSS Livello 1

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 utilizzi le proprietà personalizzate:

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

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

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

In questo caso, poiché --my-color non viene digitato, non sa che un URL non è un valore 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à.

Struttura di una proprietà registrata

La registrazione di una proprietà ha il seguente aspetto:

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 dell'elemento padre. Il valore predefinito è true.

initialValue: string

Valore iniziale della proprietà personalizzata.

Uno sguardo più approfondito 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 viene accettato un elenco di valori con quella sintassi separati da spazi. 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 al momento del calcolo. 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 in Houdini. Houdini esiste 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