@namespace
@namespace はアットルールで、 CSS スタイルシート で使用する XML 名前空間を定義します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| DOM API | ||||||
| CSSNamespaceRule インターフェイスは単一の CSS アットルールを記述します。 | 47 | 12 | 53 | 10.1 | 47 | 10.3 |
| namespaceURI は CSSNamespaceRule の読み取り専用プロパティで、この名前空間の URI のテキストを文字列で返します。 | 47 | 12 | 59 | 10.1 | 47 | 10.3 |
| prefix は CSSNamespaceRule の読み取り専用プロパティで、この名前空間に関連付けられた名前を文字列で返します。そのような接頭辞がない場合は、空文字列を返します。 | 47 | 12 | 59 | 10.1 | 47 | 10.3 |
| その他 | ||||||
| @namespace はアットルールで、 CSS スタイルシート で使用する XML 名前空間を定義します。 | 1 | 12 | 1 | 3 | 18 | 1 |
基本構文
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ルールの前に記述する必要があります。
アクセシビリティ
- 名前空間の設定自体はアクセシビリティに影響しませんが、スタイリング対象が正しく選択されていることを確認してください。