@namespace
| Version |
|---|
| CSS3 |
| IE7 | FF2+ | SA3 | OP9.2+ |
|---|---|---|---|
| None | Full | None | Full |
Syntax
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.
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 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| None | None | None | None | None | Full | None | None | None | Full | Full |
This at-rule isn’t widely 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.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.