Proper use of CSS and JavaScript in XHTML documents

The appropriate use of CSS and javascriptxhtml™1.0 the extensible Hypertext Markup Language (Second Edition) in XHTML documents is to define XHTML in order to put HTML 4 Expands Imaging XML 1.0 applications.

XHTML is rapidly replacing HTML 4 in many sites, however, mainstream browsers are not doing enough to fully support XHTML, and web designers lack understanding of the fundamental differences between HTML 4 and XHTML, creating a growing problem on the web today.

XHTML is XML, not HTML. One of the main misconceptions about XHTML is that it's just another version of HTML. This misconception arises from the fact that Microsoft®internet Explorer only supports XHTML when files are submitted in MIME type text/html, whereas the recommended type in the standard is application/xhtml+xml.

When the MIME type of an XHTML page is submitted as text/html, it is treated as HTML by all browsers, as if XHTML is no different than HTML. However, when the MIME type of an XHTML page is submitted as Text/xml or application/xhtml+xml, it is treated as an XML document, and the design and presentation of XML are subject to strict rules.

True XHTML is an application of XML, so strict rules are also adhered to when creating XHTML. Especially:

Unhandled < and & not allowed in CDATA regions (<! cdata...>).
The annotation (<!—— ... —— >) cannot contain a double horizontal line.
The content contained in the comment (<!—— ... —— >) is ignored.
Problems in inline style and script
inline style and script tags can create several different problems when treated as XML instead of HTML.

JavaScript contains some characters that are not allowed to exist in XHTML typical JavaScript contains special characters that are not allowed to be placed outside the CDATA region in XHTML.

<script type= "Text/javascript" > var i = 0; while (++i < 10) {//...} </script> Note This example is not XHTML written in the correct format because it uses an unprocessed "<" that can only appear when it is part of an XHTML or XML tag.

Using annotations in inline style and script designers who are familiar with HTML often put inline style and script content in comments so that they can be hidden in browsers that do not support styles and scripts.

<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 < ++i) {sum = i; Alert (' sum = ' + sum '); --></script> This example illustrates that a particular browser can ignore the contents of a comment. In addition, this example shows different browsers dealing with Text/xml or application/xhtml+xml content.

Mozilla 1.1+/opera 7
You cannot use CSS, and you cannot execute JavaScript.
Netscape 7.0x/mozilla 1.0.x
You cannot use CSS, but you can do JavaScript.
Internet Explorer 5.5+
The document cannot be displayed properly.
inline style and script that contain double horizontal lines
Another problem with JavaScript being included in annotations in XHTML files is the same problem as using a double line in an XHTML annotation.

<script type= "Text/javascript" ><!--var i;  var sum = 0;  for (i = i > 0; i.) {sum = i; }//--></script> use CDATA instead of annotations
Putting JavaScript directly into CDATA Areas can create problems in browsers that do not support XML in a low version, but the JavaScript annotation (//...) Use with CDATA to solve backward-compatible problems.

<script type= "Text/javascript" >//<! [cdata[  var i = 0;  while  (++i <)   {   //... }//]]></script> Example &NBSP
  CSS rules using inline style in annotations;
Example 1-xhtml 1.0 Strict in text/html 
This example illustrates the behavior of XHTML in text/html when CSS rules contain inline and are included in annotations. This example supports Netscape 7.x,mozilla,opera 7 and Internet Explorer 5.5+, which can apply CSS rules as expected. &NBSP
Example 2-xhtml 1.0 Strict in text/xml 
This example illustrates the behavior of XHTML in Text/xml when CSS rules contain inline and when included in annotations. This example supports Netscape 7.x,mozilla,opera 7 but does not support Internet Explorer 5.5+. Note that Etscape 7.x,mozilla and opera agree that inline CSS rules included in annotations will be ignored. &NBSP
Example 3-xhtml 1.0 Strict in application/xhtml+xml 
This example illustrates when CSS rules contain inline and XHTML contained in annotations in application/xhtml +xml's behavior. This example supports Netscape 7.x,mozilla,opera 7 but does not support Internet Explorer 5.5+. Note that Etscape 7.x,mozilla and opera agree that inline CSS rules included in annotations will be ignored. &NBSP
CSS rules   using external files;
Example 4-xhtml 1.0 Strict in text/html 
This example illustrates the XHTML in text/when using CSS rules for external files The behavior of HTML. This example supports Netscape 7.x,mozilla,opera 7 and Internet Explorer 5.5+.  
Example 5-xhtml 1.0 Strict in text/xml 
This example illustrates the behavior of XHTML in Text/xml when using CSS rules for external files. This example supports Netscape 7.x,mozilla and Opera 7 but does not support Internet Explorer 5.5+. &NBSP
Example 6-xhtml 1.0 Strict in application/xhtml+xml 
This example illustrates XHTML when using CSS rules for external files in application/xhtml+ The behavior of XML. This example supports Netscape 7.x,mozilla and Opera 7 but does not support Internet Explorer 5.5+. &NBSP
It is recommended that you do not inline style or script in XHTML using an external file to include CSS rules and JavaScript to replace inline styles and scripts is the best way to create XHTML, in backward compatibility, if the MIME type of the content is from the text/ HTML will not be interrupted when it changes to Application/xhtml+xml.

This suggestion may seem more intense, but it is a problem for future XHTML, when XHTML shifts to application/xhtml+xml in text/html to a few years later.

If you just test your XHTML in text/html, then you may have problems, such as: not accurately describe the subject. Moving CSS and JavaScript to separate files is a reliable way to change the way you serve your XHTML.

Understanding HTML Compatibility Guidance for XHTML 1.0
This XHTML 1.0 HTML Compatibility Guidelines helps create XHTML document backwards compatibility in those old browsers that can't understand XML.

Note that it is a pure XHTML document and you do not need to use xml-stylesheet processing instructions, but you should use the external files that link involves to include CSS.