CSSにおける@namespace：XML名前空間を操るための強力なツール

CSSにおける@namespaceアットルールは、XMLドキュメントに複数の名前空間が混在する場合に、要素とスタイルシートを関連付けるために使用されます。これは、主にSVG（Scalable Vector Graphics）のようなXMLベースのマークアップ言語をHTMLページに埋め込む場合に役立ちます。

仕組み

@namespaceルールは、プレフィックスとURIを指定することで、CSSスタイルシートがどのXML名前空間に属する要素を対象とするかを定義します。例えば、以下のように記述します。

@namespace svg http://www.w3.org/2000/svg;

上記の例では、svgというプレフィックスがhttp://www.w3.org/2000/svgというURIに関連付けられます。つまり、svgプレフィックスが付いたCSSセレクターは、http://www.w3.org/2000/svg名前空間に属する要素のみを対象とします。

例

SVG要素をスタイルするには、以下のようにsvgプレフィックスを使用します。

svg.circle {
  fill: red;
  stroke: blue;
}

このCSSルールは、http://www.w3.org/2000/svg名前空間に属する<circle>要素に対してのみ適用されます。

利点

@namespaceを使用する利点は次のとおりです。

再利用性の向上: 名前空間付きのCSSルールは、異なるドキュメント間で再利用しやすくなります。
カプセル化の向上: スタイルシートを特定の名前空間に関連付けることで、スタイルシートの意図が明確になり、メンテナンスが容易になります。
名前空間の衝突を回避: 異なるXML名前空間の要素が同じ名前を持つ場合でも、@namespaceを使用して区別することができます。

注意点

@namespaceを使用する際には、以下の点に注意する必要があります。

属性セレクター: 属性セレクターでは、名前空間プレフィックスを使用する必要はありません。
既定の名前空間: スタイルシート内で最初に@namespaceルールを宣言した場合、そのプレフィックスが既定の名前空間となります。
プレフィックスの一貫性: 同じ名前空間に属する要素に対しては、常に同じプレフィックスを使用する必要があります。

@namespaceは、SVG以外にも、MathMLなどの他のXMLベースのマークアップ言語で使用することができます。

例1：SVG要素をスタイルする

この例では、SVG要素をスタイルするために@namespaceを使用します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SVG Example</title>
  <style>
    @namespace svg http://www.w3.org/2000/svg;

    svg.circle {
      fill: red;
      stroke: blue;
    }
  </style>
</head>
<body>
  <svg width="200" height="100">
    <circle cx="50" cy="50" r="40" />
  </svg>
</body>
</html>

このコードは以下の結果を出力します。

例2：異なる名前空間の要素をスタイルする

この例では、異なる名前空間の要素をスタイルするために@namespaceを使用します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Multiple Namespaces Example</title>
  <style>
    @namespace svg http://www.w3.org/2000/svg;
    @namespace math http://www.w3.org/1998/Math/MathML;

    svg.circle {
      fill: red;
      stroke: blue;
    }

    math.mrow {
      font-size: 20px;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <svg width="200" height="100">
    <circle cx="50" cy="50" r="40" />
  </svg>

  <math>
    <mrow>
      <mi>x</mi>
      <mo>+</mo>
      <mi>y</mi>
      <mo>=</mo>
      <mn>10</mn>
    </mrow>
  </math>
</body>
</html>

例3：既定の名前空間を使用する

この例では、スタイルシート内で最初に宣言された@namespaceルールが既定の名前空間となることを示します。

@namespace math http://www.w3.org/1998/Math/MathML;

@namespace svg http://www.w3.org/2000/svg;

math.mrow {
  font-size: 20px;
  text-decoration: underline;
}

svg.circle {
  fill: red;
  stroke: blue;
}

このコードは、例2と同様にレンダリングされます。これは、最初の@namespace宣言（math名前空間）が既定の名前空間となり、2番目の宣言（svg名前空間）はプレフィックスのみを定義するためです。

代替方法

@namespaceの代替方法として、以下の2つの方法が考えられます。

Shadow DOM

Shadow DOMは、Webコンポーネントと呼ばれるカプセル化されたHTML要素を作成するための技術です。Shadow DOMを使用すると、各コンポーネントは独自の名前空間を持ち、グローバルな名前空間と干渉することなくスタイルを定義することができます。

Shadow DOMを使用する利点は次のとおりです。

保守性: Shadow DOMコンポーネントは、自己完結型であるため、保守が容易です。
再利用性: Shadow DOMコンポーネントは、異なるドキュメント間で再利用することができます。
カプセル化: 各コンポーネントは独自の名前空間を持つため、スタイルが他のコンポーネントに干渉する心配がありません。

Shadow DOMを使用する例を以下に示します。

<my-element>
  <template>
    <div>
      <h1>My Element</h1>
      <p>This is some content.</p>
    </div>
  </template>

  <style>
    /* Local styles for the my-element component */
    h1 {
      color: red;
    }

    p {
      font-size: 16px;
    }
  </style>
</my-element>

この例では、my-elementという名前のWebコンポーネントが定義されています。このコンポーネントには、独自のテンプレートとスタイルシートが含まれています。スタイルシートは、my-elementコンポーネント内の子要素のみを対象とし、グローバルな名前空間と干渉しません。

CSS モジュール

CSSモジュールは、CSSファイルを論理的に分割し、名前空間を使用してスコープを制御するための方法です。CSSモジュールを使用すると、各モジュールは独自の名前空間を持ち、グローバルな名前空間と干渉することなくスタイルを定義することができます。

CSSモジュールを使用する利点は次のとおりです。

名前空間の衝突の回避: CSSモジュールは、名前空間を使用してスコープを制御することで、名前空間の衝突を回避することができます。
再利用性: CSSモジュールは、異なるドキュメント間で再利用することができます。
モジュラリティ: CSSファイルを論理的に分割することで、コードの保守性が向上します。

CSSモジュールを使用する例を以下に示します。

/* my-module.css */
.my-class {
  color: red;
}

/* main.css */
@import 'my-module.css';

.global-class {
  font-size: 16px;
}

この例では、my-module.cssというCSSモジュールが定義されています。このモジュールには、.my-classというセレクターが含まれています。main.cssファイルでは、@importディレクティブを使用してmy-module.cssモジュールをインポートします。main.cssファイルには、.global-classというグローバルなセレクターも含まれています。

my-module.cssモジュール内の.my-classセレクターは、my-module.cssモジュール内の子要素のみを対象とし、グローバルな名前空間と干渉しません。一方、main.cssファイル内の.global-classセレクターは、グローバルな名前空間に属するため、ドキュメント内のすべての要素を対象とします。

@namespaceはCSS3で廃止予定であり、将来的には使用できなくなる可能性があります。@namespaceの代替方法としては、Shadow DOMとCSSモジュールの2つが考えられます。

Shadow DOMは、カプセル化、再利用性、保守性の高いコンポーネントを作成するのに適しています。一方、CSSモジュールは、CSSファイルを論理的に分割し、名前空間を使用してスコープを制御するのに適しています。