好的或坏的想法:用视频显示的CSS属性"content:url()"替换移动网站上的所有图像

Question

我们目前正在为移动设备构建一个网站.支持的操作系统和浏览器应该是:

• Android 4.x(股票浏览器,谷歌浏览器)
• iOS6 +(Safari,谷歌浏览器)

为了支持高分辨率显示,我们评估了各种技术和库,以便用高分辨率吊坠自动替换图像:

尝试1:retina.js http://retinajs.com/

第一次尝试使用这样的普通<img>标签:<img src="foo.png">并使用retina.js让它自动用视网膜图像的名称(foo@2x.png)替换src属性.这有效但有两个缺点:首先,它会产生不必要的开销,因为原始和视网膜图像都会加载,其次,如果没有可用的视网膜图像,它将导致服务器日志上出现大量404错误我们不想要.

尝试2:picturefill.js https://github.com/scottjehl/picturefill

这个框架使用一些基于<span>元素的奇怪的html标记.对我来说,好像作者试图模仿所提议的<picture>元素而不是标准(尚未),请参阅http://picture.responsiveimages.org - 由于奇怪的标记,我不喜欢这种方法.对我来说,用语法描述带有跨度的图像是没有意义的.

尝试3:通过CSS属性background-image替换图像

我看到有时人们使用CSS媒体查询来检测视网膜显示,然后在具有更高或更低解决方案图片的div(或类似元素)上设置背景图像.我个人不喜欢这种方法,因为它完全不鼓励创建语义上好的标记<img src="foo.png">.我无法想象用div创建一个网站,然后将所有图像设置为背景图像 - 这感觉非常奇怪.

尝试4:通过CSS属性内容设置图像:url(...)

正如这里提出的那样可以在CSS中设置img标签的src属性的等价物吗？似乎可以使用属性通过CSS覆盖img标签中的src属性content:url().现在,这是计划:我们为每个图像设置了img标签,在其src属性中引用了一个透明的空白1x1 png,如下所示:<img id="img56456" src="transp_1x1.png" alt="img description">.现在这在语义上是正确的,并且对W3C验证器也有效.然后我们加载一个CSS样式表,通过Media Queries设置网站上的所有图像.

例:

#img56456{content:url(foo.png)}
@media (-webkit-min-device-pixel-ratio: 2){ 
    #img56456{content:url(foo@2x.png)}
}

现在,这种方法效果很好:

• 没有开销
• 坚实的标记
• 适用于所需的设备/浏览器
• 这里不要求SEO图像

现在,这种方法会导致我们没有想到的任何副作用吗？我只是问,因为我知道它有效,但有点"感觉"奇怪的是通过CSS设置所有图像我也发现这个方法对SO的评论是否有可能在CSS中设置img标签的src属性的等价物？:

"值得补充的是,即使在支持将内容分配给img的浏览器中,它也会改变其行为.图像开始忽略大小属性,而在Chrome/Safari中,它会丢失上下文菜单选项,如"保存图像".这是因为分配了内容有效地将img从空的替换元素转换为类似 <span><img></span>"

这可能是个问题吗？(我没有注意到任何尺寸问题,并且上下文菜单不是必需的)

Answer 1

新版本的 picturefill http://scottjehl.github.io/picturefill/不再依赖<span>。相反，它只是使用官方的 HTML5 srcset 属性，并在浏览器不支持时模仿其行为，所以对我来说，这是相当长一段时间后的理想解决方案。

使用 CSS 属性content:url(...)是一个巧妙的小主意，但它也让事情变得有点复杂和黑客化。

所以，回答我自己的问题：不，这是一个坏主意。使用新版本的 picturefill 是一种更好的解决方案。当所有主要浏览器的新版本都支持 srcset 属性时，您甚至可以在一段时间后删除它，并且您仍然符合标准。http://caniuse.com/#search=srcset

例子：

<img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<script src="picturefill.js"></script>