Need help understanding <![CDATA[

HTML & CSS
1

I’m experimenting with the ADxMenu - which seems to be pretty nice. The author includes all of the styles - including a special set of rules for IE - in the head of the document with style tags. I want to put all styles in their own stylesheets and link to them from the head of the main document. It was easy for most of it, but I wanted to use a conditional rule and put the IE styles in a separate IE stylesheet and there’s some stuff in there I don’t understand. Specifically, the code goes like this:


<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/

 (then all the styles go in here)

/*]]>*/
</style>

<script type="text/javascript" src="_scripts/ADxMenu.js"></script>
<![endif]-->

I think I change the first part to something like:


<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, tv, projection" href="_styles/ie.css" />
<![endif]-->

What I don’t know is what to do with the

/<![CDATA[/

/]]>/ (which, I assume, is the end tag for the CDATA)

and also whether to include the Javascript within the conditional statement. Do I even need the CDATA stuff? If so, does it stay in the HTML or go into the CSS file? If it stays in the HTML, it seems like there won’t be anything between the opening and closing CDATA tags so it seems pointless. Here’s what I come up with by extracting only the styles to an external stylesheet - it just plain looks wrong:


<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, tv, projection" href="_styles/ie.css" />
/*<![CDATA[*/

/*]]>*/
<script type="text/javascript" src="_scripts/ADxMenu.js"></script>
<![endif]-->

Help?

2

Forgot to reply to this part

Are you sure that works in Internet Explorer? IE can process HTML and so if that is actually valid HTML then IE should be able to process it correctly.

It’s not valid HTML, since it’s lacking a doctype and a title. However, that’s besides the point. Even if it was valid, it doesn’t follow IE suddenly flawlessly supports javascript, the DOM and SVG. IE8 and below don’t support createElementNS, and also don’t support SVG.

I haven’t tested, but I think that it works in IE9 preview, however.

3

I already explained it: “innerHTML implies the namespace declarations from the element you set it on (and its ancestors), although you can also set xmlns explicitly.”

Here’s the spec: http://www.whatwg.org/specs/web-apps/current-work/complete/apis-in-html-documents.html#dom-innerhtml - if you follow the xref to http://www.whatwg.org/specs/web-apps/current-work/complete/the-xhtml-syntax.html#xml-fragment-parsing-algorithm it reads

If there is a context element, feed the parser just created the string corresponding to the start tag of that element, declaring all the namespace prefixes that are in scope on that element in the DOM, as well as declaring the default namespace (if any) that is in scope on that element in the DOM.

A namespace prefix is in scope if the DOM Core lookupNamespaceURI() method on the element would return a non-null value for that prefix.

The default namespace is the namespace for which the DOM Core isDefaultNamespace() method on the element would return true.

SVG elements don’t have an innerHTML property, so you can’t use it on SVG elements. However, you can use “<svg xmlns='…” in innerHTML, which will create an SVG element.

4

You can use any doctype you want in XHTML5, or none. (Recall that e.g. XSLT is also doctypeless but is still XML. Also SVG 1.2 doesn’t specify any doctype.)

5

Text. The thing about CDATA sections is that the ‘special’ characters in HTML lose their special meaning. For instance, characters like ‘<’ and ‘&’ can be used without escaping. That makes CDATA sections useful for showing examples of HTML or XML code, for instance.

<pre><code><![CDATA[<foo>
  <bar>An example of XML markup.</bar>
</foo>]]>[/<code></pre>
6

Are you sure that works in Internet Explorer? IE can process HTML and so if that is actually valid HTML then IE should be able to process it correctly.

How do you specify the namespace when you use innerHTML. Suppose I wanted to update the svg instead of the xhtml, how does it know which one to update?

again, how does it know which namespace I want to update?

7

So that means that XHTML5 is also SGML since XML is SGML and therefore is allowed to have an SGML doctype on the front that links to the appropriate SGML specification.

Where can I find a copy of what the XHTML 5 SGML full doctype looks like?

8

What does CDATA-section contains? I’m glad I found this site, post are really helpful and informative. I am not a techy person, so this site really helped me understand these stuffs better.

9

FirstInternation:
http://en.wikipedia.org/wiki/CDATA offered only in English, German, Italian and Russian unfortunately.

This page: http://dorward.me.uk/www/comments-cdata/ has a sort of historical explanation in English. I think this article pretty much explains why CDATA matters to a web developer.

10

I’m sorry but I don’t quit understand the topic that is being discussed in this forum…But I am interested into knowing some information about the topic.

11

innerHTML and createElement work fine in XHTML. (innerHTML in both HTML and XHTML is defined in HTML5. The way createElement is defined in DOM2 Core and DOM3 Core is a lie.)

createElementNS works fine in HTML.

12

I’m glad that I have stumbled on this page. I have been trying to post question about this application. and i couldn’t get any answer to any one. I was searching the net until one of my friend told me about this cool site. Thank.

13

createElementNS in HTML

data:text/html,<body><script>var ns='http://www.w3.org/2000/svg';var s=document.createElementNS(ns,'svg');s.setAttribute('viewBox','-1 -1 2 2');var c=document.createElementNS(ns,'circle');c.setAttribute('r','1');s.appendChild(c);document.body.appendChild(s);</script>

innerHTML in XHTML

data:application/xhtml+xml,<html xmlns='http://www.w3.org/1999/xhtml'><head/><body><script>document.body.innerHTML='<pre>hello</pre>'</script></body></html>

createElement in XHTML

data:application/xhtml+xml,<html xmlns='http://www.w3.org/1999/xhtml'><head/><body><script>var p=document.createElement('pre');p.textContent='hello';document.body.appendChild(p);</script></body></html>
14

innerHTML implies the namespace declarations from the element you set it on (and its ancestors), although you can also set xmlns explicitly. createElement just uses the XHTML namespace.

Same as in XHTML – creates an element with the specified namespace.

Sure.

I don’t follow. They work fine. createElement only handles one namespace, but that’s fine if it’s the namespace you want. The HTML DOM handles namespaces fine (you can create and insert an SVG fragment in an HTML document with createElementNS).

Don’t be silly. XHTML5 is XML.

15

so how do you pecify the namespace you are referencing when using innerHTML or createElement with XHTML?

what does HTML do with the namespace when you use createElementNS?

In neither case does using those options with those markup languages make any sense. They may work in that they don’t crash but since they either don’t provide for entering all of the ingformation required or allow information to be specified that can’t be handled they do not work in any meaningful practical sense.

Also since HTML 5 is HTML only and doesn’t have an XHTML equivalent (since it isn’t SGML and therefore can’t be XML) those parts of the specification obviously need fixing before it will make any sense.

16

A CDATA-section is normally used for content that contains a lot of ‘special’ characters (like ‘<’ and ‘&’) that normally need to be escaped. Most browsers only support CDATA-sections for XML documents (including XHTML served as real XHTML, but not pretend-XHTML served as HTML). As far as I know, Opera is the only browser that supports CDATA-sections in HTML.

Using internal style sheets (<style> tags) or on-page JavaScript is rarely a good idea. If you have an XHTML doctype declaration it’s an extremely bad idea, especially if you’re using pretend-XHTML. It’s much better to use external CSS style sheets and JavaScript files, and then you don’t have to worry about CDATA-sections.

17

That CDATA tag is commented out so that the XHTML validator sees it but the web browsers do not. That is the way to get inline JavaScript containing characters that the XHTML validator will choke on past the XHTML validator and still allow the page to be served as HTML rather than XHTML. If you are using an HTML doctype rather than trying to pretend that your page is XHTML then just remove the entire comments. If you are using real XHTML then remove the /* and */ from around each and leave the CDATA tag in place or alternatively move the JavaScript into an external file where you can then remove the complete comment regardless of whether you are using HTML or XHTML.

18

I don’t understand what “pretend XHTML” refers to. I’m using XHTML 1.0 Transitional - is that “pretend” because it’s not Strict?

Thanks for the explanations and yes - I’d like to use external js files as well. I’ve actually got two js files that are only needed by IE6. I’m still not clear how I put those in the conditional comments - with or without the CDATA part? So with the XHTML transitional doctype, is this right or do I need the CDATA stuff? And if I do, where does it go?

<!–[if lte IE 6]>
<link rel=“stylesheet” type=“text/css” media=“screen, tv, projection” href=“_styles/ie.css” />
<script defer type=“text/javascript” src=“_scripts/pngfix.js”></script>
<script defer type=“text/javascript” src=“_scripts/ADxMenu.js”></script>
<![endif]–>

19

Pretend- to claim that or act as if something is different from what it actually is, often incorrectly and knowingly.

The xhtml you oftenly hear about these days is really just html. Just because you are using a xhtml DOCTYPE does not mean it is real xhtml.

It is like saying, ‘since I bought this baseball hat, I can play baseball’.

20

If you are using a MIME type of application/xhtml+xml then you are using real XHTML. If you are using a MIME type of text/html with an XHTML doctype then you are using HTML and pretending it is XHTML. The MIME type defines the type of document you are creating, not the doctype.

The easiest way to tell which you are using is to view the page in Internet Explorer. IE can’t handle XHTML and so if the page is served as real XHTML then it will offer the file for download instead of displaying it (at least in IE8 and earlier and Microsoft have not announced any intention of supporting XHTML in IE9 so it probably wont support it either)…

Another way to tell is to look at your JavaScript. If your code includes such things as document.write, innerHTML or document.createElement and the code works then it is HTML. If is uses document.createElementNS then it is XHTML. You must specify the namespace when using DOM commands with XHTML and the DOM commands are the only way to interact with XHTML.