Migliorare il CSS con i worklet di pittura 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 oggetti con tipi. Gli sviluppatori possono definire proprietà CSS personalizzate avanzate con sintassi, valori predefiniti e ereditarietà tramite la API Properties and Values.
Inoltre, introduce worklet per la pittura, il layout e l'animazione, che aprono un mondo di possibilità, consentendo agli autori di collegarsi più facilmente alla procedura 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, poiché la sua specifica è un recommendation candidato del 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 raccolta di risorse e worklet 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 di pittura in tempo reale. Ogni esempio su Houdini.how è supportato dall'API CSS Paint, il che significa che funzionano su tutti i browser moderni. Provaci!
Utilizzo di Houdini
I worklet di Houdini devono essere eseguiti localmente tramite un server o su HTTPS in produzione. Per lavorare con un worklet Houdini, devi 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 presentazione di 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.
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 NPM
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 con:
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 vedere cosa creerai.