How to correctly use JavaScript and CSS in XHTML documentation

In more and more websites, the use of XHTML is replacing HTML4 at a very fast speed. However, some mainstream browsers currently do not support XHTML, and some web page makers do not understand the differences between XHTML and HTML4 enough, which makes XHTML slow in the development of WEB.

Currently, one of the main misunderstandings about XHTML is that it is another version of HTML. One fact that causes this misunderstanding is that Microsoft Internet Explorer only supports XHTML with MIME format text/html and not the recommended application/xhtml+xml format.

When an XHTML page is parsed in the MIME format of text/html, it has no difference from the HTML page, and when it is parsed in the MIME format of text/xml or application/xhtml+xml, it will comply with strict XML writing and display rules.

Contents inside style and script tags will cause some different differences when XHTML is parsed in XML format (rather than HTML format).

<script type=text/javascript>

var i = 0;

while(++i < 10){

//...

}

</script>

Note: The above sample code is not a good XHTML format because it uses not allowed tags in XHTML or XML <

Authors familiar with HTML usually understand that placing style and script tag content in comment tags will hide these contents in the browser, but some browsers cannot 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>

The above example shows how to ignore the content in the comment tag in the browser. At the same time, this example also shows the difference between the browser's content in the text/xml format and application/xhtml+xml format.

Mozilla 1.1+ / Opera 7

No CSS is applied, no JavaScript is executed

Netscape 7.0x / Mozilla 1.0.x

Not applying CSS, but executing JavaScript

Internet Explorer 5.5+

The document is not displayed. (See: https://developer.mozilla.org/Ta ... _in_XHTML_Documents )

Another problem arises when using comment tags for processing in JavaScript on XHTML page is that there will be two consecutive horizontal bars (--) in JavaScript:

<script type=text/javascript>

<!--

var i;

var sum = 0;

for (i = 10; i > 0; --i)

{

sum += i;

}

// -->

</script>

Putting the contents inside the script tag into the CDATA block can handle the problem of two consecutive bars in the comments well, but this will make it not supported by some lower versions of browsers because they cannot understand XML. Fortunately, we can comment CDATA blocks by using commenters in JavaScript to achieve compatibility.

<script type=text/javascript>

//<![CDATA[

var i = 0;

while(++i < 10)

{

// ...

}

//]]>

</script>

Don't write style and script directly in XHTML pages. A good alternative is to use external files to write CSS and JavaScript before introducing it in XHTML.

This recommendation solution looks very good. In any case, it makes the page change from text/html to application/xhtml+xml, at least in the next few years.