css - CSS `content` 属性如何用于 WebKit 中的 `img` 元素？

Question

很久以前有一个 CSS3 生成内容规范草案允许 content 属性 for any HTML element (不仅是::before/::after 伪元素)，对空元素或替换元素没有任何正式限制。 Opera Presto(1、2)曾经支持它，WebKit(3)至少在某种程度上支持它。到 2011 年底，WebKit 为 img 元素实现的 content 似乎有效地将其从一个空的替换元素转换为非替换元素，如 span(甚至它的上下文菜单也发生了变化，删除了“将图像另存为...”等选项)。它还使应用伪元素成为可能，例如 img::before。

在当前的 Blink(Chrome 等)实现中，将 content 属性设置为 img 元素没有可见的效果。但是 img 元素显然有不同的结构，这取决于它是否正确加载或损坏:如果加载，DOM Inspector 将它显示为一个简单的空元素，但如果损坏，它会暴露内部阴影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 是在阴影 div 的帮助下显示的，所以只有在这种情况下才有可能对其应用伪元素 ( 4 ) .

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

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

Answer 1

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

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

我需要一种方法来处理损坏的图像占位符。我想我可以检查文件并给“.brokenimg”类名以在后端标记并使用 CSS“content:”更改图像。但它没有用。 (在 Chrome、Firefox、Opera、Edge、Samsung 的 Android Web 浏览器中测试。都一样。)

然后，我尝试更改我的脚本并使用 s 而不是 s。并在 CSS 中进行了尝试；

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

它几乎可以工作，但是，但这真的很有限，而且这不是我所需要的。

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

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

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

我想我们现在必须找到这样的方法。