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 consentono di definire le tue proprietà in CSS e di utilizzare i relativi valori in tutto il CSS. Sebbene siano incredibilmente utili oggi, presentano dei difetti che possono renderle difficili da utilizzare: possono assumere qualsiasi valore, quindi possono essere sovrascritte accidentalmente con qualcosa di imprevisto, ereditano sempre i valori dal relativo elemento principale e non è possibile eseguirne la transizione. Con l'API CSS Properties and Values Level 1 di Houdini, ora disponibile in Chrome 78, queste carenze vengono superate, rendendo le proprietà personalizzate CSS incredibilmente potenti.

Che cos'è Houdini?

Prima di parlare della nuova API, parliamo brevemente di Houdini. La task force CSS-TAG Houdini, meglio nota 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 una comprensione più approfondita dei nostri stili e la possibilità di estendere il nostro motore di rendering. In questo modo, è finalmente possibile digitare i valori CSS in JavaScript e applicare il polyfill o inventare nuovi CSS senza compromettere le prestazioni. Houdini ha il potenziale per potenziare la creatività sul web.

CSS Properties and Values API Level 1

L'API CSS Properties and Values Level 1 (Houdini Props and 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 imprevisti. Ad esempio, considera 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 è tipizzato, non sa che un URL non è un valore di colore valido. Quando lo utilizziamo, vengono ripristinati i valori predefiniti (nero per color, trasparente per background). Con Houdini Props and Vals, le proprietà personalizzate possono essere registrate in modo che il browser sappia cosa dovrebbe 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

Ecco un esempio di registrazione di una proprietà:

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 CSS Values and Units. Il valore predefinito è *.

inherits: boolean

Se eredita il valore della risorsa padre. Il valore predefinito è true.

initialValue: string

Valore iniziale della proprietà personalizzata.

Un'occhiata più da vicino a syntax. Esistono diverse opzioni valide, che vanno dai numeri ai colori ai tipi <custom-ident>. Queste sintassi possono anche essere modificate 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 separato da virgole di colori
• L'aggiunta di | tra sintassi o identificatori indica che una qualsiasi delle opzioni fornite è valida. Ad esempio, <color># | <url> | magic consentirebbe un elenco di colori separati da virgole, un URL o la parola magic.

Gotchas

Ci sono due problemi con Houdini Props and Vals. La prima è che, una volta definita, non è possibile aggiornare una proprietà registrata esistente e il tentativo di registrare nuovamente una proprietà genererà un errore che indica che è già stata definita.

In secondo luogo, a differenza delle proprietà standard, le proprietà registrate non vengono convalidate quando vengono analizzate. Vengono invece convalidate quando vengono calcolate. Ciò significa che i valori non validi non verranno visualizzati come non validi durante l'ispezione delle proprietà dell'elemento e l'inclusione di una proprietà non valida dopo una valida non verrà sostituita con quella valida; tuttavia, una proprietà non valida verrà sostituita con il 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. Ecco un esempio di animazione di base:

<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 cambierà colore da rosso a verde. Senza registrare la proprietà, passerà da un colore all'altro perché, senza registrazione, il browser non sa cosa aspettarsi tra un valore e l'altro e pertanto non può garantire la possibilità di eseguire la transizione. Questo esempio può essere ulteriormente sviluppato 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, la proprietà personalizzata che fa parte di linear-gradient verrà animata, così come la sfumatura lineare. Dai un'occhiata al Codepen di seguito per vedere il codice completo in azione e sperimentare in autonomia.

Conclusione

Houdini sta per arrivare sui browser e, con lui, modi completamente nuovi di lavorare con il CSS ed estenderlo. Con l'API Paint già disponibile e ora con le proprietà e i valori personalizzati, il nostro toolbox creativo si sta espandendo, consentendoci di definire proprietà CSS tipizzate e utilizzarle per creare e animare design nuovi ed entusiasmanti. Ci sono anche altre novità in arrivo nella coda dei problemi di Houdini, dove puoi fornire feedback e vedere cosa riserva il futuro per Houdini. Houdini esiste per sviluppare funzionalità che spiegano la "magia" dello stile e del layout sul web, quindi non esitare a sfruttare queste funzionalità magiche.