Claws, fangs, fur...

So you’ve decided to write XHtml instead of Html. And all of a sudden you realise: my in-page scripts and styles stopped working! (Or at least they stopped validating.)

Why, you ask?

Mostly because scripts and styles use characters that Html doesn’t really like, for instance the &. This will break validation and in some browsers it will prevent scripts and styles from being interpreted at all.

To solve this, the XHtml 1.0 recommendation describes three methods:

1. omit any usage of html entity references inside your scripts
   
2. move your scripts from in-line to a separate file
   
3. escape the entire script by marking it as CDATA
   

The first method changes the scripts and makes them unusable.

The second method is nice and best practice, but isn’t always useful.

The third method doesn’t work.

What?

The third method doesn’t work. At least not in any current browser I’ve tested.

Why?

Let’s see how the recommendation sees this escaping:

<script type="text/javascript">
<![CDATA[
alert('hello, world!');
]]>
</script>

Guess what? Most current browsers don’t accept the code for specifying a CDATA block inside a javascript block. So they won’t recognise the script, won’t execute it, or may generate lots of errors.

Is there a solution? Yes, there is! Remember from scripts in Html, that we used to add Html comment tags to hide the scripts from unscripted browsers? We can do the same here, with the same effect!

<script type="text/javascript">
/* <![CDATA[ */
alert("hello, world!");
/* ]]> */
</script>

Easy, no?

And we can do the exact same with our style block, too:

<style type="text/css">
/* <![CDATA[ */
html { background: black; }
/* ]]> */
</style>

Now the blocks validate and will get executed.

This method was tested in:

• Opera 9.2
  
• Firefox 2.0
  
• K-Meleon 1.1
  
• MSIE 6
  
• MSIE 7