Properly Using CSS and JavaScript in XHTML Documents

  • Revision slug: Properly_Using_CSS_and_JavaScript_in_XHTML_Documents
  • Revision title: Properly Using CSS and JavaScript in XHTML Documents
  • Revision id: 63886
  • Created:
  • Creator: Mathieu Deaudelin
  • Is current revision? No
  • Comment Continuing migration of content.

Revision Content

The examples could not be migrated at this time. (example-missing)

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 <tt>application/xhtml+xml</tt>.

When an XHTML page is served with MIME type <tt>text/html</tt> it is treated by all browsers as if it were nothing more than HTML. However when an XHTML page is served with MIME type <tt>text/xml</tt> or <tt>application/xhtml+xml</tt>, 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 <tt><</tt> and <tt>&</tt> characters are not allowed except inside of CDATA Sections (<tt><!CDATA ... ></tt>).
  2. Comments (<tt><!—— ... ——></tt>) must not contain double dashes (<tt>——</tt>).
  3. Content contained within Comments (<tt><!—— ... ——></tt>) can be ignored.

Problems with Inline <tt>style</tt> and <tt>script</tt>

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 (example-missing) 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 <tt>style</tt> and <tt>script</tt>

Authors who are familiar with HTML commonly enclose the contents of inline <tt>style</tt> and <tt>script</tt> 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 (example-missing) 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 <tt>text/xml</tt> or <tt>application/xhtml+xml</tt> 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.

Inline <tt>style</tt> and <tt>script</tt> Containing Double Dashes

Another problem (example-missing) with using comments to surround JavaScript in XHTML is related to the problems which can occur if comments contain double dashes (<tt>——</tt>).

<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 <tt>style</tt> within comments

Example 1 - XHTML 1.0 Strict as <tt>text/html</tt>
This example illustrates the behavior of XHTML served as <tt>text/html</tt> 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 <tt>text/xml</tt>
This example illustrates the behavior of XHTML served as <tt>text/xml</tt> 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 <tt>application/xhtml+xml</tt>
This example illustrates the behavior of XHTML served as <tt>application/xhtml+xml</tt> 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 <tt>text/html</tt>
This example illustrates the behavior of XHTML served as <tt>text/html</tt> 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 <tt>text/xml</tt>
This example illustrates the behavior of XHTML served as <tt>text/xml</tt> 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 <tt>application/xhtml+xml</tt>
This example illustrates the behavior of XHTML served as <tt>application/xhtml+xml</tt> 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

This document is not yet complete.

Original Document Information

  • Author(s): Bob Clary
  • Last Updated Date: March 14th, 2003
  • Copyright © 2001-2003 Netscape.

Revision Source

<pre class="eval">The examples could not be migrated at this time. <i>(example-missing)</i>
</pre>
<p><a class="external" href="http://www.w3.org/TR/xhtml1">XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition)</a> defines XHTML to be a reformulation of HTML 4 as an XML 1.0 application.
</p><p>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. 
</p>
<h3 name="XHTML_is_XML.2C_not_HTML"> XHTML is XML, not HTML </h3>
<p>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 <tt>application/xhtml+xml</tt>.
</p><p>When an XHTML page is served with MIME type <tt>text/html</tt> it is treated by all browsers as if it were nothing more than HTML. However when an XHTML page is served with MIME type <tt>text/xml</tt> or <tt>application/xhtml+xml</tt>, then it should be treated as an XML document which must conform to the strict rules for authoring and displaying XML.
</p><p>Proper XHTML is an application of XML and as such requires that authors follow strict rules when authoring XHTML. In particular:
</p>
<ol><li> Raw <tt>&lt;</tt> and <tt>&amp;</tt> characters are not allowed except inside of CDATA Sections (<tt>&lt;!CDATA<a href="en/..."> ... </a>&gt;</tt>).
</li><li> Comments (<tt>&lt;!—— ... ——&gt;</tt>) must not contain double dashes (<tt>——</tt>).
</li><li> Content contained within Comments (<tt>&lt;!—— ... ——&gt;</tt>) can be ignored.
</li></ol>
<h3 name="Problems_with_Inline_style_and_script"> Problems with Inline <tt>style</tt> and <tt>script</tt> </h3>
<p>Inline style and script tags can cause several different problems in XHTML when it is treated as XML rather than HTML. 
</p>
<h4 name="JavaScript_Contains_Characters_Which_Can_Not_Exist_in_XHTML"> JavaScript Contains Characters Which Can Not Exist in XHTML </h4>
<p>JavaScript typically contains characters which can not exist in XHTML outside of CDATA Sections.
</p>
<pre class="eval">&lt;script type="text/javascript"&gt;
  var i = 0;
  
  while (++i &lt; 10)
  {
    // ...
  }
&lt;/script&gt;
</pre>
<p>Note that this example (example-missing) is <b>not well formed XHTML</b> since the use of raw &lt; is only allowed as a part of markup in XHTML or XML.
</p>
<h4 name="Use_of_Comments_Inside_Inline_style_and_script"> Use of Comments Inside Inline <tt>style</tt> and <tt>script</tt> </h4>
<p>Authors who are familiar with HTML commonly enclose the contents of inline <tt>style</tt> and <tt>script</tt> tags in comments in order to hide the contents of the tags from browsers which do not understand them.
</p>
<pre class="eval">&lt;style type="text/css"&gt;
 &lt;!--
  body {background-color: blue; color: yellow;}
 --&gt;
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
 &lt;!--
  var i = 0;
  var sum = 0;
 
  for (i = 0; i &lt; 10; ++i)
  {
    sum += i;
  }
  alert('sum = ' + sum);
 // --&gt;
&lt;/script&gt;
</pre>
<p>This example (example-missing) 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 <tt>text/xml</tt> or <tt>application/xhtml+xml</tt> can be problematic.
</p>
<dl><dt> Mozilla 1.1+/Opera 7
</dt><dd> Do not apply CSS or execute the JavaScript. 
</dd><dt> Netscape 7.0x/Mozilla 1.0.x
</dt><dd> Do not apply CSS but does execute the JavaScript. 
</dd><dt> Internet Explorer 5.5+
</dt><dd> Can not display the document.
</dd></dl>
<h4 name="Inline_style_and_script_Containing_Double_Dashes"> Inline <tt>style</tt> and <tt>script</tt> Containing Double Dashes </h4>
<p>Another problem (example-missing) with using comments to surround JavaScript in XHTML is related to the problems which can occur if comments contain double dashes (<tt>——</tt>).
</p>
<pre class="eval">&lt;script type="text/javascript"&gt;
&lt;!--
  var i;
  var sum = 0;

  for (i = 10; i &gt; 0; --i)
  {
    sum += i;
  }
// --&gt;
&lt;/script&gt;
</pre>
<h4 name="Using_CDATA_Instead_of_Comments"> Using CDATA Instead of Comments </h4>
<p>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.
</p>
<pre class="eval">&lt;script type="text/javascript"&gt;
 //&lt;![CDATA[
  var i = 0;

  while  (++i &lt; 10)
  {
    // ...
  }
 //]]&gt;
&lt;/script&gt;
</pre>
<h3 name="Examples"> Examples </h3>
<h4 name="Using_CSS_rules_in_inline_style_within_comments"> Using CSS rules in inline <tt>style</tt> within comments </h4>
<dl><dt> Example 1 - XHTML 1.0 Strict as <tt>text/html</tt>
</dt><dd> This example illustrates the behavior of XHTML served as <tt>text/html</tt> 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.
</dd></dl>
<dl><dt> Example 2 - XHTML 1.0 Strict as <tt>text/xml</tt>
</dt><dd> This example illustrates the behavior of XHTML served as <tt>text/xml</tt> when CSS rules are contained inline and surrounded by comments. This example is supported by Netscape 7.x, Mozilla, and Opera 7 but <b>not Internet Explorer 5.5+</b>. Note that Netscape 7.x, Mozilla and Opera all agree that CSS rules contained inline inside of comments are to be ignored.
</dd></dl>
<dl><dt> Example 3 - XHTML 1.0 Strict as <tt>application/xhtml+xml</tt>
</dt><dd> This example illustrates the behavior of XHTML served as <tt>application/xhtml+xml</tt> when CSS rules are contained inline and surrounded by comments. This example is supported by Netscape 7.x, Mozilla, and Opera 7 but <b>not Internet Explorer 5.5+</b>. Note that Netscape 7.x, Mozilla and Opera all agree that CSS rules contained inline inside of comments are to be ignored.
</dd></dl>
<h4 name="Using_CSS_rules_in_external_file"> Using CSS rules in external file </h4>
<dl><dt> Example 4 - XHTML 1.0 Strict as <tt>text/html</tt>
</dt><dd> This example illustrates the behavior of XHTML served as <tt>text/html</tt> 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+.
</dd></dl>
<dl><dt> Example 5 - XHTML 1.0 Strict as <tt>text/xml</tt>
</dt><dd> This example illustrates the behavior of XHTML served as <tt>text/xml</tt> when CSS rules are contained in an external file. This example is supported by Netscape 7.x, Mozilla, and Opera 7 but <b>not Internet Explorer 5.5+</b>.
</dd></dl>
<dl><dt> Example 6 - XHTML 1.0 Strict as <tt>application/xhtml+xml</tt>
</dt><dd> This example illustrates the behavior of XHTML served as <tt>application/xhtml+xml</tt> when CSS rules are contained in an external file. This example is supported by Netscape 7.x, Mozilla, and by Opera 7 but <b>not Internet Explorer 5.5+</b>.
</dd></dl>
<h3 name="Recommendations"> Recommendations </h3>
<pre class="eval">This document is not yet complete.
</pre>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author(s): Bob Clary
</li><li> Last Updated Date: March 14th, 2003
</li><li> Copyright © 2001-2003 Netscape.
</li></ul>
</div>
Revert to this revision