Netscape DevEdge

Skip to: [content] [navigation]

Properly Using CSS and JavaScript in XHTML Documents

Background

XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) defines XHTML to be a reformulation of HTML 4 as an XML 1.0 application.

XHTML is rapidly replacing HTML 4 among many sites; however, the failure of popular web browsers to properly support XHTML, combined with a lack of understanding by web authors of the fundamental differences between HTML 4 and XHTML, is creating a growing problem on the web today.

XHTML is XML, not HTML

One of the primary misunderstandings about XHTML is that it is just another version of HTML. This misunderstanding is compounded by the fact that Microsoft® Internet Explorer only supports XHTML if it is served with Mime type text/html rather than the recommended application/xhtml+xml.

When an XHTML page is served with MIME type text/html it is treated by all browsers as if it were nothing more than HTML. However when an XHTML page is served with MIME type text/xml or application/xhtml+xml, then it should be treated as an XML document which must conform to the strict rules for authoring and displaying XML.

Proper XHTML is an application of XML and as such requires that authors follow strict rules when authoring XHTML. In particular:

  1. raw < and & characters are not allowed except inside of CDATA Sections (<!CDATA[[ ... ]]>)

  2. Comments (<!—— ... ——>) must not contain double dashes (——)

  3. Content contained within Comments (<!—— ... ——>) can be ignored

Problems with Inline style and script

Inline style and script tags can cause several different problems in XHTML when it is treated as XML rather than HTML.

  1. JavaScript typically contains characters which can not exist in XHTML outside of CDATA Sections. 

    <script type="text/javascript">
  var i = 0;

  while  (++i < 10)
  {
    // ...
  }
</script>

    Note that this example is not well formed XHTML since the use of raw < is only allowed as a part of markup in XHTML or XML.

  2. Authors who are familiar with HTML, commonly enclose the contents of inline style and script tags in comments in order to hide the contents of the tags from browsers which do not understand them. 

    <style type="text/css">
<!--
 body {background-color: blue; color: yellow; }
-->
</style>
<script type="text/javascript">
<!--
  var i = 0;
  var sum = 0;

  for (i = 0; i < 10; ++i)
  {
    sum += i;
  }
  alert('sum = ' + sum);
// -->
</script>

    This example illustrates that a conformant browser can ignore content inside of comments. In addition, this example shows how the differences between browsers in handling inline content in text/xml or application/xhtml+xml can be problematic.

    Mozilla 1.1+/Opera 7
    Do not apply CSS or execute the JavaScript.
    Netscape 7.0x/Mozilla 1.0.x
    Do not apply CSS but does execute the JavaScript.
    Internet Explorer 5.5+
    Can not display the document.

  3. Another problem with using comments to surround JavaScript in XHTML is related to the problems which can occur if comments contain double dashes (——). 

    <script type="text/javascript">
<!--
  var i;
  var sum = 0;

  for (i = 10; i > 0; --i)
  {
    sum += i;
  }
// -->
</script>

  4. Properly enclosing script contents inside of CDATA sections can cause problems in downlevel browsers which do not understand XML. However, it is possible to combine JavaScript Comments with CDATA sections to allow for backward compatibility. 

    <script type="text/javascript">
//<![CDATA[
  var i = 0;

  while  (++i < 10)
  {
    // ...
  }
  //]]>
</script>

Examples

Using CSS rules in inline style within comments

Example 1 - XHTML 1.0 Strict as text/html

This example illustrates the behavior of XHTML served as text/html when CSS rules are contained inline and surrounded by comments. This example is supported by Netscape 7.x, Mozilla, Opera 7 and Internet Explorer 5.5+ which all apply the CSS rules as expected.

Example 2 - XHTML 1.0 Strict as text/xml

This example illustrates the behavior of XHTML served as text/xml when CSS rules are contained inline and surrounded by comments. This example is supported by Netscape 7.x, Mozilla, and Opera 7 but not Internet Explorer 5.5+. Note that Netscape 7.x, Mozilla and Opera all agree that CSS rules contained inline inside of comments are to be ignored.

Example 3 - XHTML 1.0 Strict as application/xhtml+xml

This example illustrates the behavior of XHTML served as application/xhtml+xml when CSS rules are contained inline and surrounded by comments. This example is supported by Netscape 7.x, Mozilla, and Opera 7 but not Internet Explorer 5.5+. Note that Netscape 7.x, Mozilla and Opera all agree that CSS rules contained inline inside of comments are to be ignored.

Using CSS rules in external file

Example 4 - XHTML 1.0 Strict as text/html

This example illustrates the behavior of XHTML served as text/html when CSS rules are contained in an external file. This example is supported by Netscape 7.x, Mozilla, Opera 7 and Internet Explorer 5.5+.

Example 5 - XHTML 1.0 Strict as text/xml

This example illustrates the behavior of XHTML served as text/xml when CSS rules are contained in an external file. This example is supported by Netscape 7.x, Mozilla, and Opera 7 but not Internet Explorer 5.5+.

Example 6 - XHTML 1.0 Strict as application/xhtml+xml

This example illustrates the behavior of XHTML served as application/xhtml+xml when CSS rules are contained in an external file. This example is supported by Netscape 7.x, Mozilla, and by Opera 7 but not Internet Explorer 5.5+.

Recommendations

  1. Do not use inline style or script in XHTML

    Replacing inline style and script with external files containing the CSS rules and JavaScript is the best approach for authoring XHTML in a backwardly compatible fashion that will not break if the MIME type of the content is changed from text/html to application/xhtml+xml.

    This recommendation may seem rather strong however it is made with the intention of reducing future problems with XHTML content when the transition from serving XHTML as text/html to application/xhtml+xml occurs in the next few years.

    If you only test your XHTML when it is deployed as text/html, then you may be introducing problems such as described in this article without realizing it. Moving CSS and JavaScript into separate files is the safe approach with regard to changes in how your XHTML is served.

  2. Follow the XHTML 1.0 HTML Compatibility Guidelines

    The XHTML 1.0 HTML Compatibility Guidelines help make XHTML documents backwardly compatible with older user agents which do not understand XML.

    Please note that for pure XHTML documents, you do not need to use the xml-stylesheet processing instruction, but should instead use link to reference external files containing CSS.

Change Log

March 14, 2003

Thanks to Martin Honnen for pointing out several errors on my part with respect to permitted characters in XML and for helpful comments on the article.

A–+R