@tyankatsu0105/css-houdini

CSS Houdini

Usage

npm install @tyankatsu0105/css-houdini

Dev

npm run website

http://localhost:8080/

Edit src

Memo

• CSS Houdiniとは、ピクセルパイプラインの各ステップにhookしてCSSの拡張を可能にするAPI郡のこと
  • CSSOMにアクセスできるAPIは、どれもレンダリングが終わったあとの操作
  • しかし、Houdiniでレンダリングまで待たずに各プロセスにフックとして機能を登録して、CSSの拡張ができる
• PaintWorklet.registerPaint()で処理を書いた class を登録して、CSS.PaintWorklet.addModule()で PaintWorklet に登録した class を追加して使えるようにするっぽい
  • registerPaintに渡す引数は、(name, paintCtrl)らしい https://drafts.css-houdini.org/css-paint-api-1/
• paintWorklet.addModuleでnameの指定ができないので、インストールしたモジュール間で命名のバッティングが起こりそう
  • registerPaintの第一引数の名称
  • registerPropertyで登録したCSS変数の名称

Links

• (6) Extending CSS with Houdini - YouTube
• CSS Houdini | MDN
• CSS.paintWorklet (静的プロパティ) - Web API | MDN
• una/extra.css: A CSS Houdini Paint library for those who want to make their sites a little extra 💁🏻‍♀️
• CSS.registerProperty() - Web API | MDN
• Houdini – CSS の秘密を解き明かすもの  |  Web  |  Google Developers
• Exploring the CSS Paint API | Bobrov Dev
• CSS Houdini: Properties, Values, and the Paint API | Aysha Anggraini

LICENSE

MIT