Migliorare il CSS con i worklet di pittura di Houdini è questione di pochi clic.
CSS Houdini è un termine generico che descrive una serie di API di browser di basso livello che offrono agli sviluppatori molto più controllo e potenza sugli stili che scrivono.
Houdini consente un CSS più semantico con il modello di oggetto con tipi. Gli sviluppatori possono definire proprietà personalizzate CSS avanzate con sintassi, valori predefiniti ed ereditarietà tramite l'API Properties and Values.
Inoltre, introduce i worklet di visualizzazione, layout e animazione, che aprono un mondo di possibilità, permettendo agli autori di agganciarsi più facilmente al processo di stile e layout del motore di rendering del browser.
Informazioni sui worklet di Houdini
I worklet di Houdini sono istruzioni del browser che vengono eseguite nel thread principale e possono essere chiamate quando necessario. I worklet ti consentono di scrivere CSS modulari per svolgere attività specifiche e richiedono una singola riga di JavaScript per l'importazione e la registrazione. Come i worker per lo stile CSS, i worklet di Houdini vengono registrati nella tua applicazione e, una volta registrati, possono essere utilizzati nel CSS per nome.
Scrivi file worklet Registra il modulo worklet (CSS.paintWorklet.addModule(workletURL)) Utilizza il worklet
(background: paint(confetti))
Implementare le tue funzionalità con l'API CSS Painting
L'API CSS Painting è un esempio di questo tipo di worklet (worklet Paint) e consente agli sviluppatori di definire funzioni di pittura personalizzate simili a quelle di Canvas che possono essere utilizzate direttamente in CSS come sfondi, bordi, maschere e altro ancora. Esistono un'infinità di possibili modi per utilizzare CSS Paint nelle tue interfacce utente.
Ad esempio, anziché attendere che un browser implementi una funzionalità di bordi inclinati, puoi scrivere il tuo worklet di Paint o utilizzare un worklet pubblicato esistente. Poi, anziché utilizzare border-radius, applica questo worklet ai bordi e al ritaglio.
.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 le sue specifiche sono consigliate per i candidati W3C. Al momento è attivato in tutti i browser basati su Chromium, supportato parzialmente in Safari ed è in fase di valutazione per Firefox.
Tuttavia, anche senza il supporto completo del browser, puoi comunque creare contenuti con l'API Houdini Paint e vedere i tuoi stili funzionare su tutti i browser moderni con il CSS Paint Polyfill. Per mostrare alcune implementazioni uniche, nonché per fornire una raccolta 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 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 di pittura in tempo reale. Ogni esempio su Houdini.how è supportato dall'API CSS Paint, vale a dire che funzionano su tutti i browser moderni. Prova!
Utilizzo di Houdini
I worklet di Houdini devono essere eseguiti localmente tramite un server o su HTTPS in produzione. Per utilizzare un worklet Houdini, devi installarlo localmente o utilizzare una rete CDN (Content Delivery Network) come unpkg per gestire i file. Dovrai quindi registrare il worklet localmente.
Ci sono vari modi per includere i worklet Houdini.how nei tuoi progetti web. Possono essere utilizzati tramite una CDN per la prototipazione oppure puoi gestire i worklet autonomamente utilizzando i moduli npm. In ogni caso, ti consigliamo di includere anche il CSS Paint Polyfill per assicurarti che sia compatibile con più browser.
1. Prototipazione con una CDN
Quando esegui la registrazione da unpkg, puoi eseguire il collegamento direttamente al file worklet.js senza dover installare il worklet localmente. Unpkg risolverà in worklet.js come script principale oppure puoi specificarlo da solo. Unpkg non causerà problemi CORS, in quanto viene pubblicato tramite HTTPS.
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
Tieni presente che le proprietà personalizzate per la sintassi e i valori di riserva non vengono registrate. Al loro interno, invece, sono incorporati valori di riserva.
Se vuoi, per registrare 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 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 esegue automaticamente l'iniezione del worklet di pittura. Per installare il worklet, devi generare un URL che risolva in worklet.js del pacchetto e registrarlo. Puoi farlo tramite:
CSS.paintWorklet.addModule(..file-path/worklet.js)
Il nome e il link del pacchetto npm sono disponibili in ogni scheda del worklet.
Dovrai anche includere 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 Paint 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 provato alcuni sample di Houdini, tocca a te contribuire con i tuoi. Houdini.how non ospita worklet, ma mette in evidenza il lavoro della community. Se hai un worklet o una risorsa da inviare, consulta il repo GitHub con le linee guida per i contributi. Ci piacerebbe sapere cosa pensi.