Outbook

Documento basado en Properly Using CSS and JavaScript in XHTML Documents (Mozilla Developer Center), distribuido bajo licencia Creative Commons Reconocimiento-Compartir igual.

XHTML es XML, no HTML

Una de las principales confusiones con XHTML es considerarlo como una nueva versión de HTML, cuando en realidad se trata de XML.

XHTML debe llevar el tipo MIME text/xml o application/xhtml+xml.

XHTML tiene algunas peculiaridades:

Los caracteres < y & no están permitidos, salvo dentro de secciones CDATA: <!CDATA...>.
En los comentarios () no deben incluirse guiones dobles: —.
El contenido incluido dentro de los comentarios puede ser ignorado.

Problemas con las etiquetas `style` y `script`

Las etiquetas style y script dentro del propio documento XHTML pueden causar problemas cuando es tratado como XML en lugar de HTML.

Javascript contiene caracteres no permitidos en XHTML

El lenguaje Javascript suele contener caracteres que no pueden existir en XHTML fuera de las secciones CDATA:

<script type="text/javascript">
var i = 0;
while (++i < 10) {      // ...    }
</script>

El ejemplo anterior no es XHTML correcto, puesto que contiene el caracter <, que solo es permitido para el marcado en XHTML o XML.

Uso de comentarios en las etiquetas `style` y `script`

Los desarrolladores que están familiarizados con HTML, habitualmente insertan esos estilos y scripts dentro de comentarios con el objetivo de ocultar sus contenidos a los navegadores que no los entiendan:

<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>

Resultados en diferentes navegadores:

Mozilla 1.1 y Opera 7: no se aplican el CSS ni el Javascript.
Netscape 7.0x y Mozilla 1.0.x: no aplican el CSS, pero si el Javascript.
Internet Explorer 5.5+: no puede visualizar el documento.

Etiquetas style y script y guiones dobles

Este código causará problemas, debido a los guiones dobles dentro de los comentarios:

<script type="text/javascript">
<!--
var i;
var sum = 0;
for (i = 10; i > 0; --i)    {  sum += i;    }  
// --> 
</script>

Utilización de CDATA en lugar de comentarios

La forma apropiada para introducir un script es dentro de secciones CDATA, pero esto puede causar problemas en navegadores antiguos que no son capaces de entender XML. Sin embargo, es posible combinar comentarios con secciones CDATA, para asegurar la compatibilidad hacia atrás:

<script type="text/javascript">
//<![CDATA[
var i = 0;
while  (++i < 10)    {      // ...    }
//]]>
</script>

Ejemplos

Utilización de reglas CSS en la etiqueta `style` con comentarios

Ejemplo 1 – XHTML 1.0 Strict como text/html: Este ejemplo muestra el comportamiento del XHTML servido como text/html cuando las reglas CSS están contenidas dentro del documento y entre comentarios. Este ejemplo es soportado por Netscape 7.x, Mozilla, Opera 7 e Internet Explorer 5.5+, los cuales aplican las reglas CSS adecuadamente.

Ejemplo – XHTML 1.0 Strict como text/xml: Este ejemplo muestra la misma situación que el anterior con la diferencia de que el XHTML se sirve como text/xml. En este caso Internet Explorer 5.5+ falla, y Netscape 7.x, Opera 7 y Mozilla consideran que el contenido que hay dentro de los comentarios ha de ser ignorado.

Example 3 – XHTML 1.0 Strict como application/xhtml+xml: Este ejemplo muestra la misma situación que los anteriores con la diferencia de que el XHTML se sirve como application/xhtml+xml . Los navegadores se comportan de la misma forma que en el ejemplo 2.

Utilización de reglas CSS en un archivo externo

Ejemplo 4 – XHTML 1.0 Strict como text/html: Este ejemplo muestra el comportamiento del XHTML servido como text/html y con las reglas CSS en un archivo externo. Este ejemplo es soportado por Netscape 7.x, Mozilla, Opera 7 e Internet Explorer 5.5+.

Ejemplo 5 – XHTML 1.0 Strict como text/xml: Este ejemplo muestra el comportamiento del XHTML servido como text/xml con las reglas CSS en un archivo externo. Este ejemplo es soportado por Netscape 7.x, Mozilla, y Opera 7 pero no porInternet Explorer 5.5+.

Ejemplo 6 – XHTML 1.0 Strict como application/xhtml+xml: Este ejemplo muestra el comportamiento del XHTML servido como application/xhtml+xml con las reglas CSS en un archivo externo. Este ejemplo es soportado por Netscape 7.x, Mozilla, y Opera 7 pero no por Internet Explorer 5.5+.

Recomendaciones

No usar etiquetas `script` o `style` dentro de XHTML

La mejor forma de evitar el uso de estas etiquetas es la utilización de CSS y Javascript contenidos en archivos externos, de forma que no importará si el documento XHTML es servido como text/html, text/xml o application/xhtml+xml.

Seguir las pautas de compatibilidad de XHTML 1.0 con HTML

Las pautas de compatibilidad de XHTML 1.0 con HTML ayudarán a consegir documentos XHTML compatibles con navegadores antiguos sin soporte de XML.