CSS Paint API: worklet

La CSS Paint API è una funzionalità di CSS Houdini che consente di scrivere funzioni worklet JavaScript per generare programmaticamente sfondi, bordi e maschere, estendendo di fatto ciò che CSS background-image può visualizzare.

Un Paint Worklet è un file JavaScript che viene eseguito in un ambito worklet separato (non nel thread principale). Registra un painter CSS personalizzato che può essere utilizzato come valore CSS.

Una classe worklet implementa il metodo paint():

Carichi il worklet dal JavaScript principale:

Faccia riferimento al nome del painter registrato in qualsiasi proprietà che accetta un'immagine:

I painter possono leggere le proprietà personalizzate CSS dichiarandole come proprietà di input:

Il parametro ctx è un PaintRenderingContext2D, una versione limitata del contesto Canvas 2D. È possibile utilizzare metodi familiari: fillRect, arc, bezierCurveTo, ecc.

La CSS Paint API consente di creare:

• Sfondi geometrici complessi senza SVG
• Sfondi basati su dati variabili, come barre di avanzamento e grafici delle attività
• Effetti increspatura sui pulsanti basati su proprietà personalizzate
• Effetti complessi per i bordi, come bordi tratteggiati o retinati
• Separatori ondulati e forme organiche

I paint worklet vengono eseguiti al di fuori del thread principale, in un contesto worklet separato, e ridisegnano l'elemento solo quando cambiano le proprietà personalizzate CSS. Questo è più efficiente rispetto al disegno basato su Canvas, che viene eseguito nel thread principale.

La CSS Paint API è supportata da Chrome 65+ ed Edge 79+. Firefox e Safari non la supportano nel 2024. La utilizzi come miglioramento progressivo.

Fornisca sempre un fallback e utilizzi @supports per applicare il paint worklet solo quando è supportato:

Quale metodo implementa una classe CSS Paint Worklet per eseguire il disegno?

La CSS Paint API consente ai worklet JavaScript di generare immagini CSS in modo programmatico. Scriva una classe con un metodo paint(), la registri con registerPaint(), la carichi con CSS.paintWorklet.addModule() e la utilizzi come background: paint(name). I painter possono leggere le proprietà personalizzate CSS per creare elementi visivi basati sui dati. Fornisca fallback con @supports.