Using Namespaces with CSS

 

You must declare namespaces in the document element when using XML with a cascading style sheet. Locally scoped namespaces will parse correctly, but CSS does not currently describe a mechanism for resolving namespace prefixes. Therefore, CSS rules might not apply correctly to elements in the locally scoped namespace. Placing all namespace declarations on the document element ensures that they are all global and, therefore, that there will be no collision of prefixes. The default namespace cannot be used: All namespaced elements with namespaces must have an explicit prefix. In addition, CSS selectors can specify a namespaced element only by its prefix. Therefore, you must ensure that the prefix is consistent between the XML document and the style sheet.

Here is an example of a style sheet for elements with the HTML prefix.

CSS File (htmlprefix.css)

HTML\:IMG {  
  border: 2px solid black;  
}  
HTML\:A:visited HTML\:IMG {  
  border-color: grey;  
}  
HTML\:A:active HTML\:IMG {  
  border-color: red;  
}  
HTML\:A:link HTML\:IMG {  
  border-color: blue;  
}  

Notice that the ":" namespace character must be escaped by a leading backslash to differentiate it from a pseudo-class.

Using the HTML Namespace with CSS

The HTML namespace is treated specially when browsing XML with CSS. Elements from the HTML namespace are displayed as they would appear in HTML. This allows access to capabilities that are not yet provided by CSS. Some examples of useful HTML elements to embed are <TABLE>, <A>, <IMG>, <SCRIPT>, and <STYLE>.

For example, you can add a link and logo to the following restaurant review sample. First, you must declare the HTML namespace at the top of the document, and then use the HTML prefix on the embedded HTML elements. HTML embedded this way must be well-formed XML, so the <IMG> element needs a minimized end tag.

<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">  
  ...  
  <restaurant>  
    <name>Red Apple Inn</name>  
    <logo>  
      <HTML:A href="javascript:alert('Visit the Red Apple Inn!')">  
        <HTML:IMG src="red-apple.gif" height="50" width="200"/>  
      </HTML:A>  
    </logo>  
    ...  

In Microsoft® Internet Explorer, the prefix must remain HTML or html in order for the elements to be interpreted as HTML elements.

An <HTML:STYLE> block can be used to embed a CSS style sheet within an XML document. This block will augment any style sheets pointed to by style sheet processing instructions. When there is no external style sheet, there still must be a style sheet processing instruction present to indicate that the XML document should be displayed using the CSS style sheet language, even though no href attribute is specified.

The following example shows how the review.css style sheet can be embedded into the XML document using the HTML namespace, the <HTML:STYLE> element, and the style sheet processing instruction without an href attribute.

<?xml version="1.0"?>
<?xml-stylesheet type="text/css"?>
<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
  <HTML:STYLE>
    story
    {
      display: block;
      font-family: Arial, Helvetica, sans-serif;
      font-size: small;
      width: 30em;
    }
    restaurant
    {
      display: block;
      padding: 1.2em;
      font-size: x-small;
      margin-bottom: 1em;
    }
    ...
  </HTML:STYLE>
  <restaurant>
    ...