How to declare JavaScript and CSS XHTML-compatible?

Question

Hi! I'm wondering how to declare JavaScript code within a CDATA section so that it is compatible with XHTML. Which method is correct/recommended?

Method 1:

<script type="text/javascript">
// <![CDATA[
CODE
// ]]>
</script>

Method 2:

<script type="text/javascript">
/* <![CDATA[ */
CODE
/* ]]> */
</script>

Is the second one also suitable for inline CSS?

And, is it possible/does it make sense to add some encoding declaration here like

<script type="text/javascript" charset="utf-8">
...
<style type="text/css" media="screen" charset="utf-8">
...

or

<script type="text/javascript">
@charset "utf-8";
...
<style type="text/css" media="screen">
@charset "utf-8";
...

Answer 1

I'm used to use this and never get trouble:

<script type="text/javascript" charset="utf-8">
...
</script
<style type="text/css" media="screen" charset="utf-8">
...
</style>

Answer 2

Which method is correct/recommended?

Either are equally good.

Is the second one also suitable for inline CSS?

Yes.

However, you only need to worry about putting script and style blocks in a <![CDATA[ section when you want to include the characters < or & in the block. You'll almost never use them in CSS.

You might use them in JavaScript, but it's generally better to avoid the issue by putting any significant amount of code in external scripts where it belongs. Inline script blocks tend to be better for putting data and script-invocation calls in, which rarely need to use < or & (except in string literal values, in which case there's an argument for encoding them to eg. \x3C instead).

And, is it possible/does it make sense to add some encoding declaration here

No. The charset="..." attribute only has any meaning for external files (and doesn't exist on <style> since that is never an external file). Internal content has already been decoded from bytes to characters at the same time as the rest of the containing document, so charset is meaningless by this point.

In any case, not all browsers pay any attention to the <script charset> attribute, so you have to make the encoding of scripts match the encoding of the page that includes them. Which makes charset="..." quite redundant.

@charset "utf-8"; is OK in external style sheets, but you almost never need non-ASCII characters in stylesheets so it's unusual to see it. @charset is not valid in JavaScript.

Answer 3

This depends on how you're serving your XHTML.

If you're serving your XHTML as XHTML, using the following HTTP header...

Content-Type:application/xhtml+xml

... then all you need is a CDATA section with the beginning and end commented out; just like you did.

However, if you are serving as HTML...

Content-Type:text/html

Things get a little more complicated. You should read the article Sending XHTML as text/html Considered Harmful but also form your own opinion on the matter; whether or not serving XHTML as text/html is really harmful is debated frequently; for example, Elliote Rusty Harold (author of the book Refactoring HTML which I highly recommend) disagrees.