W3C home > Mailing lists > Public > public-css-archive@w3.org > June 2018

[csswg-drafts] [css-content] Does `content: url()` apply to images?

From: Emilio Cobos Álvarez via GitHub <sysbot+gh@w3.org>
Date: Wed, 27 Jun 2018 11:22:06 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-336187201-1530098525-sysbot+gh@w3.org>
emilio has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-content] Does `content: url()` apply to images? ==
Blink and WebKit implement `content: url()` allowing to replace an element with an image.

However the behavior differs and doesn't look quite intentional, and WebKit's behavior looks different if the image is already loaded or not (the second image would display alt text after a relayout, wat).

Consider this test-case:

```html
<!doctype html>
<img src="broken" style="content: url(https://www.w3.org/2008/site/images/logo-w3c-mobile-lg)" alt="This is my alt text">
<img src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg" style="content: url(broken)" alt="This is my alt text">
```

How should this render? Should `content: url()` apply or not? If it does, should it display the `alt` text? Why only for `<img>` (if the image is broken in a `<div>`) it just doesn't render?

Also, note that in Blink at least, if the image is already loaded for the second `<img>`, or if you toggle `display` manually, suddenly it displays the image instead of the `alt` text.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2831 using your GitHub account
Received on Wednesday, 27 June 2018 11:22:08 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 19 September 2019 01:18:58 UTC