contenuti attributo di elementi img

Question

Durante l'ispezione gli strumenti Chrome Dev, ho notato il seguente frammento di CSS:

img { 
    content: url(image-src.png); 
} 

che funziona perfettamente in Chrome (vedi immagine sotto).

Questo mi permette di definire l'attributo src di un tag > < img tramite CSS. Non funziona in Firefox. Fino ad ora pensavo che non fosse possibile modificare direttamente l'attributo src tramite css e non ho trovato nessuno che parlasse di questo. Quindi, si tratta solo di un'aggiunta proprietaria in Chrome o Chrome sta implementando una bozza W3C o qualcosa di simile di cui non sono a conoscenza?

Answer 1

The content property as defined in CSS 2.1 si applica solo agli pseudo-elementi :before e . In base alle regole CSS, è possibile specificare qualsiasi proprietà per qualsiasi elemento, ma le specifiche hanno limitazioni su quali proprietà "si applicano a" (cioè, hanno effetto su) vari elementi.

Il CSS3 Generated and Replaced Content Module, una bozza di lavoro, descrive lo content property come applicabile a tutti gli elementi. Ha un esempio di sostituzione del contenuto di un elemento h1 con un'immagine, e sicuramente lo stesso potrebbe essere fatto per un elemento img.

Ma è solo una bozza di lavoro. Le solite risorse sullo stato di implementazione CSS, QuirksMode.org CSS info e Caniuse.com, non indicano la situazione; essi descrivono solo il supporto per content per :before e :after (che è piuttosto universale eccezione di IE 7 e versioni precedenti

Answer 2

ora si può fare che:.http://chabada.esy.es/tests/0004.html

<style> 
    .redcross { 
    background: transparent url('redcross.png') no-repeat; 
    display: block; 
    width: 24px; 
    height: 24px; 
    } 
</style> 

<img class="redcross">