Anne van Kesteren

CSS namespaces

For selecting elements within a XML document that contains different namespaces the W3C created a CSS namespace proposal (of course, you could use XPath together with the XPointer xmlns() Scheme as well, but I want to style elements with CSS).

Although the document is only a working draft (and it is the first and only that is released) browser support this syntax, because they need it for XHTML, MathML (not yet; SVG) and authors need it for styling their documents (that is probably why Safari supports this as well). The syntax is really easy. First you define your namespace, like:

@namespace g url(http://example.org/#graphics-ns);

The namespace is within the url() the abbreviation is g. If you want this to be the default namespace for the entire style sheet, leave out the g. Not so hard if you ask me. Note that g is an abbreviation and has nothing to do with the actual XML. That is probably a bit more difficult. Take a look at the following examples:

  1. <root xmlns:a="http://example.org/#a-ns"/>
  2. <root xmlns:b="http://example.org/#b-ns"/>

All the children the root element could have are left out, they are considered not important. Now take a look at the @namespace rules:

  1. @namespace qwerty url(http://example.org/#a-ns);
  2. @namespace a url(http://example.org/#b-ns);

They will match (!). This is important and will probably help you understand namespaces a bit better. It is all about the URI, the abbreviation is not important at all. It is a good authoring practice to keep them the same of course, but it isn't necessary.

Good examples of selecting elements and attributes can be found in the namespace proposal document. Another thing to keep in mind is that the abbreviation, like g, is case-insensitive in CSS.

Note: if you are already using the Internet Explorer 7 fix and you want to let all above work in Internet Explorer you must follow this rules: The abbreviation in your XML file must be exactly the same as in your CSS (This has to do with a much older CSS namespace selector, Internet Explorer uses).

Comments

  1. Anne: (This has to do with a much older CSS namespace selector, Internet Explorer uses)

    Just a technicality, but ie does not at all support namespaces in selectors. It does support unicode escape sequences in selectors, and elements names in XML may contain a colon even if they aren't namespaced. In CSS selectors that colon may be escaped to it's literal character. In essence this means that ie matches for example the element 'html:script' in the default namespace; not the element 'script' in the namespace the 'html' token is bound to, as the other browsers do. It shouldn't be too hard to actually get around this problem, though.

    Posted by liorean at

  2. I want my stylesheet to provide the correct typographical quotation characters around quotations. They depend on the quotation's language, for example, they're different in German than in English. Now I'm searching for the canonical URL for the implied XML namespace in XHTML 1.1, since the language has to be provided in the xml:lang attribute of the <q> tag. Could you give me a hint? The W3C CSS validator doesn't understand CSS namespaces yet, so it is of no help... What do I define in the @namespace xml url(??) declaration?

    Posted by bbolli at

  3. Just a PS to my question above: There's a test document that shows what I want to do.

    Posted by bbolli at