La balise CDATA / The CDATA tag: <![CDATA[...]]>

CDATA est un acronyme qui signifie Character DATA. Le terme indique qu'une partie du fichier XML du modèle ne sera pas analysée. Ainsi, les caractères spéciaux comme <, >, les esperluettes, les quotes, etc..., ne seront pas échappés. De même que le langage spécifique à Blogger (Les balises et les expressions) ne sera pas interprété.

La syntaxe

XML

<![CDATA[

]]>

• CDATA travaille dans l'ensemble du code XML.

• Dans les thèmes, les marqueurs sont employés dans la balise d'habillage <b:skin>. Ce qui explique que l'usage du langage Blogger n'est pas autorisé dans cette section du fichier XML.

• Généralement, les marqueurs sont injectés dans des sections CSS et JS afin de faciliter l'écriture, puisque le fichier XML à la vilaine tendance d'échapper tous les caractères spéciaux.

• Les sections CDATA ne peuvent pas s'imbriquer.

CDATA et CSS

Certes, l'usage de CDATA n'est pas vitale dans une section CSS, mais il a le mérite de rendre la présentation un peu plus propre.

CSS sans CDATA

<style type='text/css'>
  .toto &gt; div::before {
    content: &quot;Hello&quot;;
  }
</style>

CSS avec CDATA

<style type='text/css'>
  /* <![CDATA[ */
    .toto > div::before {
      content: "Hello";
    }
  /* ]]> */
</style>

Dans une section CSS, les marqueurs CDATA doivent être encadrés par ces tags de commentaires : /* */

CDATA et JS

CDATA s'avère être beaucoup plus utile dans une section javascript, surtout si vous écrivez d'abord vos fichiers dans un éditeur externe comme Notepad++ ou autres et que vous en faite un copié-collé dans l'éditeur de Blogger.
En effet, l'éditeur de Blogger n'acceptera pas votre javascript si il contient des caractères spéciaux qui ne sont pas échappés.
Donc, pour que votre code soit accepté, vous devez injecter des marqueurs CDATA afin que le contenu de la section ne soit pas analysé.

Javascript sans CDATA

<script type='text/javascript'>
  var toto = 10;
  if (toto &lt; 5 ) {
    document.write(&quot;<div>Hello</div>&quot;);
  }
</script>

Javascript avec CDATA

<script type='text/javascript'>
  // <![CDATA[
    var toto = 10;
    if (toto < 5 ) {
      document.write("<div>Hello</div>");
    }
  // ]]>
</script>

Dans une section Javascript, les marqueurs CDATA doivent être précédés du tag de commentaires : //

CDATA et les balises de réglages des gadgets

Les balises <b:widget-setting> contiennent des valeurs dont certains caractères peuvent être échappés. Si on n'y prend pas garde, cela peut entrainer quelques anomalies dans le fonctionnement des gadgets. Encore une fois, CDATA permet d'éviter ces problèmes.

Valeur d'un réglage sans CDATA

<b:widget-setting name='homeTitle'>
  L'accueil
</b:widget-setting>

Sans les marqueurs CDATA la valeur deviendrai : L'accueil.

Valeur d'un réglage avec CDATA

<b:widget-setting name='homeTitle'>
  <![CDATA[L'accueil]]>
</b:widget-setting>

Avec les marqueurs CDATA la valeur restera : L'accueil.

Mais heureusement pour vous, Blogger a automatisé l'ajout de ce marqueur. Donc, vous ne devez pas trop vous en soucier.

Les autres balises

• <b:attr>
• <b:class>
• <b:comment>
• <b:defaultmarkups>
<b:defaultmarkup>
• <b:eval>
• <b:if>
<b:elseif>
<b:else>
• <b:includable>
<b:include>
• <b:loop>
• <b:message>
<b:param>
• <b:section>
• <b:skin>
<b:template-skin>
• <b:switch>
<b:case>
<b:default>
• <b:tag>
• <b:template-script>
• <b:widget>
• <b:widget-settings>
<b:widget-setting>
• <b:with>
• <data:foo>
• <![CDATA[]]>

Retourner à l'introduction