Anexo: Ejemplos de quotes y algunos valores de content

Las imágenes ilustrativas con capturas de los ejemplos tal y como los presenta Firefox 2; haciendo clic sobre ellas se puede acceder al documento de prueba. El soporte de contenidos generados por medio de CSS varía en diversos navegadores. Para las propiedades y valores que ejemplifico aquí, mis pruebas dan una tabla de resultados que incluyo al final del documento.

Los ejemplos

Para probar los valores de quotes y demás, he creado una página con una cita, según este modelo:

    <blockquote cite="url_de_la_cita">
        <p>texto <q>cita_anidada</q> texto</p>
        <p><cite>autor, <i>obra</i></cite></p>      
    </blockquote>
        

Le he aplicado las siguientes reglas:

    blockquote p:first-child{
        quotes:"«" "»" "“" "”";
    }
    
    blockquote p:first-child:before{
        content:open-quote;
    }
    
    blockquote p:first-child:after{
        content:close-quote;
    }
    
    blockquote:after{
        content:"\A [Fuente: "attr(cite)"]";
    }
    
    cite{
        font-style:normal;
    }
        

Ahora, antes de comprobar el documento en un navegador, repasemos los resultados teóricos que tendrían que tener las reglas según la especificación:

• blockquote p:first-child{ quotes:"«" "»" "“" "”"; }: El párrafo que sea el primer hijo del bloque de cita debería presentar comillas latinas, y si aparece un elemento de cita anidado en él, este segundo debe presentar comillas inglesas. Sin embargo, quotes no genera las comillas, sólo especifica su tipo en caso de que estas se generen, bien porque el agente de usuario las aplique por defecto —como por ejemplo para el elemento q—, o que se asignen por medio de content.
• blockquote p:first-child:before{ content:open-quote; } y blockquote p:first-child:after{ content:close-quote; }: Respectivamente, especifican que para el primer párrafo de deben generar comillas antes y después de su texto.
• blockquote:after{ content:"\A [Fuente: "attr(cite)"]"; }: Genera tras el bloque de cita un texto que indica el URL del documento empleado como fuente, recogido en el atributo cite. Incluyo un escape, \A, que es la manera de insertar un salto de línea (inglés).
• La última regla es evidente.

Así, el resultado correcto sería éste:

Resultados de las reglas anteriores en Firefox 2

Ahora vamos probar una pequeña variante, que consiste en eliminar las comillas del párrafo, de esta manera:

    blockquote p:first-child:before{
        content:no-open-quote;
    }
    
    blockquote p:first-child:after{
        content:no-close-quote;
    }
        

El resultado debería ser éste:

El mismo ejemplo, pero eliminando las comillas del párrafo

A título personal, creo que al eliminar las comillas del primer elemento, en tipo debería aplicarse en cascada a los niveles adicionales de citas, es decir, que si desaparece la comilla latina del primer nivel debería aplicarse al segundo nivel, la especificada para el segundo a un hipotético tercero, y así sucesivamente. No obstante, este comportamiento no aparece recogido en la especificación, por lo que Firefox —en esta prueba— se comporta de acuerdo con el estándar.

Soporte en los navegadores

Y ahora es cuando comprobamos el soporte de estas propiedades:

Soporte para contenidos generados en diversos navegadores.

	Explorer 6	Explorer 7	Firefox 2	Opera 9	Safari 3 beta
quotes	No	No	Sí	Sí	No
open-quote	No	No	Sí	Sí	No
close-quote	No	No	Sí	Sí	No
no-open-quote	No	No	Sí	Sí	No
no-close-quote	No	No	Sí	Sí	No
attr()	No	No	Sí	Sí	Sí, pero...

En el caso de Explorer, el navegador no soporta quotes ni los valores de content asociados; para attr(), sin embargo, no puedo hacer una afirmación rotunda, puesto que es difícil comprobarlo cuando lo que no soportan las dos versiones son los pseudoselectores :before y :after.

El comportamiento de la beta de Safari es, cuando menos, peculiar para este ejemplo. Aunque he comprobado que este navegador soporta :before y :after, y también attr(), la generar el contenido del atributo no lo sitúa tras el elemento blockquote, sino tras su primer hijo:

El mismo ejemplo, tal y como se ve en la beta de Safari 3

No obstante, hay que tener en cuenta que se trata de una beta, concretamente —en el momento en que escribo esto— la 3.0.4 (523.15).

Volver al curso