Minz. Out of the box

Inline XML (Extensible Markup Language) reviewed


Last time, I talked about XML namespaces, Inline XML within XHTML and the trouble I had styling these XML elements via CSS.

Now, what happened. Styling turned out to be well when the file was sent as text/html. Well, this is fine, but a file containing XML elements is not a HTML file. Then I was pointed to CSS3 Selectors, which I first refused to do, because CSS3 is not yet a recommendation.

But I was curious, so I had a look at the W3C [1]. The selector notation (prefix\:element) I used in my examples, is considered to be a fallback solution for down-level clients, not fully XML capable. So if the file is served as text/html, it seems like Mozilla and Opera are behaving like down-level clients. Selectors are matching as expected. Example:

mz\:navigation {
	background-color: #E3ECF6;

Now, if the page is served as text/xml, application/xhtml+xml, application/xml Mozilla is no longer behaving as a down-level client, therefore the selector doesn't match, and the XML elements remain unsyled. (Have a look here).

Screenshot, showing Opera misbehaviour

Therefore the W3C introduces a new At-Rule as well as a special selector notation. So I used the following stylesheet (excerpt):

@namespace mz url(http://xhtml2.researchkitchen.de/);

mz|navigation {
	background-color: #E3ECF6;

The @namespace rule allows the style sheet author to declare a namespace prefix and associate it to a given namespace URI.

Sidenote: The picture shows a misbehaving of the Opera browser, mixing up elements of different namespaces. So in this case, not only the <mz:title /> element is styled, but the page <title> as well:

[..from the W3C] It should be noted that down-level clients may incorrectly match selectors against XML elements in other namespaces.[..]

See the new files with corrected styles in action (Mozilla recommended):

MIME-Type text/html
MIME-Type text/xml
MIME-Type application/xhtml+xml
MIME-Type application/xml

[1] W3C Working Draft: CSS Namespace Enhancements



This is a great resource minz!

Some extra things:

- You could use a different prefix for your namespaces within CSS, 'cause the prefixes are always replaced by the full URI
- Prefixes are case insensitive within CSS (but I think this one is still a Mozilla bug :))

Posted: 10/04/2003