CSS3 guide: 4. XML namespaces

This is a post in a series, please see the Table of Contents [webmasterworld.com] for the other posts in the series.

4. XML namespaces

XML namespaces are referred to in both the CSS3 namespaces module and the CCS3 selectors module.

CSS3 adds supports for XML namespaces. If you check an xhtml <html> tag, you'll notice:

xmlns="http://www.w3.org/1999/xhtml"

as an attribute in there. The "URI" in there is just an identifier, and allows you can link the namespace in CSS with the one in the document(s) you are styling.
In e.g. SVG you'll also find a xmlns declaration, and -unknown to quite a few I guess- one can style SVG with CSS too.

There are two parts to it: declaring the namespaces (linking a name and the URI) using an @rule, and selectors that allow references to the namespaces.

Syntax: @namespace "URI"

Declares the default namespace

Syntax: @namespace prefix "URI"

Delares a prefix to apply a certain namespace.

Example:


@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";

Declares the xhtml namespace as the default and creates a prefix svg that applies the svg namespace.

Syntax: prefix划

selects the name E in the indicated namespace

Syntax: 划

selects the name E that belongs to no namespace

Syntax: *划

selects the name E in all namespaces, including the empty one

Syntax: E

selects the name E in the default namespace

Example:

A too simple example to use namespaces in order to share a stylesheet between a SVG and a xhtml document.

style.css:


@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";
svg字ect {
 fill: yellow;
 stroke: blue;
 stroke-width: 10;
}
div {
 background-color: yellow;
}

file.svg:


<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="5cm" viewBox="0 0 1000 500"
        xmlns="http://www.w3.org/2000/svg" version="1.1">
 <rect x="200" y="100" width="600" height="300"/>
</svg>

file.html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <title>Namespace test</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head> 
  <body>
    <div> 
      hello world!
    </div>
  </body>
</html>

Practical use
Allow to share a stylesheet between your SVG and xhtml and other xml documents ? It would be interesting to see the long term vision of what this is intended to be.

Support

Widely supported in browsers (except IE)
Not supported in any version of IE (also not in IE8)

Graceful fallback
IE is the troubled one in this, but it doesn't support standards like SVG anyway.

More info:

CSS3 guide: 4. XML namespaces

swa66

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week