次世代のCSS

8640 ワード

より多くの拡張可能なウェブでは、CSS縫い目は時々時代遅れです.
Howdini開発者のおかげで、CSSエンジンの部分を公開する低レベルAPIにアクセスすることができます.Houdiniでは、ブラウザのレンダリングエンジンのスタイルとレイアウトプロセスにフックすることが可能です.
簡単な言葉で、CSS Hudiniは、開発者が新しい機能を加えるためにCSS APIで結ぶのを可能にします.
この投稿は簡単な説明ですべてのAPIの短い要約にすぎないことに注意してください.あなたが主題に興味があって、より詳細な情報を望むならば、記事の終わりに記事とリンクをチェックしてください.

フーディーニのAPI

レイアウトAPI

ネイティブレイアウトアルゴリズムにカスタムレイアウトアルゴリズムを追加します.
例:石積みのレイアウト.

.gallery{ display: layout(masonry); }

ペイントAPI

要素の背景、境界線、またはコンテンツに直接描画します.
例:虹の境界線.

.rainbow{ background-image: paint(rainbow); }

パーサAPI

パーサーエンジンにアクセスします.
使用例:

パーサーを文字列で渡し、JSでカスタム構文解析を行う代わりに、動作するオブジェクトを受け取ります.

パーサが完全なポリフィリングについて理解しているものを拡張する.

プロパティと値

ブラウザーがそれが何でなければならないかについてわかっているように、カスタム礼儀を登録してください.
カスタムの所有者には型がありません.

.box{
  --primary-color: 3px;
  color: var(--primary-color); // Wrong!
}

その場合ブラウザはそれを知らない--primary-color は有効な値ではない.フーディーニとの解決策は、礼儀作法を登録することです.

window.CSS.registerProperty({
   name: '--primary-color',
   syntax: '<color>',
   inherits: false,
   initalvalue: 'red'
});

アニマルワークレット

開発者は、デバイスのネイティブフレームレートで実行する命令アニメーションを書き込むことができます.
非常に興味深いのは、アニメーションの時間の代わりに(例えば視差の効果)スクロールするリンクすることができますです
この例では、指定した要素の垂直スクロールボックスを移動します.

new WorkletAnimation(
  "moveVertically",
  new KeyframeEffect(
    document.querySelector("#box"),
    [
      { transform: "translateY(0)" },
      { transform: "translateY(300px)" }
    ],
    { 
      duration: 4000,
      fill: "both"
    }
  ),
  new ScrollTimeline({
    scrollSource: document.querySelector("#container"),
    orientation: "vertical",
    timeRange: 2000
  })
).play();

型付きのOM

CSSの値を文字列ではなくJavaScriptオブジェクトとして公開するCSSSOMのAPI.

CSS固有値に割り当てられた値のパフォーマー操作を許可します.

より保守可能なコードを書きます.

// with CSSOM
element.style.height; // "42", a string :(

// with Typed OM
element.attributeStyleMap.set('height', CSS.px(42));
const height = element.attributeStyleMap.get("height")
console.log(height.value); // 42, a number :D
console.log(height.unit); // "px", a string