`style` 要素の `scoped` 属性は HTML5 でもまだ関連していますか?

HTML5 のスタイル要素のスコープ付き属性の現在の状態は何ですか?

背景

HTML5 は当初、スタイルのスコープ付き属性を提案しました要素の親要素とその子孫へのスタイルの適用を制限することを目的としています。ただし、ブラウザの実装が制限されていたため、この機能は最終的に削除されました。

現在のステータス (2023)

現在、scoped 属性のないスタイル要素は、ドキュメント内のどこにでも合法的に表示できます。ただし、仕様では、他のドキュメント要素の意図しないスタイル変更の可能性について警告しています。

スコープ付きスタイルのソリューション

スコープ付き属性のサポートがないにもかかわらず、スコープ付きスタイルは、次のような明示的なセレクターを利用することで実現できます。 ID セレクターとして。以下に例を示します。

<code class="html"><div id="myDiv">
  <style>
    #myDiv p { margin: 1em 0; }
    #myDiv em { color: #900; }
    #myDiv whatever { /* ... */ }
  </style>
  <p>Some content here... </p>
</div></code>

このアプローチでは、スタイルが指定された div 要素内にのみ適用されることが保証されます。 ID の衝突を避ける必要がありますが、それはすでにベスト プラクティスです。

将来の見通し

現時点では、HTML にスコープ付き属性が再導入される兆候はありません。スコープ指定されたスタイルを実現するには、明示的なセレクターのアプローチが引き続き推奨される手法です。

以上が`style` 要素の `scoped` 属性は HTML5 でもまだ関連していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。