FAQ version Beta 0.5
Questions sur la validation, les standards, etc.
Comment encadrer les blocs de code JavaScript et CSS ?
Le contenu des éléments "script" et "style" est un peu particulier dans le sens où il n'appartient pas à proprement parler au contenu du document : il s'agit de blocs de code qui sont traités par les moteurs de script et de style appropriés (en grande majorité, JavaScript et CSS). Cette spécificité est problématique car traitée différemment en HTML et en XHTML.
POUR UN DOCTYPE HTML :
Ces éléments ont un type de contenu "CDATA" (contrairement aux autres éléments, qui ont un type de contenu "PCDATA") : le parseur analyse le contenu de l'élément comme du texte brut, jusqu'à ce qu'il rencontre les caractères "</" suivis d'une lettre (a-z, A-Z). Cela signifie entre autres que les entités (comme " ") ne sont pas prises en compte.
Il est donc nécessaire d'échapper les occurrences de "</". Par exemple :
<script type="text/javascript">
document.write("Alsacréation<strong>s<" + "/strong>");
</script>
Il est par ailleurs assez courant d'encadrer le contenu de ces éléments par des commentaires ("<!-- -->"), car cela permet d'éviter que les navigateurs qui ne connaissent pas les éléments "script" et/ou "style" affichent leur contenu. Cependant, l'utilisation de tels navigateurs est aujourd'hui extrêmement marginale.
De plus, il faut bien comprendre que les navigateurs qui connaissent les éléments "script" et "style" savent que leur type de contenu est "CDATA" et passent donc les commentaires aux moteurs de script et de style sans les interpréter. C'est pourquoi ces derniers prennent en compte cette pratique : par exemple, les moteurs JavaScript ignorent une ligne commençant par "<!--".
On écrit donc en général :
<script type="text/javascript"><!--
document.write("Alsacréation<strong>s<" + "/strong>");
//--></script>
POUR UN DOCTYPE XHTML :
En XHTML, le problème est différent, car le type de contenu des éléments "script" et "style" est "PCDATA". Leur contenu est censé être lu par le parseur comme celui de n'importe quel autre élément, ce qui nécessite d'échapper les caractères spéciaux XML. Cela n'est cependant pas le cas en pratique si le document est servi en tant que "text/html".
On se retrouve donc face à deux problèmes antagonistes : un problème d'utilisation (si les caractères spéciaux sont échappés, ils vont être interprétés tels quels par les moteurs de style et de script), et un problème de validation (si les caractères spéciaux ne sont pas échappés, le document ne validera pas). La solution la plus courante consiste à utiliser les commentaires XML, qui peuvent contenir des caractères spéciaux :
<script type="text/javascript"><!--
document.write("Alsacréation<strong>s<" + "/strong>");
//--></script>
On reste ainsi compatible avec HTML, tout en permettant la validation XHTML. Il faut cependant continuer à échapper la chaîne "</", ainsi que la chaîne "--", qui est illégale dans les commentaires XML.
-------------------
CONCLUSION :
- HTML : on peut éventuellement encadrer le bloc de code par "<!--" et "-->". Il faut échapper la chaîne "</".
- XHTML servi en tant que "text/html" : on encadre le bloc de code par "<!--" et "-->". Il faut échapper les chaînes "</" et "--". On peut également utiliser une section CDATA (voir le lien explicatif d'Openweb), mais cela ne présente pas un grand intérêt.
- XHTML servi en tant que "application/xhtml+xml" : on encadre le bloc de code avec une section CDATA ou on échappe les caractères spéciaux.
Bien entendu, le plus simple reste, lorsque c'est possible, de placer le code JavaScript et CSS dans des fichiers séparés.
POUR UN DOCTYPE HTML :
Ces éléments ont un type de contenu "CDATA" (contrairement aux autres éléments, qui ont un type de contenu "PCDATA") : le parseur analyse le contenu de l'élément comme du texte brut, jusqu'à ce qu'il rencontre les caractères "</" suivis d'une lettre (a-z, A-Z). Cela signifie entre autres que les entités (comme " ") ne sont pas prises en compte.
Il est donc nécessaire d'échapper les occurrences de "</". Par exemple :
<script type="text/javascript">
document.write("Alsacréation<strong>s<" + "/strong>");
</script>
Il est par ailleurs assez courant d'encadrer le contenu de ces éléments par des commentaires ("<!-- -->"), car cela permet d'éviter que les navigateurs qui ne connaissent pas les éléments "script" et/ou "style" affichent leur contenu. Cependant, l'utilisation de tels navigateurs est aujourd'hui extrêmement marginale.
De plus, il faut bien comprendre que les navigateurs qui connaissent les éléments "script" et "style" savent que leur type de contenu est "CDATA" et passent donc les commentaires aux moteurs de script et de style sans les interpréter. C'est pourquoi ces derniers prennent en compte cette pratique : par exemple, les moteurs JavaScript ignorent une ligne commençant par "<!--".
On écrit donc en général :
<script type="text/javascript"><!--
document.write("Alsacréation<strong>s<" + "/strong>");
//--></script>
POUR UN DOCTYPE XHTML :
En XHTML, le problème est différent, car le type de contenu des éléments "script" et "style" est "PCDATA". Leur contenu est censé être lu par le parseur comme celui de n'importe quel autre élément, ce qui nécessite d'échapper les caractères spéciaux XML. Cela n'est cependant pas le cas en pratique si le document est servi en tant que "text/html".
On se retrouve donc face à deux problèmes antagonistes : un problème d'utilisation (si les caractères spéciaux sont échappés, ils vont être interprétés tels quels par les moteurs de style et de script), et un problème de validation (si les caractères spéciaux ne sont pas échappés, le document ne validera pas). La solution la plus courante consiste à utiliser les commentaires XML, qui peuvent contenir des caractères spéciaux :
<script type="text/javascript"><!--
document.write("Alsacréation<strong>s<" + "/strong>");
//--></script>
On reste ainsi compatible avec HTML, tout en permettant la validation XHTML. Il faut cependant continuer à échapper la chaîne "</", ainsi que la chaîne "--", qui est illégale dans les commentaires XML.
-------------------
CONCLUSION :
- HTML : on peut éventuellement encadrer le bloc de code par "<!--" et "-->". Il faut échapper la chaîne "</".
- XHTML servi en tant que "text/html" : on encadre le bloc de code par "<!--" et "-->". Il faut échapper les chaînes "</" et "--". On peut également utiliser une section CDATA (voir le lien explicatif d'Openweb), mais cela ne présente pas un grand intérêt.
- XHTML servi en tant que "application/xhtml+xml" : on encadre le bloc de code avec une section CDATA ou on échappe les caractères spéciaux.
Bien entendu, le plus simple reste, lorsque c'est possible, de placer le code JavaScript et CSS dans des fichiers séparés.
Liens complémentaires