CSS`content`属性是如何为WebKit中的`img`元素工作的？

Question

很久以前有一个CSS3生成内容规范的草案,它允许任何HTML元素的content属性(不仅是::之前的:: ::伪元素之后),对空元素或替换元素没有任何正式限制.有人曾经被Opera的Presto支持(1,2),并且至少在一定程度上,通过WebKit的(3).到2011年底,WebKit的for 元素实现似乎有效地将它从空替换元素转换为非替换元素(甚至更改了上下文菜单,删除了"将图像另存为..."等选项).它还可以应用伪元素.contentimgspanimg::before

在当前的Blink(Chrome等)实现中,seeting content属性到img元素没有可见效果.但是img元素显然具有不同的结构,具体取决于它是正确加载还是被破坏:如果加载,它由DOM Inspector显示为一个简单的空元素,但如果被破坏,它会暴露内部的Shadow DOM结构,如下所示:

<div id="alttext-container" style="overflow: hidden; border: 1px solid silver; display: inline-block; box-sizing: border-box; padding: 1px;">
  <img id="alttext-image" width="16" height="16" align="left" style="margin: 0px; float: left; display: inline;">
  <div id="alttext" style="overflow: hidden; display: block;">Alt text</div>
</div>

可能是因为在img阴影divs 的帮助下显示了破碎,在这种情况下可以将伪元素应用于它(4).

当前的WebKit不支持伪元素img.但是,有趣的是,至少iOS 9.2.1 Safari在为该content属性设置属性后开始支持它们img(5).

为什么这个属性会做出这样的改变？我想如果一个空元素获得任何内容(甚至生成),浏览器必须提供一些东西来显示这个内容,有效地用某种容器(如Blink的阴影div id="alttext-container")替换空元素,并且这个容器可以有伪.我错了吗？是不是从最新的WebKit版本中删除了这种行为？

Answer 1

我最近才注意到这一点。我真的很沮丧。很高兴看到有人已经提到了。

你们似乎比我更了解这个话题。所以，可能你已经知道这些方法了，但无论如何我都会写下我的解决方案，供像我一样会发现这个主题的后辈使用。

我需要一种处理损坏图像占位符的方法。我想我可以检查文件并给出“.brokenimg”类名以在后端进行标记，并使用CSS“content：”更改图像。但这没有用。（在 Chrome、Firefox、Opera、Edge、三星 Android 网络浏览器中进行了测试。全部相同。）

然后，我尝试更改我的脚本并使用 s 而不是 s。并在CSS中尝试过这个；

.brokenimg::before { content: url(picture.jpg); }

它几乎成功了，但是，但这确实有限，这不是我需要的。

所以，用 JavaScript 事件解决了我的问题；

<img onerror="this.src='broken.jpg'" src="image.jpg">

我知道这不是一回事。但就我而言，它完全满足了我的需要。

我想我们现在必须找到类似的方法。