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

In 未分类 on 2011年10月25日 by TAT.iAzrael view: 12,567

现在 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” 即可。

原创文章转载请注明：

转载自AlloyTeam：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/

分享到:

石头 2015 年 11 月 29 日

本身 in 的支持性就很差，这个办法不怎么样啊。
我连婚都没结，却要让我儿子叫我孙子回来吃饭？

回复
劝儒 2015 年 9 月 28 日

微信浏览器，安卓的，测试支持 webkit-flex-flow: wrap; 但是这个属性并没哟在微信里生效。

回复
如何用js判断浏览器是否支持某个css属性？ | segment-解决方案 2014 年 9 月 3 日

[…] 判断浏览器是否支持指定 CSS 属性和指定值 js 判断浏览器是否支持 css3 属性 —————————————————————————————————————————————————— ↓ 解决方案 ↓ 如果 “支持”==“符合预期的视觉效果”，就 position:fixed; 而言，你可以在窗口可见区域以外创建一对父子元素，然后用 js 滚动父元素，检查子元素的 offset 是否改变了。 ————————————————————————— […]

回复
excel学习网 2014 年 6 月 6 日

实验过了，好聪明的办法。但是有个问题：textOverflow 和 text-overflow 这俩名字如何对应起来。div 的属性我本机测试有 148 个，分别对应啥名字和 css 属性，这个用什么思路来考虑呢？

回复
fed 2013 年 10 月 30 日

没有人测试一下吗？
当遇到不支持的属性值时，浏览器并不会把这个值抛弃。
在 IE6 下测试 position:fixed 的时候 return true

回复
- TAT.iAzrael 2013 年 10 月 30 日
  
  sorry, 我并未测试过 ie6, 我看看
  
  回复
完美实现溢出文本省略 | Tencent AlloyTeam 2012 2012 年 5 月 4 日

[…] 通过不断添加新字符并监测添加后的宽度，就可以做到自适应不同的字体和字体大小了。具体例子点击这里查看，这个 demo 对 text-overflow 的支持进行了检测，如果支持 ellipsis，就直接使用 css 的，毕竟 js 计算能省一点是一点。检测 css 属性及其支持情况可以查看这篇文章。 Read more from JavaScript, 用户体验设计 ellipsis, text-overflow, 文本溢出 2 Comments Post a comment […]

回复
完美实现溢出文本省略 | WebPlus 2011 年 10 月 25 日

[…] 通过不断添加新字符并监测添加后的宽度，就可以做到自适应不同的字体和字体大小了。具体例子点击这里查看，这个 demo 对 text-overflow 的支持进行了检测，如果支持 ellipsis，就直接使用 css 的，毕竟 js 计算能省一点是一点。检测 css 属性及其支持情况可以查看这篇文章。 […]

回复
gdy 2011 年 10 月 25 日

~

回复
sheran 2011 年 10 月 25 日

不错不错·~

回复