Suitable Use of CSS and Javascript in XHTML documents

Suitable Use of CSS and Javascript in XHTML documents XHTML 1.0 the Extensible hypertext markup language (second edition)XHTML is defined to apply HTML 4 extensions to the same application as XML 1.0.

In many websites, XHTML is rapidly replacing HTML 4. However, mainstream browsers do not fully support XHTML, and web designers do not understand the basic differences between HTML 4 and XHTML, this has brought about an ever-expanding problem on today's networks.

XHTML is XML, not html

The main misunderstanding about XHTML is that it is just another version of HTML. This misunderstanding arises from the fact that Microsoft Internet Explorer only supports XHTML when the file is submitted in text/html as the MIME type. The recommended type in the standard isApplication/XHTML + XML.

When the MIME type of An XHTML page is submittedText/htmlIt is treated as HTML by all browsers, as if XHTML is no different from HTML. However, when the MIME type of An XHTML page is submittedText/XMLOrApplication/XHTML + XMLIt will be processed as an XML document, and the design and display of XML must comply with strict rules.

The real XHTML is an XML application. Therefore, strict rules must be followed when creating XHTML. In particular:

1. Unprocessed<And&Cannot appear in CDATA region (<! CDATA...>.
2. Note (<! --... -->.
3. Included in the comment (<! --... -->Is ignored.

Embedded StyleAnd ScriptProblems in

When processed as XML rather than HTML, embedded style and script tags may cause several different problems.

Javascript contains characters that are not allowed to exist in XHTML.

Typical JavaScript contains special characters that are not allowed in the XHTML outside the CDATA area.

<script type="text/javascript">  var i = 0;    while (++i < 10)  {    // ...  }</script>

Note ThisExampleInvalid XHTML written in the correct formatBecause the unprocessed "<" is used, it can only appear when it is marked as part of XHTML or XML.

Embedded StyleAnd ScriptUsing annotations

Designers familiar with HTML usually embedStyleAndScriptAdd the content to the comment so that you can hide the content 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 < 10; ++i)  {    sum += i;  }  alert('sum = ' + sum); // --></script>

ThisExampleThe example shows that a specific browser can ignore the content in the comment. In addition, this example shows that different browsers are processingText/XMLOrApplication/XHTML + XMLContent.

Mozilla 1.1 +/opera 7

You cannot use CSS or execute JavaScript.

Netscape 7.0x/Mozilla 1.0.x

CSS cannot be used, but javascript can be executed.

Internet Explorer 5.5 +

The document cannot be displayed normally.

Embedded with dual horizontal lines StyleAnd Script

Another method used to include Javascript in the comments of the XHTML FileProblem, Which is the same as the problem caused by the use of dual crosslines in XHTML annotations.

<script type="text/javascript"><!--  var i;  var sum = 0;  for (i = 10; i > 0; --i)  {    sum += i;  }// --></script>

Use CDATA to replace comments

Adding JavaScript directly to the CDATA area will cause problems in browsers that do not support XML in earlier versions. However, you can annotate JavaScript (//......) Using it with CDATA can solve the problem of backward compatibility.

<script type="text/javascript"> //<![CDATA[  var i = 0;  while  (++i < 10)  {    // ...  } //]]></script>

Example

Use embedded in annotations StyleCSS rules

Example 1-XHTML 1.0 strict in Text/html

This ExampleFor example, when CSS rules include inner and include in comments, the XHTML in Text/html. This example supports Netscape 7.x, Mozilla, opera 7, and Internet Explorer 5.5 +, which can apply CSS rules as expected.

Example 2-XHTML 1.0 strict in Text/XML

This ExampleFor example, when CSS rules include inner and include in comments, the XHTML in Text/XML. This example supports Netscape 7.x, Mozilla, opera 7, Internet Explorer 5.5 + is not supported. Note that etscape 7.x, Mozilla and opera agree that inline CSS rules included in comments will be ignored.

Example 3-XHTML 1.0 strict in Application/XHTML + XML

This ExampleFor example, when CSS rules include inner and include in comments, the XHTML in Application/XHTML + XML. This example supports Netscape 7.x, Mozilla, opera 7, Internet Explorer 5.5 + is not supported. Note that etscape 7.x, Mozilla and opera agree that inline CSS rules included in comments will be ignored.

Use CSS rules for external files

Example 4-XHTML 1.0 strict in Text/html

This ExampleFor example, when the CSS rules of external files are used Text/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 ExampleFor example, when the CSS rules of external files are used Text/XML. This example supports Netscape 7.x, Mozilla, and opera 7, but does not. Internet Explorer 5.5 + is not supported.

Example 6-XHTML 1.0 strict in Application/XHTML + XML

This ExampleFor example, when the CSS rules of external files are used Application/XHTML + XML. This example supports Netscape 7.x, Mozilla, and opera 7, but does not. Internet Explorer 5.5 + is not supported.

Suggestions

Do not inline in XHTML StyleOr Script

Replacing inline styles and scripts with external files containing CSS rules and JavaScript is the best way to create XHTML. In backward compatibility mode, if the MIME type of content isText/htmlDirectionApplication/XHTML + XMLChanges will not be interrupted.

This suggestion may seem more intense. However, it is a problem for XHTML to be planned in the future.Text/htmlDirectionApplication/XHTML + XMLTransfer occurred several years later.

If you only test your XHTML inText/htmlFor example, you cannot accurately describe the topic. Moving CSS and JavaScript to a separate file is a reliable way to change your XHTML service method.

Understand the HTML Compatibility Guide of XHTML 1.0

This XHTML 1.0HTML compatibility guidelinesIt helps to create XHTML documents for backward compatibility in old browsers that do not understand XML.

Note that it is a pure XHTML document. You do not need to use XML-stylesheet for processing instructions, but you should useLinkThe external files involved include CSS.