CSS Houdiniを試した

CSSの機能に拡張性を提供する”CSS Houdini”が気になっていた．

mozaic.fmというポッドキャストでHoudiniの話を聴いて以来，ずっと気になっていたので自分でも調べてみた．

• ep29 Houdini | mozaic.fm

---

以下，有益だった情報をまとめる．

• https://github.com/w3c/css-houdini-drafts/wiki/ideas
• Houdini: Demystifying CSS | Google Developers
• CSS Paint API | Google Developers
• Working with the new CSS Typed Object Model | Google Developers
• CSS Variables: Why Should You Care? | Google Developers
• CSS Animation Worklet API

現在 (2018年06月19日) はChromeでPaint APIとAnimation Workletの一部を試すことが出来る．各ブラウザの実装状況 (Experimental) は，“Is Houdini Ready Yet?” というサイトで確認できる．

Demo

以下のデモが参考になった．

• GoogleChromeLabs/houdini-samples
• iamvdo/css-houdini.rocks

自分でもHoudiniを試してみた．

See the Pen Star block (CSS Houdini Demo) by Sota Hatakeyama (@chooblarin) on CodePen.

下記のようにブロックを星形にするCSSを作ったりした．

.star {
  --radius: 60;
  --point-num: 5;
  ...
}

全体のソースコードはGitHubにある．W杯頑張れニッポン．