Properly Using CSS and JavaScript in XHTML Documents

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.

If you're writing XHTML (as opposed to regular HTML) you should understand the fundamental differences between HTML 4 and XHTML.

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, prior to version 9, Microsoft® Internet Explorer only supports XHTML if it is served with MIME media 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.

JavaScript Contains Characters Which Can Not Exist in XHTML

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.

Use of Comments Inside Inline style and script

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. (See Talk:Properly_Using_CSS_and_JavaScript_in_XHTML_Documents of this ascertation. - XmlGuru)

Inline style and script Containing Double Dashes

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>

Using CDATA Instead of Comments

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+ (See Talk:Properly_Using_CSS_and_JavaScript_in_XHTML_Documents of this ascertation. - XmlGuru). 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+ (See Talk:Properly_Using_CSS_and_JavaScript_in_XHTML_Documents of this ascertation. - XmlGuru). 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+ (See Talk:Properly_Using_CSS_and_JavaScript_in_XHTML_Documents of this ascertation. - XmlGuru).

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+ (See Talk:Properly_Using_CSS_and_JavaScript_in_XHTML_Documents of this ascertation. - XmlGuru).

Recommendations

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.

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.

See also

• Writing JavaScript for XHTML