在Safari 5.x上使用CSS的灰度图像

Question

我试图在页面上显示一些图像,它们应该以灰度显示,除非鼠标悬停时它们平滑地转换为颜色.我已经在IE,Chrome和Firefox上很好地工作了,但它在Safari 5.x上不起作用.问题出在Safari for Mac 和 Safari for Windows上.这是我到目前为止的代码:

filter: url('desaturate.svg#greyscale'); 
filter: gray;
-webkit-filter: grayscale(1);

第一行加载外部.svg过滤器(我没有用url("data:...规则内联它,因为我想避免旧版Firefox中的错误).

第二行是IE浏览器,似乎也可以filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);.

关于webkit的最后一行应该适用于Safari 6及更高版本以及Chrome.

是否有任何CSS规则在Safari 5.x上显示带灰度的图像？或者,如果这是不可能的,有人可以推荐一个javascript解决方案,最好是一个能够处理灰度级动画的解决方案吗？我想避免使用灰度图像的服务器端黑客,因为这会弄乱我的HTML然后我将不得不做一些讨厌的浏览器检测来有条件地提供HTML.

谢谢

编辑:

由于这已成为一个"值得注意的问题",请不要在此处发布更多仅适用于Safari 6及更高版本的答案,或者在数据网址中包含.svg文件的答案.在我编写OP的时候,对我来说很重要的是支持一些今天被认为非常过时的Safari和Firefox版本,但这仍然是我原来的问题.

我很清楚,对于现代浏览器,灰度过滤很容易用几行CSS代码完成,但是图形设计师使用的是Safari 5.x,客户端在我做这个项目的时候使用的是Firefox 3.x. 对我有用的解决方案是Giona建议的,即使用Modernizr测试css过滤,以及是否支持回退到javascript.

如果我今天做同样的事情,我会告诉他们去更新他们的浏览器!

Answer 1

正如您在caniuse.com上看到的,目前很少有浏览器支持CSS3过滤器.

如果您使用Google" javascript灰度插件 ",则会有很多JavaScript/jQuery后备.这里有一些:

• Grayscale.js
• jQuery GreyScale插件
• Hoverizr
• 用帆布做(教程)

但我没有经验,所以我不能建议你哪一个是最好的.

我很久以前尝试过jQuery Black And White,它给了我很多关于相对/绝对定位图像的问题,所以也许可以避免它.

将此Modernizr构建包含在您的页面中,您可以通过Javascript定位不支持过滤器的浏览器:

if(!Modernizr.css_filters){
    /* javascript fallback here */
}

或CSS:

.no-css_filters .element {
    /* css fallback here */
}

哦,不要忘记dowebsitesneedtolookexactlythesameineverybrowser？