开发者

Detect support for multiple background images?

I really want to make use of multiple background support (Webkit, Firefox 3.6+), but I would like to provide an alternative solution for browsers that don't support it. (IE, Firefox 3.5-).

Is there any way to detect support for this CSS feature? Or will 开发者_StackOverflowI have to resort to browser sniffing?

EDIT: Javascript solutions are welcome


I know this is a relatively old question but I thought I would add a JS snippet that can be used to sniff this. The code is taken from the Modernizr source but has been modified a bit:

function multipleBgTest(){

  var el_style = document.createElement("div").style;
  el_style.cssText = 'background:url(//:),url(//:),red url(//:)';

  // If the UA supports multiple backgrounds, there should be three occurrences
  // of the string "url(" in the return value for el_style.background
  return new RegExp("(url\\s*\\(.*?){3}").test(el_style.background);

}

If the function returns true then it is supported otherwise it will return false.


Use http://www.modernizr.com/. This is a piece of javascript that will set up classes depending on what features the browser have. You can then use these classes in CSS.


No there is no way in pure css to detect if multiple backgrounds are supported. But you can specify default background and then specify multiple backgrounds which resolves error with processing value and keeps old if it isn't supported.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜