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: 63897
  • Created:
  • Creator: XmlGuru
  • Is current revision? No
  • Comment /* Use of Comments Inside Inline <tt>style</tt> and <tt>script</tt> */

Revision Content

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{{mediawiki.external(' ... ')}}]></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 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 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. [See {{mediawiki.external('Discussion')}} of this ascertation. - XmlGuru]

Inline <tt>style</tt> and <tt>script</tt> 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 (<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

Do not use inline <tt>style</tt> or <tt>script</tt> in XHTML

Replacing inline <tt>style</tt> and <tt>script</tt> 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 <tt>text/html</tt> to <tt>application/xhtml+xml</tt>.

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 <tt>text/html</tt> to <tt>application/xhtml+xml</tt> occurs in the next few years.

If you only test your XHTML when it is deployed as <tt>text/html</tt>, 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 <tt>link</tt> to reference external files containing CSS.

Original Document Information

  • Author(s): Bob Clary
  • Last Updated Date: March 14th, 2003
  • Copyright © 2001-2003 Netscape.
{{ wiki.languages( { "pl": "pl/Poprawne_zastosowanie_CSS_i_JavaScript_w_dokumentach_XHTML" } ) }}

Revision Source

<p>
</p><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{{mediawiki.external(' ... ')}}]&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 <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Problem_1">example</a> 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 <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Problem_2">example</a> 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. [See {{mediawiki.external('Discussion')}} of this ascertation. - <a href="User:XmlGuru">XmlGuru</a>]
</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 <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Problem_3">problem</a> 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> <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_1">Example 1</a> - XHTML 1.0 Strict as <tt>text/html</tt>
</dt><dd> This <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_1">example</a> 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> <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_2">Example 2</a> - XHTML 1.0 Strict as <tt>text/xml</tt>
</dt><dd> This <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_2">example</a> 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> <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_3">Example 3</a> - XHTML 1.0 Strict as <tt>application/xhtml+xml</tt>
</dt><dd> This <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_3">example</a> 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> <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_4">Example 4</a> - XHTML 1.0 Strict as <tt>text/html</tt>
</dt><dd> This <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_4">example</a> 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> <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_5">Example 5</a> - XHTML 1.0 Strict as <tt>text/xml</tt>
</dt><dd> This <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_5">example</a> 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> <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_6">Example 6</a> - XHTML 1.0 Strict as <tt>application/xhtml+xml</tt>
</dt><dd> This <a href="en/Properly_Using_CSS_and_JavaScript_in_XHTML_Documents/Examples#Example_6">example</a> 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>
<h4 name="Do_not_use_inline_style_or_script_in_XHTML"> Do not use inline <tt>style</tt> or <tt>script</tt> in XHTML </h4>
<p>Replacing inline <tt>style</tt> and <tt>script</tt> 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 <tt>text/html</tt> to <tt>application/xhtml+xml</tt>.
</p><p>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 <tt>text/html</tt> to <tt>application/xhtml+xml</tt> occurs in the next few years.
</p><p>If you only test your XHTML when it is deployed as <tt>text/html</tt>, then you <i>may</i> be introducing problems such as described in this article without realizing it. Moving CSS and JavaScript into separate files is the <i>safe</i> approach with regard to changes in how your XHTML is served.
</p>
<h4 name="Follow_the_XHTML_1.0_HTML_Compatibility_Guidelines"> Follow the XHTML 1.0 HTML Compatibility Guidelines </h4>
<p>The XHTML 1.0 <a class="external" href="http://www.w3.org/TR/xhtml1/#guidelines">HTML Compatibility Guidelines</a> help make XHTML documents backwardly compatible with older user agents which do not understand XML.
</p><p>Please note that for pure XHTML documents, you do not need to use the xml-stylesheet processing instruction, but should instead use <tt>link</tt> to reference external files containing CSS.
</p>
<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>
{{ wiki.languages( { "pl": "pl/Poprawne_zastosowanie_CSS_i_JavaScript_w_dokumentach_XHTML" } ) }}
Revert to this revision