How can I use ampersands in CSS in an XHTML document and still validate?

Question

I am working on a framework that uses the image manager to load all images from a directory outside of webroot, and this includes images used in CSS. For instance:

background: #FFF url(example.org/index.php?sect=loadimg&img=branding.jpg) top left repeat-x; 

This seems to work fine, but my xhtml syntax doesn't like using ampersand in CSS, but using & instead does not work at all. So does anyone know if it is legal to use ampersand in style sheets? If not, is there another way to execute the same image request?

Answer 1

The validator will only complain if you check it against the XHTML doctor. Undeveloped HTML characters within the <style> and <script> elements should still be considered valid in regular HTML (both 4.01 and 5).

The ideal solution is to move the CSS to an external stylesheet and enable it using <link> or @import .

If your styles should be in <style> tags, you can add CDATA sections to <style> tags:

 <style type="text/css"> /* <![CDATA[ */ /* Your CSS here */ /* ]]> */ </style> 

This will cause all special HTML characters in this section to be processed literally, and your XHTML document will be validated.

Note that CDATA partition delimiters are just <![CDATA[ and ]]> ; they are enclosed in /* CSS comments */ , so browsers do not try to interpret them as CSS.

XHTML CDATA sections are covered by the specification .