@namespace

Spec
Version
CSS3
Browser support (more…)
IE8 FF2+ SA4 OP9.2+ CH2
None Full None Full None

Syntax

@namespace  [ prefix  ] URI;

Description

The @namespace at-rule declares an XML namespace and, optionally, a prefix with which we can refer to it. @namespace rules must follow all @charset and @import rules, and precede all other at-rules and rule sets in a style sheet.

The scope of an @namespace rule is the style sheet in which it’s declared—it doesn’t extend to imported style sheets.

If no prefix is specified in the @namespace rule, the rule defines the default namespace.

If a prefix is specified, you can refer to elements in that namespace by prepending the prefix and a vertical bar, |, to the element selector, like so:1

@namespace "http://www.w3.org/1999/xhtml";
@namespace foo "http://example.com/ns/foo";

table {
  ⋮ declarations
}
foo|bar {
  ⋮ declarations
}

In the example above, the table selector matches table elements in the XHTML namespace, while the foo|bar selector matches bar elements in the namespace referred to by the prefix foo.

Note: Namespaces

The namespace URI is the most important component of a namespace declaration. Consider this style sheet:

@namespace foo "http://example.com/ns/foo";
foo|bar {
  ⋮ declarations
}

The foo|bar selector in the above example would match the <xyz:bar>…</xyz:bar> element in this markup fragment because the namespace URI in the markup matches the namespace URI in the at-rule:

<abc xmlns:xyz="http://example.com/ns/foo">
  <xyz:bar>…</xyz:bar>
</abc>

However, it would not match the <foo:bar>…</foo:bar> element in this markup fragment, since that element’s in another namespace (that is, the URI doesn’t match):

<abc xmlns:foo="http://example.com/ns/xyz">
  <foo:bar>…</foo:bar>
</abc>

Thus, it’s not the prefix, but the corresponding namespace URIs in the markup and at-rule, that must match.

Example

The first example below declares a default namespace; the second declares that the prefix svg can be used to refer to elements from the SVG namespace, "http://www.w3.org/2000/svg":

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

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
None None None None None None Full Full Full None None None None Full Full Full None

This at-rule is still poorly supported.

Footnotes

1 It would have been more intuitive to use a colon separator than the vertical bar, but the colon character is already used for other purposes in selectors—more about this in Pseudo-classes.

User-contributed notes

There are no comments yet.

Related Products