[2017/8/25] Houdini

[kubosho]

5分LT

• The Web Explorer 3 を元にする
• Houdiniの今北産業
  • 「Webプラットフォームのスタイリングとレイアウトの"魔法"を説明する機能を開発する」
  • Polyfillを作りやすくする
  • ブラウザの対応状況は良くない
• 冬コミ以降更新があったAPI
  • Font Metrics API 1以外
• Houdiniのリポジトリ
  • https://github.com/w3c/css-houdini-drafts/
  • https://github.com/WICG/CSS-Parser-API
• Typed OMを見てみよう
  • 仕様書の更新は割とされている
  • https://github.com/w3c/css-houdini-drafts/commits/master/css-typed-om
• Typed OMが必要な理由
  • IDEやエディタでプロパティや値のバリデーションがしやすくなる
  • シンタックスハイライトが付けやすい
  • パフォーマンスがよくなる（型周りの処理をなくすことができるから？）
  • Linterやコンパイラに優しくなる
  • http://slides.com/malyw/houdini-codemotion#/24
• Typed OMはCSS Properies & Values APIと結びついている

[kubosho]

Chrome beta版でも chrome://flags/ で #enable-experimental-web-platform-features を有効にするとPaint WorkletやTyped OMが使えた

[kubosho]

• The Dark Side of Polyfilling CSS — Philip Walton
• Houdini – CSS の秘密を解き明かすもの  |  Web  |  Google Developers
• CSS Houdini- the bridge between CSS, JavaScript and the browser by Serg Hospodarets

[kubosho]

• https://github.com/w3c/css-houdini-drafts/wiki
• https://app.codegrid.net/entry/2017-css-day-3
• https://ishoudinireadyyet.com/

[kubosho]

• CSSNumberValue, CSSLengthValue, CSSAngleValueが無くなっている
• CSSUnparsedValue, CSSNumericValue, CSSUnitValue, CSSMathValueが増えている

[kubosho]

CSSLengthValue, CSSAngleValueはCSSNumericValueに統合された