是否可以用CSS检测破碎/卸载（错误）图像？ [英] Is it possible to detect broken/unloaded (error) images with CSS?

问题描述

我想为破损/错误图片提供一些额外的CSS：

I'd like to give broken/errored images some extra CSS:

img:error {
  max-width: 20px;
  max-height: 20px;
}

但不起作用。有没有办法用纯CSS做到这一点？这是否有一个 img 伪选择器？

but that doesn't work. Is there a way with pure CSS to do this? Is there an img pseudo selector for this? Or even better: a dirty hack that works?

我已经看过了，但是没有人想知道=）

I've looked around, but nobody seems to be wondering =)

（是的，我知道JS可以做到，我知道如何，不需要提及它。）

(Yes, I know JS can do it and I know how; no need to mention it.)

推荐答案

CSS规范或草稿没有办法，但Firefox有一个专有的选择器（伪类） ： - moz-broken 。它的文档非常简洁，它说主要供主题开发者使用，但它可以使用例如。如下：

There is no way in CSS specs or drafts, but Firefox has a proprietary selector (pseudo-class) :-moz-broken. Its documentation is very concise and it says "intended for use mainly by theme developers", but it can be used e.g. as follows:

:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }

虽然文档说链接，它实际上匹配破碎的图像（ img 元素，其中 src 属性不引用图像）是否是链接。推测链接在这里真的意味着引用。

Although the documentation says that it "matches elements representing broken image links", it actually matches broken images (an img element where the src attribute does not refer to an image), whether they are links or not. Presumably, "links" really means "references" here.

选择器级别3 （CSS3选择器）只是说他们：他们在CSS 2.1中解释。在实践中，浏览器处理它们不同。奇怪的是，Firefox支持： - moz-broken：之后但忽略： - moz-broken：before 。它不支持这些伪元素的正常图像，但 img：后也支持一个破碎的图像（即指定的内容出现在 alt 属性值）。

CSS 2.1 says: "This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification." But Selectors Level 3 (CSS3 Selectors) just says about them: "They are explained in CSS 2.1." In practice, browsers handle them differently. Oddly enough, Firefox supports :-moz-broken:after but ignores :-moz-broken:before. It does not support either of these pseudo-elements for normal images, but img:after, too, is supported for a broken image (i.e., the specified content appears after the alt attribute value).

这篇关于是否可以用CSS检测破碎/卸载（错误）图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！