Menu
While inspecting the Chrome Dev tools, I noticed the following CSS fragment:
img {
content: url(image-src.png);
}
which works perfectly in Chrome (see Screenshot below).
This allows me to define the src attribute of an <img> tag via CSS. Doesn't work in Firefox. Until now I thought that is not possible to directly modify the src attribute via css and I have not found anyone talking about this. So, is this just a proprietary addition in Chrome or is Chrome implementing a W3C draft or something comparable I am not aware of?
887
The img element has two required attributes: src : The source location (URL) of the image file. alt : The alternate text. This is used to describe the image for someone who cannot see it because they are either using a screen reader or the image src is missing.
No. There is no text inside the img. According to the specs, the img element is a void element, i.e. it doesn't have any content or an end tag.
Content Model: Empty! The <IMG> tag is used to incorporate in-line graphics (typically icons or small graphics) into an HTML document. This element is NOT intended for embedding other HTML text.
The content property as defined in CSS 2.1 applies to :before and :after pseudo-elements only. By CSS rules, you can specify any property for any element, but specifications have limitations on what properties “apply to” (i.e., have effect on) various elements.
The CSS3 Generated and Replaced Content Module, a Working Draft, describes the content property as applying to all elements. It has an example of replacing the content of an h1 element by an image, and surely the same could be done to an img element.
But it’s just a Working Draft. The usual resources on CSS implementation status, QuirksMode.org CSS info and Caniuse.com, do not indicate the situation; they only describe the support to content for :before and :after (which is rather universal except IE 7 and earlier.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
