作成可能なスタイルシート

シームレスに再利用可能なスタイル

Jason Miller

構築可能なスタイルシートは、 再利用可能なスタイルを作成して配布する方法。 DOM です。

対応ブラウザ

  • Chrome: 73。
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 101。 <ph type="x-smartling-placeholder">
  • Safari: 16.4。 <ph type="x-smartling-placeholder">

ソース

JavaScript を使用してスタイルシートを作成することはこれまでも可能でした。ただし、これまでのプロセスでは、document.createElement('style') を使用して <style> 要素を作成し、そのシート プロパティにアクセスして、基盤となる CSSStyleSheet インスタンスへの参照を取得していました。この方法では、CSS コードが重複してコードが大きくなり、 ファイルを添付すると、スタイルのないコンテンツが大量に発生し、 できます。CSSStyleSheet インターフェースは、CSSOM と呼ばれる CSS 表現インターフェースのコレクションのルートです。スタイルシートをプログラムで操作できるだけでなく、従来の方法に関連する問題を解消できます。

CSS の準備と適用を示す図。

構築可能なスタイルシートで、共有 CSS の定義と準備を可能にする そのスタイルを複数の Shadow Roots または Documentation に適用できます 簡単に、重複なく作成できます。共有された CSSStyleSheet に対する更新が すべての根本にそれを採用し、 スタイルシート シートが読み込まれると高速かつ同期されます。

構築可能なスタイルシートによって確立される関連付けは、 数多くあります。多くのコンポーネントで使用される一元化されたテーマを提供するために使用できます。テーマはコンポーネントに渡される CSSStyleSheet インスタンスにすることができ、テーマの更新はコンポーネントに自動的に伝播されます。これは、CSS カスタム プロパティ値を 特定の DOM サブツリーを cascade。ブラウザの CSS パーサーへの直接インターフェースとして使用することもできます。これにより、スタイルシートを DOM に挿入せずに簡単にプリロードできます。

スタイルシートを作成する

これを実現するために新しい API を導入するのではなく、Constructable StyleSheets 仕様では、CSSStyleSheet() コンストラクタを呼び出してスタイルシートを命令的に作成できます。生成される CSSStyleSheet オブジェクトには、 新しいメソッドを導入し、コードを一切書かずにスタイルシート ルールの追加と更新を Flash of Unstyled が Content（FOUC）。 「 replace() および replaceSync() メソッドでスタイルシートを CSS の文字列に置き換え、replace() Promise を返します。どちらの場合も、外部スタイルシート参照は サポートされている場合、@import ルールは無視され、警告が生成されます。

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

作成されたスタイルシートを使用する

Constructable StyleSheets で導入された 2 つ目の新機能は、 adoptedStyleSheets プロパティを ルート およびドキュメント。この CSSStyleSheet で定義されたスタイルを特定の DOM に明示的に適用できる サブツリーです。そのためには、その要素に適用する 1 つ以上のスタイルシートの配列をプロパティに設定します。

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');

// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);
<ph type="x-smartling-placeholder">

すべてを組み合わせる

Constructable StyleSheets を使用して、ウェブ デベロッパーは CSS StyleSheet を作成して DOM ツリーに適用する方法を紹介します。ブラウザの組み込みパーサーと読み込みセマンティクスを使用して、CSS ソースの文字列から StyleSheet を読み込むための新しい Promise ベースの API が導入されました。最後に、 スタイルシートのすべての使用にスタイルシートの更新を適用するメカニズム テーマの変更や色の設定などをシンプルにします

デモを見る

今後に向けて

コンストラクタブル スタイルシートの初期バージョンは、ここで説明する API とともにリリースされましたが、使いやすくするための作業が進行中です。また、 拡張するプロポーザル 挿入と挿入のための専用メソッドを備えた adoptedStyleSheets FrozenArray スタイルシートを削除します。これにより、配列のクローン作成が不要になり、 重複する可能性のあるスタイルシートを参照します。

詳細