Recommendation · css-namespaces

CSS Namespaces

1 at-rule defined by this specification, all known to at least one browser .

Read the Editor's Draft ↗ W3C Recommendation ↗

The feature in detail

`@namespace`

At-rule Baseline: widely availablesince January 2018

Spec The @namespace at-rule declares a namespace prefix and associates it with a given namespace name (a string). This namespace prefix can then be used in namespace-qualified names such as the CSS qualified names defined below.

MDN @namespace is an at-rule that defines XML namespaces to be used in a CSS style sheet.

Live preview Example from MDN

@namespace svg url("http://www.w3.org/2000/svg");

a {
  color: orangered;
  text-decoration: underline dashed;
  font-weight: bold;
}

svg|a {
  fill: blueviolet;
  text-decoration: underline solid;
  text-transform: uppercase;
}

<p>
  <a href="#">This is an ordinary HTML link</a>
</p>

<svg width="250px" viewBox="0 0 250 20" xmlns="http://www.w3.org/2000/svg">
  <a href="#">
    <text x="0" y="15">This is a link created in SVG</text>
  </a>
</svg>

Syntax

@namespace <namespace-prefix>? [ <string> | <url> ] ;

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

First browser version supporting @namespace
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗