@namespace - CSS At-rule

@namespace

Summary of characteristics of the @namespace at-rule

Quick description
Allows defining namespaces in CSS.
Status
Standard
Percentages
Not applicable.
W3C Module
CSS Namespaces Module Level 3
References (W3C)
Document status: REC (Recommendation)

Description of the @namespace at-rule.

The directive @namespace is especially useful in the case of composite documents involving XML. It sets the default namespace, and can also define a namespace and associate it with an identifier.

Example :

@namespace svg 'http://www.w3.org/2000/svg';

It is then possible to write styles specific to SVG tags. Note the | character that separates the namespace from the tag name. You get it by pressing ALGR 6 on a Windows keyboard.

svg|circle { ... } The SVG circle tag *|path { ... } All path tags svg|* { ... } All the SVG tags

The @namespace directives must come after @charset and after any @import directives. They should come before all other rules.

Note. In HTML, the SVG and MathML elements will automatically be assigned to the corresponding namespace even if there is no indication in the document. For this reason, you can write SVG or MathML in your web pages without worrying about setting a namespace.
The implied namespace for SVG is http://www.w3.org/2000/svg, and for MathML it's http://www.w3.org/1998/Math/MathML.

Syntaxes of the @namespace at-rule.

  • @namespace: 'url'; @namespace: url('url');

    Sets the default namespace: all tags without a prefix are associated with this space.
    The url() function is optional.

  • @namespace: prefix 'url'; @namespace: prefix url('url');

    Defines a namespace and associates it with the name prefix. Tags prefixed with prefix: are linked to this namespace.

Examples of use of the @namespace at-rule.

Examples 1 and 2.

The circle below is drawn in SVG, while the square root was drawn in MathML. To avoid any name conflicts between these two languages, namespaces were used. Keep in mind that in this case, it's not actually necessary since the tags are clearly separated between SVG and MathML, and namespaces are automatically assigned.

3

Example 3.

The frame below comes from a XML file, styled by a stylesheet. The area of the countries comes from two different namespaces. The prefixes of these two namespaces are geo-min and geo-max. Here's a snippet of the XML file:

countries xmlns:geo-max="http://www.sample.com" xmlns:geo-min="http://www.example.com" country name.../name geo-max:area.../geo-max:area /country country name.../name geo-min:area.../geo-min:area /country ... /countries

Here is an excerpt from the style sheet that formats the XML file. You can see that the two namespaces are distinguished on the screen by a different color. The areas of the two namespaces are aligned to the right.

@namespace max "http://www.sample.com"; @namespace min "http://www.example.com"; country {display:grid; grid-template-columns:100px 100px;} min|area {color:red;} max|area {color:green;} *|area {text-align:right;}

And here is the result:

Browsers compatibility with the @namespace at-rule.

Browser compatibility is complete.

Column 1
Support for namespace and the @namespace directive to define them in CSS.
1
@namespace
at-rule
Estimated overall support.
97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Opéra

Firefox pour Androïd

Chrome

Edge

Safari

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse

Evolution of the @namespace at-rule.

  • CSS Namespaces Module Level 3

    Regarding @namespace First presentation of the at-rule @namespace to define a namespace in CSS.
    REC
    September 29, 2011
    Recommendation .

See also, about namespaces.

The directive @namespace is the only one that is defined in the module CSS Namespaces Module Level 3.

At-rules:

@namespace
Allows defining namespaces in CSS.