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, consentono di definire le tue proprietà in CSS e di utilizzarne i valori in tutto il CSS. Sebbene siano incredibilmente utili al giorno d'oggi, hanno delle carenze che possono complicare il lavoro: possono avere qualsiasi valore così che possano essere accidentalmente sostituite da qualcosa di inaspettato, ereditano sempre i loro valori dai genitori e non puoi trasferirli da parte loro. Con il livello 1 dell'API CSS Properties and Values di Houdini, ora disponibile in Chrome 78, queste carenze vengono superate e le proprietà CSS personalizzate sono incredibilmente potenti.

Che cos'è Houdini?

Prima di parlare della nuova API, parliamo rapidamente di Houdini. La CSS-TAG Houdini Task Force, meglio nota come CSS Houdini o semplicemente Houdini, ha lo scopo di "sviluppare funzionalità che spiegano la "magia" dello stile e del layout sul web". La raccolta di specifiche Houdini è progettata per sfruttare le potenzialità del motore di rendering del browser, offrendo informazioni più approfondite sui nostri stili e la possibilità di estenderne l'utilizzo. In questo modo è possibile digitare valori CSS in JavaScript, eseguire il polyfill o creare un nuovo CSS senza hit di rendimento. Houdini ha tutte le carte in regola per potenziare la creatività sul web.

API Proprietà e valori CSS Livello 1

Il livello 1 dell'API CSS Properties and Values (Houdini Props e Vals) ci consente di strutturare le nostre proprietà personalizzate. Questa è la situazione attuale quando si utilizzano le proprietà personalizzate:

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

Poiché le proprietà personalizzate non hanno tipi, è possibile eseguirne l'override 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);
}

Qui, poiché --my-color non è stato digitato, non sa che un URL non è un valore colore valido. Quando vengono utilizzati, vengono ripristinati i valori predefiniti (nero per color, trasparente per background). Con Houdini Props e Vals, è possibile registrare le proprietà personalizzate per consentire al browser di sapere come deve essere.

Ora la proprietà personalizzata --my-color è registrata come colore. Questo indica al browser 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 possibili valori nella specifica Valori e unità CSS. Il valore predefinito è *.

inherits: boolean

Se eredita il valore dell'elemento 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 e ai tipi di <custom-ident>. Queste sintassi possono essere modificate anche utilizzando i valori seguenti

• L'aggiunta di + indica che accetta un elenco di valori separati da spazi con questa sintassi. Ad esempio, <length>+ sarebbe un elenco di lunghezze separate da spazi
• L'aggiunta di # indica che la sintassi accetta un elenco di valori separati da virgole della sintassi. Ad esempio, <color># sarebbe un elenco di colori separati da virgole
• L'aggiunta di | tra sintassi o identificatori indica che le opzioni fornite sono valide. Ad esempio, <color># | <url> | magic consente un elenco di colori separati da virgole, un URL o la parola magic.

Ottieni

Ci sono due modi per vincere: Houdini Props e Vals. Il primo è che, una volta definito, 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. ma vengono convalidati al momento del calcolo. Ciò significa che i valori non validi non appariranno come non validi durante l'ispezione delle proprietà dell'elemento e l'inclusione di una proprietà non valida dopo una valida non potrà tornare a quella valida. Tuttavia, una proprietà non valida ricorrerà 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 ha il seguente aspetto:

<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, l'animazione passa dal rosso al verde. Se non registri la proprietà, passerà da un colore all'altro perché, senza essere registrato, il browser non sa cosa aspettarsi tra un valore e l'altro e pertanto non può garantire la possibilità di eseguirne la transizione. Questo esempio può essere però fatto ulteriormente 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;
}

Verrà animata la nostra proprietà personalizzata che fa parte di linear-gradient, dando vita così al nostro gradiente lineare. Dai un'occhiata al Glitch qui sotto per vedere come funziona il codice completo e provarlo tu stesso.

Conclusione

Houdini è sulla strada giusta per i browser e, con questo, ha nuovi modi di lavorare con CSS ed estenderlo. Con l'API Paint già spedita e ora con oggetti personalizzati e Vals, la nostra gamma di strumenti creativi si sta espandendo, permettendoci di definire le proprietà CSS digitate e utilizzarle per creare e animare nuovi ed entusiasmanti design. E c'è anche altro in arrivo nella coda dei problemi Houdini, dove puoi inviare feedback e scoprire i passaggi successivi per Houdini. Houdini ha lo scopo di sviluppare funzionalità che spieghino la "magia" dello stile e del layout sul web, quindi mettiti in mostra e sfrutta queste funzionalità magiche.

Foto di Maik Jonietz su Unsplash