Worklet di cross-browser e Houdini.how

Potenzia il tuo CSS con i worklet di vernice Houdini in pochi clic.

Una Kravets

CSS Houdini è un termine generico che descrive una serie di API del browser di basso livello che offrono agli sviluppatori un controllo e una potenza decisamente maggiori gli stili che scrivono.

Houdini abilita una maggiore semantica a CSS con la classe Typed Object Modello. Gli sviluppatori possono definire proprietà personalizzate CSS avanzate con sintassi, valori predefiniti ed ereditarietà tramite API Properties and Values.

Inoltre, introducono colori, layout e animazione worklet, che aprono una un mondo di possibilità, semplificando il coinvolgimento degli autori nel processo di stile e layout del motore di rendering del browser.

Informazioni sui worklet Houdini

I worklet Houdini sono istruzioni del browser che escono dal thread principale e possono essere richiamate quando necessaria. I worklet consentono di scrivere codice CSS modulare per svolgere attività specifiche e richiedono una singola riga di codice JavaScript da importare e registrare. Proprio come i service worker per lo stile CSS, i worklet Houdini sono registrati per la tua applicazione e, una volta registrati, possono essere utilizzati nel tuo CSS per nome.

Scrivi file di worklet Registra modulo di 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 tale (il worklet Pittura) e consente agli sviluppatori di definire funzioni di pittura personalizzate simili a quelle della tela che possono essere utilizzati direttamente in CSS come sfondi, bordi, maschere e altro ancora. C'è un intero mondo di possibilità di utilizzare CSS Paint nelle tue interfacce utente.

Ad esempio, invece di attendere che un browser implementi una funzionalità per i bordi inclinati, puoi scrivere un tuo worklet di colorazione oppure utilizzane uno esistente già pubblicato. Quindi, anziché utilizzare il raggio bordo e applicare 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 meglio supportate, poiché le sue specifiche sono W3C suggerimento del candidato. Al momento è attiva in tutti i browser basati su Chromium, parzialmente è supportata in Safari, viene presa in considerazione 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 funzionano su tutti i browser moderni con CSS Paint Polyfill E per illustrare alcuni aspetti unici implementazioni, 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 Houdini. it ti offre tutto quello che c'è da sapere su CSS Houdini: supporto per il browser, panoramica delle sue varie API, utilizzo informazioni, risorse aggiuntive e worklet Live Paint esempi. Ogni campione su Houdini.how è supportato dall'API CSS Paint, il che significa funzionano su tutti i browser moderni. Provaci!

Utilizzo di Houdini

I worklet Houdini devono essere eseguiti tramite un server localmente o su HTTPS in produzione. Per lavorare con un worklet Houdini, dovrai installarlo localmente o usare un sistema rete (CDN) come unpkg per gestire i file. Dovrai poi registrare in locale.

Ci sono vari modi per includere i worklet Houdini.how nei tuoi progetti web. Possono essere utilizzati tramite una rete CDN come prototipazione oppure puoi gestire i worklet autonomamente utilizzando npm. In ogni caso, ti consigliamo di includere anche il CSS Paint Polyfill per assicurarti compatibile con più browser.

1. Prototipazione con una CDN

Quando ti registri da unpkg, puoi collegarti direttamente al file worklet.js senza doverli creare localmente installare il worklet. Unpkg si risolverà nel file worklet.js come script principale. In alternativa, puoi specificare questo file per te. Unpkg non causa problemi CORS perché viene pubblicato tramite HTTPS.

CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");

Tieni presente che in questo modo non vengono registrate le proprietà personalizzate per i valori di sintassi e di riserva. Invece, ciascuno ha valori di fallback incorporati nel worklet.

Se vuoi, puoi anche registrare le proprietà personalizzate.

<script src="https://unpkg.com/<package-name>/properties.js"></script>

Per includere 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 comporta l'inserimento automatico del worklet di colorazione. Per installare il worklet, devi generare un URL che si risolva nel codice worklet.js del pacchetto e registrarlo. Tu sì quindi con:

CSS.paintWorklet.addModule(..file-path/worklet.js)

Puoi trovare il nome e il link del pacchetto npm nella 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 moderni bundler:

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 Houdini, è il momento di contribuire con i tuoi. Houdini.how non ospita alcun worklet, ma mostra il lavoro della community. Se se vuoi inviare un worklet o una risorsa, consulta la github repository con linee guida per i contributi. Ci piacerebbe sapere cosa pensi.