Heads-up: CSS Namespaces and You

By Marisa Peacock (@marisacp51) Jun 3, 2008

The World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) Working Group has published the Candidate Recommendation of “CSS Namespaces Module.” This module defines the syntax for using namespaces in CSS and may have wide spread implications in the design world.

Since its inception CSS has been a top priority of the W3C and has been among the most popular topics. Namespaces have actually been in use in CSS for over 10 years now, but they have not been formally defined within the CSS specification by the W3C — until now.

Namespace Defined

You are probably most familiar with the Namespaces in XML. They are used to identify or reference elements and attributes of an XML vocabulary. An XML instance may reference more than one XML vocabulary. Sometimes an element or attribute is used in several XML vocabularies. By referencing the element using its identified namespace, the software can understand which element is being used. In XML you create a Namespace using the xmlns attribute.

In CSS, the same terminology is used as with XML namespaces. However you are not limited to just using namespaces to represent XML attributes and elements. Namespaces in CSS can be used to represent other items as defined by the Host Language being used.

The @namespace rule allows the declaration of a namespace prefix to be used by selectors in a stylesheet. A namespace that consists of the empty string represents the null namespace or lack of a namespace.

Why Use a Namespace?

Some have chosen to know, use and love the @namespace syntax, while others have ignored it completely. The advantage of using a namespace, of course, is that it works in any non-XML-based ML without designing a new solution.

The problem with namespaces is that it imposes technology on people not all software supports. Depending upon what language you use (CSS vs. XSL), your stylesheets will differ. After all, the W3C started to develop XSL because there was a need for an XML-based style sheet language.

CSS or XSL?

While CSS was designed around styling HTML and XML (including XHTML) documents and uses a special, non-XML syntax for defining the styling information for the various elements of the document that it styles, XSL has evolved from its initial design—to create an XML-based styling language directed towards paged display media—into the combination of XSLT and XSL-FO. This generic XML transformation language created a powerful styling language, much more complex than CSS. Whereas XSLT is a complete language, CSS is not; thus demonstrating a degree of power and flexibility not found in CSS.