CSS @namespace At-Rule
The CSS @namespace
at-rule declares a namespace prefix and associates it with a given namespace name. It can also be used to declare a (non-prefixed) default namespace.
Once declared, any namespace prefix can then be used in namespace-qualified names, such as in XML or SVG.
Here's an example:
This example declares svg
as a namespace prefix. This prefix is used to apply the namespace http://www.w3.org/2000/svg where the svg
namespace prefix is used.
The @namespace
rule accepts a namespace prefix and a URI. Like this:
The prefix is a <custom-ident> data type and the URI can be represented as either a <string> or by using the <url> syntax.
However, even if you use the <url> syntax, it is treated as a literal <string>. So the URI does not necessarily need to satisfy the requirements of the <url> data type. All strings — including the empty string and strings representing invalid URIs — are valid namespace names when using the @namespace
at-rule.
So the following are both valid @namespace
declarations:
Uses for the @namespace
Rule
Namespaces can be used to restrict the universal, type, and attribute selectors to only certain elements within that namespace.
The @namespace
at-rule is typically used for documents that have multiple namespaces. For example, an HTML document that also contains inline SVG.
The @namespace
rule can be used to declare a default namespace or a prefixed namespace.
Default Namespaces
When you declare a default namespace, all universal and type selectors (but not attribute selectors) apply only to elements in that namespace. You can create a default namespace by omitting any prefix.
Example:
Prefixed Namespaces
Using a prefix binds the namespace to that prefix. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace and the name of the element or attribute matches.
Where to put the @namespace
Rule?
The @namespace
at-rule must come after any @charset
and @import
rules, but before any other at-rules and style rules.
Like this:
Official Specifications
- The
@namespace
at-rule is defined in CSS Namespaces Module Level 3 (W3C Recommendation 29 September 2011).