What is the use of @namespace in CSS?

Question

From the doc, I found the use of namespace like below:

@namespace foo url(http://www.example.com);
 foo|h1 { color: blue } 

But I want to know more about this. Why do we use it?

Answer 1

In your given example, the color: blue rule will be limited to only h1 elements in the foo namespace (linked by url(example.com)).

To my knowledge, it's regarded as not often needed. And it certainly looks weird.

Here's a nice summary of its application: http://nimbupani.com/spacing-out-on-css-namespaces.html

The only thing it defines is how to declare an XML namespace prefix in CSS. That is needed if you want to use selectors that only match elements in a certain namespace.

For example, SVG shares some common elements (e.g. <a>) and CSS properties with HTML with XML and HTML. If you are using the same stylesheet for both HTML and SVG documents, then it is best to separate out the styles for SVG and HTML to prevent any overlap. …

Here's a nice step-by-step breakdown of its parts:

@namespace declares the default namespace and binds a namespace to a namespace prefix. The default namespace is applied to names that do not have an explicit namespace component. … If you declare an @namespace rule with a prefix, you can use the prefix in namespace-qualified names. …

And finally, here's MDN's doc: https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace

The @namespace rule is an at-rule that defines the XML namespaces that will be used in the style sheet. The namespaces defined can be used to restrict the universal, type, and attribute selectors to only select elements under that namespace. The @namespace rule is generally only useful when dealing with an XML document containing multiple namespaces—for example, an XHTML document with SVG embedded.

The @namespace rule can be used to define the default namespace for the style sheet. When a default namespace is defined, all universal and type selectors (but not attribute selectors, see note below) apply only to elements on that namespace.

The @namespace rule can also be used to define a namespace prefix for a style sheet. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace (and not just the name in the case of type or attribute selectors) of the element or attribute matches.

When using non-XML HTML, known elements will be automatically be assigned namespaces. This means that HTML elements will act as though they are on the XHTML namespace, even if there is no xmlns attribute anywhere in the HTML document.

Note that in XML, unless a prefix is defined directly on an attribute, that attribute has no namespace. In other words, attributes do not inherit the namespace of the element they're on. To match this behaviour, the default namespace in CSS does not apply to attribute selectors.

Answer 2

From MSDN

The HTML namespace is treated specially when browsing XML with CSS. Elements from the HTML namespace are displayed as they would appear in HTML. This allows access to capabilities that are not yet provided by CSS. Some examples of useful HTML elements to embed are <TABLE>, <A>, <IMG>, <SCRIPT>, and <STYLE>.

For example, you can add a link and logo to the following restaurant review sample. First, you must declare the HTML namespace at the top of the document, and then use the HTML prefix on the embedded HTML elements. HTML embedded this way must be well-formed XML, so the <IMG> element needs a minimized end tag.

<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
  ...
  <restaurant>
    <name>Red Apple Inn</name>
    <logo>
      <HTML:A href="javascript:alert('Visit the Red Apple Inn!')">
        <HTML:IMG src="red-apple.gif" height="50" width="200"/>
      </HTML:A>
    </logo>
    ...

In Microsoft® Internet Explorer, the prefix must remain HTML or html in order for the elements to be interpreted as HTML elements.

An <HTML:STYLE> block can be used to embed a CSS style sheet within an XML document. This block will augment any style sheets pointed to by style sheet processing instructions. When there is no external style sheet, there still must be a style sheet processing instruction present to indicate that the XML document should be displayed using the CSS style sheet language, even though no href attribute is specified.

The following example shows how the review.css style sheet can be embedded into the XML document using the HTML namespace, the <HTML:STYLE> element, and the style sheet processing instruction without an href attribute. HTML

<?xml version="1.0"?>
<?xml-stylesheet type="text/css"?>
<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
  <HTML:STYLE>
    story
    {
      display: block;
      font-family: Arial, Helvetica, sans-serif;
      font-size: small;
      width: 30em;
    }
    restaurant
    {
      display: block;
      padding: 1.2em;
      font-size: x-small;
      margin-bottom: 1em;
    }
    ...
  </HTML:STYLE>
  <restaurant>
    ...