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

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


以下,有益だった情報をまとめる.

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

Demo

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

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

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

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

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

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