CSS`content`属性如何用于WebKit中的`img`元素? [英] How did CSS `content` property work for `img` element in WebKit?
问题描述
很久以前，有一份CSS3生成的内容规范草案，允许使用content属性 1 ，img::before的伪元素成为可能.
Long time ago there was a draft of CSS3 Generated Content spec which allowed the content property for any HTML element (not only ::before/::after pseudo-elements), without any formal restriction for empty or replaced elements. It was once supported by Opera Presto (1, 2) and, at least to some extent, by WebKit (3). By the end of 2011, WebKit's implementation of content for img element seemed to effectively convert it from an empty replaced element to non-replaced element like span (even its context menu changed, removing options like 'Save image as...'). It also made it possible to apply pseudo elements like img::before.
在当前的Blink(Chrome等)实现中，将content属性视为img元素不会产生可见效果.但是img元素显然具有不同的结构，这取决于它是否正确加载或损坏:如果加载，则DOM Inspector会将其显示为简单的空元素，但是如果损坏，它将公开内部Shadow DOM结构，如下所示:
In the current Blink (Chrome etc.) implementation, seeting content property to img element has no visible effect. But the img element clearly has different structure depending on whether it loaded properly or is broken: if loaded, it is shown by the DOM Inspector as a simple empty element, but if broken, it exposes the internal Shadow DOM structure like this:
<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的帮助下显示的，因此仅在这种情况下才可以向其应用伪元素(
Probably because the broken img is displayed with the help of the shadow divs, it's possible to apply pseudo elements to it in this case only (4).
当前的WebKit不支持img的伪元素.但是，有趣的是，至少iOS 9.2.1 Safari在为该img设置content属性后开始支持它们(
Current WebKit doesn't support pseudo elements for img. But, interestingly, at least iOS 9.2.1 Safari starts to support them after setting the content property for that img (5).
为什么此属性会进行此类更改?我猜想，如果一个空元素得到任何内容(甚至生成了)，浏览器就必须提供一些东西来显示该内容，用某种容器(例如Blink的阴影div id="alttext-container")有效地替换该空元素，并且该容器可以有伪.我错了吗?并不会从最新的WebKit版本中删除此行为吗?
Why does this property make such change? I guess that if an empty element gets any content (even generated), the browser has to provide something to display this content in, effectively replacing the empty element with some sort of a container (like Blink's shadow div id="alttext-container"), and this container can have pseudos. Am I wrong? And wasn't this behavior removed from the latest WebKit versions?
推荐答案
我最近才注意到这一点.我真的很沮丧.很高兴看到有人已经提到它.
I just recently noticed this. I was really frustrated with it. Glad to see somebody already mentioned it.
你们似乎比我更了解这个话题.因此，也许您已经知道这些方法，但是无论如何，我都会写解决方案，以供那些会像我这样发现本主题的大三学生使用.
You guys seem much more knowledgeable on the topic than me. So, probably you already know these methods, but I will write my solution anyway, for juniors who will find this topic like myself.
我需要一种用于损坏图像占位符的方法. 我以为我可以检查文件并提供".brokenimg"类名称以在后端进行标记，并使用CSS"content:"更改图像. 但这没有用. (在Chrome，Firefox，Opera，Edge，三星的Android网络浏览器中进行了测试.都一样.)
I needed a method for broken image placeholders. I thought I could check files and give ".brokenimg" class names to tag in Back-end and change the image with CSS "content:". But It didn't work. (Tested in Chrome, Firefox, Opera, Edge, Samsung's Android Web Browser. All same.)
然后，我尝试更改脚本并使用s代替s.并在CSS中进行了尝试；
Then, I tried to change my script and use s instead of s. And tried this in CSS;
.brokenimg::before { content: url(picture.jpg); }
它几乎起作用了，但是，这确实很有限，这不是我所需要的.
It almost worked but, But this is really limited and It wasn't what I needed.
因此，通过JavaScript事件解决了我的问题；
<img onerror="this.src='broken.jpg'" src="image.jpg">
我知道这不是同一回事.但就我而言，它确实满足了我的需求.
I know it is not the same thing. But in my case, it did exactly what I needed.
我想我们现在必须找到类似的方式.
I guess we have to find ways like these for now.
这篇关于CSS`content`属性如何用于WebKit中的`img`元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
