判断浏览器是否支持指定CSS属性和指定值

现在css3出来了， 添加了许多新特性，但由于并未全部浏览器都实现了这些特性，使用起来不太顺畅。因此，就想在使用的时候进行判断，如果有这个属性并且支持这种值，就css实现， 否者就用js实现。

比较明显的例子就是text-overflow这个属性，text-flow：clip是大部分浏览器都支持的，而text-flow：ellipsis则在firefox和10.6版本以下opera上工作不了，让人相当头疼。

废话少说，判断的代码如下：

双击选中源代码

var element = document.createElement('div');
if('textOverflow' in element.style){
    element.style['textOverflow'] = 'ellipsis';
    return element.style['textOverflow'] === 'ellipsis';
}else{
    return false;
}
这个判断的原理是：创建一个节点，判断其的style属性是否含有textOverflow属性，有则进一步判断是否支持ellipsis这个值。

判断是否支持ellipsis值依靠的是浏览器对于非法style值的处理，当遇到不支持的属性值时，浏览器会直接把这个值抛弃。因此这里就可以先给textOverflow赋值“ellipsis”，如果不支持，则其值肯定为空或者其它不等于“ellipsis”的值。因此只要判断赋值后的textOverflow是否等于“ellipsis”即可。

http://www.alloyteam.com/2011/10/%E5%88%A4%E6%96%AD%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%AF%E5%90%A6%E6%94%AF%E6%8C%81%E6%8C%87%E5%AE%9Acss%E5%B1%9E%E6%80%A7%E5%92%8C%E6%8C%87%E5%AE%9A%E5%80%BC/