What is the use of @namespace in CSS?

Question

From doc, I found using a namespace, as shown 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 this example, the color: blue rule will be limited to only h1 elements in the foo namespace (associated url(example.com) ).

As far as I know, it was considered not so necessary. And it certainly looks weird.

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

The only thing it defines is to declare the XML namespace prefix in CSS. This is necessary if you want to use selectors that match only elements in a specific namespace.

For example, SVG uses some common elements (for example, <a> ) and CSS properties with HTML with XML and HTML. If you use the same stylesheet for both HTML and SVG documents, it is best to highlight styles for SVG and HTML to prevent a match ...

Here is a step-by-step partition of its parts:

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

And finally, here is the MDN 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 stylesheet. Certain namespaces can be used to restrict generic types, type selectors, and attributes to just select items in that namespace. The @namespace rule @namespace usually only useful when working with an XML document containing multiple namespaces, for example, an XHTML document with built-in SVG.

The @namespace rule can be used to define the default namespace for a stylesheet. When a default namespace is defined, all generic types and a type selector (but not an attribute selector, see Note below) apply only to elements in this namespace.

The @namespace rule @namespace also be used to specify a namespace prefix for a style sheet. When generic, the type or attribute is prefixed with a namespace prefix, then this selector will only match 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-XML, known elements are automatically assigned namespaces. This means that the HTML elements will act as if they were in the XHTML namespace, even if the xmlns attribute is not in the HTML document.

Note that in XML, if a prefix is ​​not defined directly for an attribute, this attribute does not have a namespace. In other words, attributes do not inherit the namespace of the element in which they are located. To match this behavior, the default namespace in CSS does not apply to attribute selectors.

Answer 2

From MSDN

The HTML namespace is specially handled when viewing XML using CSS. Elements from the HTML namespace are displayed as they appear in HTML. This allows you to access features that are not yet provided by CSS. Some examples of useful HTML elements to insert are: <TABLE> , <A> , <IMG> , <SCRIPT> and <STYLE> .

For example, you can add a link and logo to the following sample restaurant overview. First, you must declare the HTML namespace at the top of the document, and then use the HTML prefix for inline HTML elements. The HTML embedded in this way must be well-formed XML, so the <IMG> element needs a minimal 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 elements to be interpreted as HTML elements.

The <HTML:STYLE> block can be used to insert a CSS stylesheet in an XML document. This block will complement any style sheets that are indicated by instructions for processing style sheets. When there is no external stylesheet, instructions should still be given on how to process the stylesheet, indicating that the XML document should be displayed using the CSS stylesheet language, even if the href attribute is not specified.

The following example shows how the stylesheet review.css can be embedded in an XML document using the HTML namespace, the <HTML:STYLE> element, and the stylesheet processing instruction without the 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> ...