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

Transizioni e protezione dei dati in CSS

Sam Richard

Proprietà personalizzate CSS, note anche come CSS variabili, di definire le proprietà in CSS e utilizzare i relativi valori in tutte CSS. Sebbene oggi siano estremamente utili, hanno dei limiti che li rendono lavorare con difficoltà: possono avere qualsiasi valore in modo da poter essere se sostituisci con qualcosa di inaspettato, ereditano sempre i propri valori da il genitore e non puoi eseguirne la transizione. Con le proprietà CSS e API Values 1 di livello 1, ora disponibili in Chrome 78, queste carenze vengono superate, rendendo CSS proprietà personalizzate incredibilmente potenti.

Che cos'è Houdini?

Prima di parlare della nuova API, parliamo rapidamente di Houdini. Il CSS-TAG La Houdini Task Force, meglio nota come CSS Houdini o semplicemente Houdini, esiste per "sviluppa funzionalità che spiegano la 'magia' di stile e layout sul web". La raccolta delle specifiche Houdini è progettato per aumentare 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. Consente di digitare i valori CSS in JavaScript e di creare polyfill o di inventare nuovi CSS senza un hit da rendimento sono finalmente possibili. Houdini ha il potenziale per potenziare la creatività sul web.

API Proprietà e valori CSS Livello 1

Il livello API Proprietà e Valori CSS 1 (oggetti Houdini e Vals) ci permette di strutturare le nostre proprietà personalizzate. Questo è lo stato attuale quando utilizzi le proprietà personalizzate:

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

Poiché le proprietà personalizzate non hanno tipi, questi possono essere sostituiti in in molti modi diversi. Ad esempio, pensa a 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 viene digitato, non sa che un URL non è valido valore del colore! Quando lo utilizziamo, torna ai valori predefiniti (nero per color, trasparente per background). Con Houdini Props e Vals, le proprietà personalizzate possono registrare il browser in modo che sappia come deve essere.

Ora la proprietà personalizzata --my-color è registrata come colore. Questo indica browser quali tipi di valori sono consentiti e come può digitarli e trattarli 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

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 una serie di opzioni che vanno dai numeri ai colori <custom-ident>: di testo. 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 separato da spazi di lunghezze
• L'aggiunta # significa che accetta un elenco separato da virgole di valori di quella sintassi. Ad esempio, <color># è un elenco separato da virgole di colori
• L'aggiunta di | tra sintassi o identificatori implica che uno qualsiasi degli elementi forniti sono valide. Ad esempio, <color># | <url> | magic consente un elenco di colori separati da virgole, un URL o la parola magic.

Gotchas

Ci sono due sfide con Houdini Props e Vals. Il primo è che, una volta definita, non è possibile aggiornare una proprietà registrata esistente e provare una nuova proprietà genererà un errore che indica che è già stata definito.

In secondo luogo, a differenza delle proprietà standard, le proprietà registrate non vengono convalidate vengono analizzati. ma vengono convalidati al momento del calcolo. Ciò significa che che i valori non validi non appariranno come non validi durante l'ispezione del proprietà non valide, inclusa una proprietà non valida dopo una proprietà valida, non verranno a quello valido; una proprietà non valida ricadrà invece nell'elenco predefinita della proprietà.

Animazione di proprietà personalizzate

Una proprietà personalizzata registrata offre un bonus divertente che va oltre il controllo del tipo: di animarlo! 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, il colore diventa rosso e verde. Senza registrando la proprietà, passerà da un colore all'altro. Infatti, senza essere registrato, il browser non sa cosa aspettarsi tra e quello successivo, pertanto non possiamo garantire la possibilità di eseguirne la transizione. Questo esempio, tuttavia, può essere ulteriormente migliorato per animare i gradienti CSS. La i seguenti CSS possono essere scritti 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, che anima il nostro gradiente lineare. Dai un'occhiata al Glitch qui sotto per vedere il codice completo in azione e giocarci tu.

Conclusione

Houdini è in arrivo nei browser e, con esso, nuovi modi di lavorare con i CSS ed estenderli. Con la scritta Paint API già spedita e ora Props e Vals personalizzati, il nostro toolbox per le creatività si sta espandendo, consentendoci definisci le proprietà CSS digitate e utilizzale per creare e animare nuove ed entusiasmanti proprietà CSS design. Ci sono altri sviluppi in arrivo nella questione Houdini in cui puoi dare feedback e scoprire le prossime novità di Houdini. Houdini esiste per sviluppare caratteristiche che spiegano la "magia" di stile e layout sul web, quindi farne buon uso.

Foto di Mario Rossi attivo Rimuovi schermo