CSS - @namespace

トップ > CSSリファレンス > @namespace

概要

ルール名@namespace
構文@namespace [<prefix>] <uri>
サポートhttps://caniuse.com/css-namespaces

説明

ネームスペース(名前空間)を指定します。XHTML 中に SVG や MathML を異なった名前空間で埋め込む際などに使用します。

使用例

最初の形式はデフォルトのネームスペースを指定します。次の形式は名前付きのネームスペースを指定します。

CSS
@namespace url(http://www.w3.org/1999/xhtml);              /* 名前無しのデフォルトの名前空間 */
@namespace svg url(http://www.w3.org/2000/svg);            /* 名前(svg)付きの名前空間 */
@namespace mathml url(http://www.w3.org/1998/Math/MathML); /* 名前(mathml)付きの名前空間 */

@namespace で定義した名前は、次のように使用します。

CSS
svg {
  background-color: #ddd;
}

/* デフォルト名前空間の a 要素に対するスタイル指定 */
a {
  color:red;
}

/* svg名前空間の a 要素に対するスタイル指定 */
svg|a {
  color:blue;
}
HTML
<a href="#">DEFAULT_NAMESPACE_A</a>
<svg>
  <a href="#"><text x="10" y="70" fill="currentColor">SVG_A</text></a>
</svg>

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年9月27日
http://www.tohoho-web.com/css/rule/namespace.htm