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