Divya Manian

RSS Feed Youtube Channel Github

Spacing Out on CSS Namespaces

One of my favourite past times is opening up a random email from the CSS mailing list and going down a rabbit hole. On one rainy day, I found myself staring at the specifications for CSS Namespaces module.

Namespaces

As Wikipedia defines it, a namespace provides a list of uniquely identifiable elements and attributes in an XML document. Here is how you would define the namespace of an XHTML document:

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

The URL in the code above is simply the name of that namespace and does not refer to an actual location online. Browsers do not use or process URL. It is just an easy way to understand what that namespace is referring to when someone is reading the source code of the document.

CSS Namespaces

In 2007, Bert Bos explained why CSS Namespaces were introduced:

The Namespaces module is very small, very simple, and probably rarely needed, but just because it is simple, it doesn’t cost much to add it to CSS. Indeed, many browsers have supported it for a long time already.

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.

Usage

  1. Declare your XHTML doctype and define a namespace:

    <!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">

  2. In your style sheet, declare the default namespace for the CSS rules:

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

  3. Use the rules specific to each namespace. If you have declared the above namespaces, you can scope CSS rules to only apply to SVG elements which have the same namespace as above:

    svg|a { color: white; }

    All the other rules will be applied to HTML elements by default.

Using it with HTML 5

HTML5 allows inline SVG and MathML, which means you can style HTML, inline SVG and MathML elements using the same stylesheet.

The advantage of HTML5 parsing is that, HTML5 parsers should implicitly assign namespaces to known vocabularies (so far SVG, XML, and MathML), if the document is HTML (and not XHTML). This means, you do not have to use xmlns to explicitly specify the namespace for SVG or MathML elements in your HTML5 document.

The bad news is, only Firefox nightly builds with html5.enabled = true set on about:config parse and recognize inline SVG or MathML.

Here is a demo of using CSS Namespaces for a HTML5 page with inline SVG (mind you, it only works on Firefox nightlies with html5 parser enabled). If you are one of the 99.9% of the population that does not use Firefox nightlies, this is how it is supposed to look:

screenshot of css3 namespaces demo

The dinosaur on the left is an inline SVG image which uses styles defined in the SVG namespace.

As the spec mentions, it is not often you will find use for it. Though, Firefox user agent style sheet uses namespaces to separate the default styles for web pages from those for Firefox UI (which uses XUL).

Comments