Bastano pochi clic per potenziare il tuo CSS con i worklet del disegno Houdini.
CSS Houdini è un termine generale che descrive una serie di API browser di basso livello che offrono agli sviluppatori un controllo e una potenza molto maggiori sugli stili che scrivono.
Houdini attiva CSS più semantici con il modello di oggetti typed. Gli sviluppatori possono definire le proprietà personalizzate CSS avanzate con sintassi, valori predefiniti ed ereditarietà tramite l'API Proprietà e Values.
Inoltre, introduce anche worklet per paint, layout e animazione, che aprono un mondo di possibilità, consentendo agli autori di collegarsi più facilmente al processo di stile e layout del motore di rendering del browser.
Informazioni sui worklet Houdini
I worklet di Houdini sono istruzioni del browser che vengono eseguite dal thread principale e possono essere richiamate quando necessario. I worklet ti consentono di scrivere codice CSS modulare per svolgere attività specifiche e richiedono una singola riga di JavaScript per essere importati e registrati. Proprio come i service worker per lo stile CSS, i worklet Houdini sono registrati nella tua applicazione e, una volta registrati, possono essere utilizzati nel tuo CSS per nome.
Scrivi file worklet Registra modulo worklet (CSS.paintWorklet.addModule(workletURL)) Utilizza worklet
(background: paint(confetti))
Implementazione delle tue funzionalità con l'API CSS Painting
L'API CSS Painting è un esempio di questo worklet (il worklet di Paint) e consente agli sviluppatori di definire funzioni di disegno personalizzate simili a canvas che possono essere utilizzate direttamente in CSS come sfondi, bordi, maschere e altro ancora. Ci sono tantissime possibilità di utilizzare CSS Paint nelle tue interfacce utente.
Ad esempio, anziché attendere che un browser implementi una funzionalità dei bordi inclinati, puoi scrivere il tuo worklet di Paint o utilizzare un worklet pubblicato esistente. Poi, invece di usare il raggio del bordo, applica questo worklet a bordi e clip.
.angled {
--corner-radius: 15 0 0 0;
--paint-color: #6200ee;
--stroke-weight: 0;
/* Mask every angled button with fill mode */
-webkit-mask: paint(angled-corners, filled);
}
.outline {
--stroke-weight: 1;
/* Paint outline */
border-image: paint(angled-corners, outlined) 0 fill !important;
}
L'API CSS Painting è attualmente una delle API Houdini più supportate e la sua specifica è un candidato W3C. Al momento è attiva in tutti i browser basati su Chromium, è parzialmente supportata in Safari ed è in fase di valutazione per Firefox.
Ma anche senza il supporto completo del browser, puoi dare sfogo alla tua creatività con l'API Houdini Paint e vedere i tuoi stili funzionare in tutti i browser moderni con CSS Paint Polyfill. Per mostrare alcune implementazioni uniche, oltre a fornire una libreria di risorse e worklet, il mio team ha creato houdini.how.
Houdini.how
Houdini.how è una libreria e un riferimento per i worklet e le risorse di Houdini. Fornisce tutto ciò che devi sapere su CSS Houdini: supporto del browser, panoramica delle varie API, informazioni sull'utilizzo , risorse aggiuntive ed esempi di worklet live paint. Ogni campione di Houdini.how è supportato dall'API CSS Paint, il che significa che ognuno funziona su tutti i browser moderni. Provaci!
Uso di Houdini
I worklet Houdini devono essere eseguiti tramite un server localmente o su HTTPS in produzione. Per utilizzare un worklet Houdini, dovrai installarlo localmente o utilizzare una rete CDN (Content Delivery Network) come unpkg per pubblicare i file. Dovrai quindi registrare il worklet localmente.
Esistono diversi modi per includere i worklet di Houdini.how nei tuoi progetti web. Possono essere utilizzati tramite una rete CDN in modalità di prototipazione oppure puoi gestire autonomamente i worklet utilizzando i moduli NPM. In ogni caso, ti consigliamo di includere anche i CSS Paint Polyfill per assicurarti che siano compatibili con più browser.
1. Prototipazione con una CDN
Quando esegui la registrazione da unpkg, puoi collegarti direttamente al file worklet.js senza dover installare il worklet localmente. Unpkg si risolverà in worklet.js come script principale oppure puoi specificarlo manualmente. Unpkg non causerà problemi a CORS, poiché viene pubblicato tramite HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Tieni presente che non vengono registrate le proprietà personalizzate per la sintassi e i valori di riserva. Ognuno di essi ha invece valori di riserva incorporati nel worklet.
Per registrare facoltativamente le proprietà personalizzate, includi anche il file Properties.js.
<script src="https://unpkg.com/<package-name>/properties.js"></script>
Per includere il CSS Paint Polyfill con unpkg:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. Gestione dei worklet tramite la Gestione dei partner di rete
Installa il worklet da npm:
npm install <package-name>
npm install css-paint-polyfill
L'importazione di questo pacchetto non comporta l'inserimento automatico del worklet di paint. Per installare il worklet, devi generare un URL che si risolve nel codice worklet.js del pacchetto e registrarlo. Puoi farlo con:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Il nome e il link del pacchetto npm sono disponibili sulla scheda di ogni worklet.
Dovrai anche includere il CSS Paint Polyfill tramite script o importarlo direttamente, come faresti con un framework o un bundler.
Ecco un esempio di come utilizzare Houdini con il polyfill di vernice nei bundler moderni:
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';
CSS.paintWorklet.addModule(workletURL);
Contribuisci
Ora che hai imparato a usare alcune tracce di Houdini, tocca a te contribuire. Houdini.how non ospita alcun worklet, ma presenta il lavoro della community. Se hai un worklet o una risorsa che vuoi inviare, consulta il repository github con le linee guida per i contributi. Ci piacerebbe conoscere la tua opinione.