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

Question

He utilizado 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 he intentado:

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

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

No funciona del todo, 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 el 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? :)

Answer 1

No es un error ni un error. La sintaxis soportada actualmente (CSS 2.1) para el contenido es:

content: normal | none | 
     [ <string> | <uri> | <counter> | attr() | 
      open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit 

Es decir:

• el literal normal, none o inherit

• o cualquier número de éstos en la serie:

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

El specs no los permite para ser "anidados", sólo pueden seguirse unos a otros, por ejemplo .:

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

Los borradores CSS3 actuales no permiten tampoco. 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.

Answer 2

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

Se describe here.

Para resumir, la siguiente funcionaría:

content: attr(id url); 

Sin embargo, todavía no parece como que sería capaz de concatenar que con otras cadenas, lo cual es molesto.

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

Comprobar Browser compatibility