El uso de CDATA

CDATA Blogger

El termino CDATA en xml significa datos de caracteres (Character DATA), de ahí su nombre. Su función es indicar una parte del archivo XML que no sera tomado en cuenta por el modelo xml. De esta forma los caracteres especiales (<, >, &, ", etc) se mantienen tal cual. También evita que el lenguaje manejado por Blogger se interprete.


CDATA

Comúnmente se utiliza para insertar código css y js de forma más limpia. Si se inserta en el cuerpo xml el termino se convierte en un comentario, por lo tanto no se puede usar para escapar de los caracteres especiales. Su sintaxis es la siguiente:


<![CDATA[ ]]>

CSS

No se producen errores al guardar css ya que los caracteres especiales se reemplazan de forma automática. Si el termino CDATA es utilizado dentro de etiquetas <style/>, es necesario usar comentarios:


<style type='text/css'>
/*<![CDATA[*/

/*]]>*/</style>

En el siguiente ejemplo encerramos nuestro código css, volviendolo más limpio y fácil de leer ya que mantiene todos los caracteres especiales:


<style type='text/css'>
/*<![CDATA[*/
.custom > abbr {
   background-image: url("../figure.png");
   font-family: "Arial",Helvetica;
}
/*]]>*/</style>

Javascript

CDATA es especialmente útil en javascript, ya que el código suele contener caracteres especiales que no validos en xml, lo que evita guardar el documento. Para usar CDATA se debe encerrar entre comentarios de javascript:


<script type='text/javascript'>
//<![CDATA[

//]]></script>

En el siguiente ejemplo encerramos nuestro código javascript, lo que permite mantener caracteres especiales y evita errores al momento de guardar los cambios:


<script type='text/javascript'>
//<![CDATA[
function hasClass(el, className) {
  if (el.classList)
    return el.classList.contains(className)
  else
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
}
//]]></script>

Esta entrada se complementó gracias a la ayuda de Blogger Code, si quieres aprender mas sobre CDATA te invito a leer Character DATA.