【CSS Modules】@namespaceアットルールの使い方

@namespaceインターフェースは、XML名前空間とCSSセレクタの関連付けを定義するためのインターフェースです。このat-ruleは、主にXMLベースの文書、例えばXHTMLやSVG、MathMLなどが混在する環境で、特定の名前空間に属する要素にのみスタイルを適用したい場合に利用されます。

Webページを構成するHTML要素には、通常「名前空間」という概念は直接意識されませんが、XML文書では要素がどの名前空間に属するかによって意味合いが異なることがあります。@namespaceルールを使用すると、特定の名前空間URIに対して独自の接頭辞（プレフィックス）を割り当て、CSSセレクタでその接頭辞を使用することで、スタイルを適用する対象要素を厳密に指定できるようになります。

たとえば、HTML文書内にSVG要素が埋め込まれている場合、@namespace svg "http://www.w3.org/2000/svg";と宣言することで、svg|rect { fill: blue; }のように、SVG名前空間に属するrect要素だけにスタイルを適用し、他の名前空間のrect要素には影響を与えないようにできます。また、@namespace "http://www.w3.org/1999/xhtml";のように接頭辞なしで宣言することで、デフォルトの名前空間を指定することも可能です。

このルールはスタイルシートの他のルールよりも前に記述する必要があり、@charsetルールと@importルールの後に配置されます。現代の一般的なHTML5文書では@namespaceを直接使用する機会は少ないですが、XMLを基盤とした複雑なWebアプリケーションや、特定のフレームワークと連携する場面で、意図しないスタイル衝突を避け、正確なスタイリングを実現するために重要な役割を果たします。

Copy
1@namespace prefix url("http://www.example.com/ns/example");

引数なし

引数はありません

戻り値なし

戻り値はありません