Contenido de Css, Attr y Url en la misma oración

He usado el atributo de contenido durante mucho tiempo, y hoy quería probar algo nuevo. En lugar de usar JS para mostrar una información sobre herramientas de imagen, quería saber si era posible hacerlo dinámicamente con CSS.

Así que lo intenté:

.TableLine:hover:after{ content: url("../Img/Photo/"attr(id)".jpg"); } 

donde attr(id) debe devolver el ID de la imagen (alfanumérico) que también es el nombre de la imagen.

No funciona en absoluto, no tiene ningún efecto. Creo que el bloque no se analizó porque agregar un borde o fondo al bloque tampoco parece tener efecto.

Cuando solo uso attr(id) solo, sin la url, funciona perfectamente. También funciona cuando reemplazo attr(id) con el nombre real de la imagen.

Después de buscar un momento en la web no he encontrado nada relevante, así que aquí estoy. ¿Es un error conocido o simplemente mi error? 🙂

No es un error ni un error. La syntax soportada actualmente (CSS2.1) para el contenido es:

 content: normal | none | [  |  |  | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit 

Es decir:

  • El literal normal , none o inherit

  • O cualquier cantidad de estos en sucesión :

    • una cuerda – "hello"
    • a (constante) URI – url("image.jpg")
    • un contador – counter(section)
    • un atributo – attr(id)
    • open-quote close-quote no-open-quote no-close-quote

Las especificaciones no permiten que se “aniden”, solo se pueden seguir, por ejemplo:

 content: "Photo: " url("../Img/Photo.jpg") attr(id); /* Which is not what you want */ 

Los borradores CSS3 actuales tampoco lo permiten. Posiblemente, si se ha discutido, porque la mayoría de los casos de uso tendrían poco que ver con la presentación y más con el contenido real.

A partir de la Recomendación del Candidato W3C del 28 de agosto de 2012, existe una syntax para especificar el tipo devuelto por attr ().

Se describe aquí .

Para resumir, lo siguiente funcionaría:

 content: attr(id url); 

Pero todavía no parece que puedas concatenar eso con otras cadenas, lo cual es molesto.

De todos modos, esto todavía no parece implementarse en ninguna parte.

Verificar la compatibilidad del navegador

    Intereting Posts