Ir directamente al contenido de esta página

codexexempla.org

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:

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 No
open-quote No No No
close-quote No No No
no-open-quote No No No
no-close-quote No No No
attr() No No 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

(cc) CodexExempla.org, 2007–2021 Mapa del sitio | XHTML | CSS | AA