data - Contenido de CSS, Attr y Url en la misma oración

css elements

Question

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

Así que intenté:

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

donde se supone que attr(id) devuelve 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 también parece no tener efecto.

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

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

Answer 1

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

Se describe here .

Larga historia corta, lo siguiente funcionaría:

content: attr(id url);

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

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

Comprobar la compatibilidad del navegador

Answer 2

No es ni un error ni un error. La sintaxis actualmente soportada (CSS2.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:

• Lo literal normal , none o inherit

• O cualquier número de estos en sucesión :

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

Las specs no permiten que estén "anidadas", solo pueden seguirse unas a otras, por ejemplo:

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

Los borradores actuales de CSS3 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.