Micaela 5 de enero de 2010 a las 09.05
   Imprimir artículo
elWebmaster.com

CSS: C贸mo utilizar caracteres escapados en tu c贸digo


cssUna “secuencia de caracteres escapados” se le llama a una secuencia de caracteres utilizada para representar de forma colectiva un car谩cter diferente.

Independientemente de d贸nde aparecen, los valores de string en el CSS se comportan de manera similar. Lo m谩s importante para recordar acerca de ellos es que no son HTML.

Esto significa, por ejemplo, que la inserci贸n de llaves, sin escaparlos como referencias a entidades HTML (<y>) es perfectamente legal. En otras palabras, la regla:

[CSS]
#example:before { content: “3 < 5”; }
[/CSS]

Resultar谩 en un pseudo-elemento cuyo contenido son los cinco caracteres (incluyendo espacios) y no una etiqueta HTML de comienzo rota. De forma similar, esta regla:

[CSS]
#example:before { content: “<“; }
[/CSS]

Resulta en un pseudo-elemento cuyo contenido son los cuatro caracteres &lt; y no un 铆cono de “menor a”. Esto significa que el car谩cter < y el & no son tratados de forma especial por los analizadores de strings CSS, a pesar de que sean caracteres con significado especial en lenguajes derivados de SGML como el HTML y el XML.

Dentro de los strings CSS, el 煤nico car谩cter con sentido especial es la barra (\). Este car谩cter delimita el comienzo de una secuencia de escape, de forma bastante similar a lo que el ampersand (&) hace en el c贸digo HTML.

Las secuencias de escape son 煤tiles porque permiten a los autores de hojas de estilo representar los caracteres que normalmente ser铆an ignorados o interpretados de manera diferente por las reglas tradicionales de an谩lisis de CSS. El ejemplo m谩s evidente de esto es la representaci贸n de una barra invertida en un string CSS. Al principio, podr铆as pensar que la siguiente regla CSS producir铆a una barra invertida al comienzo de cada p谩rrafo, pero estar铆as equivocado.

  1. p:before { content: "\"; }

Cuando un analizador CSS lee la declaraci贸n en esta regla, considera que la barra invertida es el comienzo de una secuencia de escape, por lo que lo ignora. A continuaci贸n, se encuentra con una cita doble y dado que este car谩cter no es un componente legal en una secuencia de escape, lo reconoce como el final de la cadena de valor y regresa. El resultado es una cadena vac铆a, sin barra invertida: ” “.
Para obtener la aparici贸n de una barra invertida, por lo tanto, necesitamos “escapar” de ella, o “deshacer” su significado especial. Esto es bastante simple. Nos limitamos a anteponer la barra invertida con otra, como esta:

  1. p:before { content: "\\"; }

Esta vez, cuando un analizador CSS lee la declaraci贸n en la norma, se encuentra con la primera barra diagonal, cambia a su “modo de secuencia de escape”, encuentra una barra invertida (la segunda que escribimos) como parte del valor del string en an谩lisis, y luego encuentra el final del valor por medio de las comillas. El resultado es lo que busc谩bamos originalmente, y el valor que devuelve el analizador de CSS es una barra invertida: “\”. Tengan en cuenta que el CSS no hace distinci贸n entre cadenas de comillas simples o dobles, por lo que en cualquier caso, dos barras invertidas son necesarias en el c贸digo para dar salida a una.

Una situaci贸n similar ocurre si se desea producir una cita doble dentro de una cadena entre comillas dobles. En lugar de escribir “””, deber铆as escribir” \ “”; para decirle al analizador CSS que trate a la segunda cita como parte de un valor en lugar de c贸mo si fuera el delimitador del final del valor. Como alternativa, puedes utilizar comillas sencillas como el delimitador del string (contenido:'”‘;).

Despu茅s de la barra invertida de partida, solamente los d铆gitos hexadecimales (n煤meros del 0 al 9 y las letras A a la F) pueden aparecer dentro de una secuencia de escape. En las secuencias de escape, estas cifras siempre son referencia a puntos de c贸digo Unicode, independientemente del conjunto de caracteres utilizados en la hoja de estilo en s铆. Como resultado, es posible representar los caracteres de manera uniforme en una hoja de estilo que no son posibles de incrustar directamente dentro de la hoja de estilo en s铆.
Los caracteres acentuados (como la “E” en 茅ste o caf茅) son un ejemplo de una clase de caracteres a los que habr铆a que darle escape en una cadena de CSS si la hoja de estilos estuviera codificada en formato ASCII en lugar de, por ejemplo, UTF-8.

Una aplicaci贸n 煤til para esto es integrar saltos de l铆nea en el contenido generado. El punto de c贸digo Unicode para el car谩cter de nueva l铆nea es U+00.000 A. En una cadena de CSS, esto se puede escribir como \00000A. De una manera similar a la que la forma hexagonal de un triplete para los valores de color se puede acortar, las secuencias de escape tambi茅n se pueden acortar quitando los ceros a la izquierda desde el punto de c贸digo, as铆 que otra manera de escribir una nueva l铆nea es \A. He aqu铆 una regla CSS que separa las dos palabras “Hello” y “world” con una nueva l铆nea, colocando cada una en su propia l铆nea.

  1. #example:before { content: "Hello\Aworld."; }

Algo a tener cuidado al usar las secuencias de escape en strings de CSS es poner fin a la secuencia de escape en el que se proponen. Observen lo que ocurre si nuestro texto “Hello world” ha cambiado a “Hello boy”.

  1. #example:before { content: "Hello\Aboy."; }

Ahora, en lugar de una nueva l铆nea (punto de c贸digo \A), nuestra secuencia de escape es una marca de citaci贸n de doble 谩ngulo que apunte a la izquierda, o (punto de c贸digo \ AB). Nuestro contenido generado ahora dice “Hello 芦 Oy”. Esto sucede porque la “B” en el “boy”se interpreta como un d铆gito hexadecimal. La secuencia de escape termina en el siguiente car谩cter, la “O”, ya que la letra no es tambi茅n como un d铆gito.
De forma expl铆cita, se puede concluir una secuencia de escape en una de dos maneras. En primer lugar, se puede especificar la secuencia en su totalidad utilizando los seis d铆gitos hexadecimales (incluyendo los ceros iniciales, si los hay). En segundo lugar, puedes a帽adir un espacio. Las dos reglas CSS siguientes, por lo tanto son equivalentes:

  1. #example:before { content: "Hello\00000Aboy."; }
  2. #example:before { content: "Hello\A boy."; }

Sabiendo esto, ahora podemos dividir nuestro ejemplo anterior de la imagen a trav茅s de dos l铆neas justo donde queremos. Presten mucha atenci贸n a la adici贸n del espacio en blanco en la declaraci贸n white-space: pre;.

Ya que estamos generando espacios en blanco y en la mayor铆a de las situaciones todos los espacios en blanco en HTML se acoplan en un 煤nico espacio, la declaraci贸n de white-space es necesaria para interpretar literalmente el salto de l铆nea (como si todo el contenido se generar谩 dentro de un elemento <pre>).

  1. img[title]:before {
  2. content: attr(title) "\AImage retrieved from"
  3. attr(src);
  4. white-space: pre;
  5. display: block;
  6. }

Fuente: Mert Tol


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Introduction to CSS Escape Sequences | Mert TOL dice:

    […] Spanish (elwebmaster.com) […]

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder