简单的CSS梯度检测 [英] Simple CSS gradient detection
问题描述
所以我需要检测用户的浏览器是否支持CSS渐变,就是这样。我会使用Modernizr,但即使只包括渐变检测,与我自己做的相比也会浪费。
So I need to detect if a user's browser supports CSS gradients, that's it. I would use Modernizr, but even with only including gradient detection, it would be wasteful compared to just doing it myself.
据我所知,这将是怎么回事关于它;
As I understand it, this would be how to go about it;
- 创建未添加到DOM的元素
- 设置
background-image
到线性渐变
包含所有供应商前缀 - 阅读
background-image
并检查gradient
,看看它是否仍在那里
- Creating an element that isn't added to the DOM
- Setting
background-image
tolinear-gradient
with all the vendor prefixes - Reading
background-image
and checking forgradient
, to see if it's still there
我无法弄清楚Modernizr的来源,他们在这方面的核心是什么?所以我可以自己做。 http://modernizr.com/download/#-cssgradients-prefixes
I couldn't figure out Modernizr's source though, what's the core of what they're doing in this? So I can do it myself. http://modernizr.com/download/#-cssgradients-prefixes
推荐答案
他们的测试非常基本,你可以解压缩它:
Their test is really basic and you can just extract it:
function supports_gradients() {
/**
* For CSS Gradients syntax, please see:
* webkit.org/blog/175/introducing-css-gradients/
* developer.mozilla.org/en/CSS/-moz-linear-gradient
* developer.mozilla.org/en/CSS/-moz-radial-gradient
* dev.w3.org/csswg/css3-images/#gradients-
*/
var str1 = 'background-image:',
str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));',
str3 = 'linear-gradient(left top,#9f9, white);';
setCss(
// legacy webkit syntax (FIXME: remove when syntax not in use anymore)
(str1 + '-webkit- '.split(' ').join(str2 + str1)
// standard syntax // trailing 'background-image:'
+ prefixes.join(str3 + str1)).slice(0, -str1.length)
);
return contains(mStyle.backgroundImage, 'gradient');
};
为此,你还必须提取 contains()
和 setCss()
除非你有自己的这些方法版本(例如,来自jQuery)。
For this to work you'd also have to extract contains()
and setCss()
unless you've got your own versions of these methods (say, from jQuery).
这篇关于简单的CSS梯度检测的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!