CSS "content" property on <img> elements
Categories
(Core :: Layout: Generated Content, Lists, and Counters, defect)
Tracking
()
People
(Reporter: nicolo.ribaudo, Unassigned)
Details
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:91.0) Gecko/20100101 Firefox/91.0
Steps to reproduce:
My university's website (https://matematicalm.campusnet.unito.it/do/home.pl) uses the "contents" CSS property to replace the logo image in the top-left cornet on smaller screens, however I noticed that it doesn't work in Firefox. You can see it in action by resizing the page using Chrome or Safari.
A minimal reproduction is the following one:
<img class="dog" src="https://images.unsplash.com/photo-1569591159212-b02ea8a9f239?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDU5MzIzMA&ixlib=rb-1.2.1&q=85" width="200px">
.dog {
content: url("https://images.unsplash.com/photo-1615751072497-5f5169febe17?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDU5MzM2OA&ixlib=rb-1.2.1&q=85");
}
CodePen: https://codepen.io/nicolo-ribaudo/pen/NWgrrGj?editors=1100
Actual results:
Firefox shows a cat image (the one specified in the "src" attribute)
Expected results:
Firefox should show a dog image (the one specified in the "content" property). Note that this already works if I use <div> instead of <img>.
The CSS specification says that "content" is a valid property for any type of HTML element: https://www.w3.org/TR/css-content-3/#content-property
|
Reporter | |
Updated•4 years ago
|
|
||
Comment 1•4 years ago
|
||
This is bug 1484928, but note that browsers are inconsistent about this and I think it's a mistake to honor content here. Why for <img> but not for e.g., <video> or <iframe> or any other replaced content? Imo this is just a Chrome bug.
|
|
Reporter | |
Comment 2•4 years ago
|
||
Whops I'm sorry; I tried looking for already reported bugs but looking for "content" just brought up a lot of unrelated stuff.
Btw, according to my reading of the spec it should also work with <video> and <iframe>.
|
|
||
Comment 3•4 years ago
|
||
Yeah, see the discussion https://github.com/w3c/csswg-drafts/issues/2831 on that... That's weird since we don't let other box-generating things affect it (e.g. those don't have pseudo-elements), fwiw.
|
|
||
Comment 4•4 years ago
|
||
And no worries, dupes are cheap! :)
Description
•