且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

是否可以用CSS检测破碎/卸载(错误)图像?

更新时间:2022-04-17 21:34:59

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).