ep29 Houdini

published_at: 2017-11-02
guest: @kojiishi
toc: headings

Theme
Show Note

Theme

第 29 回のテーマは Houdini です。

今回は、ゲストとして Chrome チームの開発者であり、 CSS の標準化にも関わられている @kojiishi さんをお呼びし、 Houdini がどういうモチベーションで始まり、現在仕様策定や実装状況はどうなっているのか。

実装する上での問題点や、今後の展望をお聞きし、今後 Houdini が CSS に対してどういった影響を及ぼしていくかを踏まえ、「今何がおこっているのか」と「これからどうなっていくのか」について議論しました。

Show Note

Koji さんのドラフト
CSS-TAG Houdini Editor Drafts (github)
- Worklets Level 1
  - JS のメインスレッドとは別に実行される環境
  - ハイレベル API で使用される定義される
  - WebWorker とは違う。イベントベースですらない
  - Class で適宜したハンドラを渡すと内部で実行される
- CSS Properties and Values API Level 1
  - name, syntax, inherits, init を指定して任意のプロパティを registerProperty する
- CSS Typed OM Level 1
  - attributeStyleMap 経由で型と値を操作
  - CSSXXXValue などで値を計算
- Box Tree API Level 1
  - 行の折り返しなどで生成される Fragment にアクセスできる API
  - まだ中身があまりない
- CSS Parser API
  - CSS パーサを export し CSS を解析した中間表現にアクセスできるように
  - まだ中身がほぼない
  - use case: https://github.com/WICG/CSS-Parser-API
- CSS Painting API Level 1
  - ペイント領域に対して Canvas API サブセットで好きなように描画できる
- CSS Layout API Level 1
  - Style Tree で生成された Fragment をどう配置するかを決める
  - OutPut として Box Tree を提供し、それをブラウザがペイントする
  - Flexbox や Grid みたいなものを自分で定義できる
- Font Metrics API Level 1
  - baseline などレイアウトに必要なメトリクス情報を取得する
Paint API で StokeText できないと困る話
- why no fillText/strokeText ? Issue #478
Minutes Paris F2F 2017-08-01
レシピの中括弧
- https://wiki.csswg.org/planning/tokyo-2017#afternoon1
- CSS Paint API での実装例
TPAC 2017
- TPAC 2017
- TPAC F2F November 2017
各ベンダの最近の CSS エンジン改善
- FF: Quantum - MozillaWiki
- Edge: Making the web smoother with independent rendering - Microsoft Edge Dev Blog
- Chrome: LayoutNG, Sliming Paint V2
see also