Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

概要

CSSセレクターで異なる文書型(HTMLとSVGなど)の同名要素を区別するための名前空間を定義します。例えば、HTMLの<a>要素とSVGの<a>要素を異なるスタイルで装飾できます。SVGを含むHTML文書や、XMLベースの文書でのスタイリングに使用されます。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

CSS
@namespace svg url(http://www.w3.org/2000/svg);
@namespace url(http://www.w3.org/1999/xhtml);
svg|a {
  fill: blue;
}

実務での使いどころ

  • HTMLとSVGの要素を区別したスタイリング

    HTMLのリンクとSVG内のリンク要素を@namespaceで区別し、それぞれに適切なスタイルを適用します。

注意点

  • @namespaceは@importの後、他のすべてのCSSルールの前に記述する必要があります。

アクセシビリティ

  • 名前空間の設定自体はアクセシビリティに影響しませんが、スタイリング対象が正しく選択されていることを確認してください。