现在 css3 出来了, 添加了许多新特性,但由于并未全部浏览器都实现了这些特性,使用起来不太顺畅。因此,就想在使用的时候进行判断,如果有这个属性并且支持这种值,就 css 实现, 否者就用 js 实现。
比较明显的例子就是 text-overflow 这个属性,text-flow:clip 是大部分浏览器都支持的,而 text-flow:ellipsis 则在 firefox 和 10.6 版本以下 opera 上工作不了,让人相当头疼。
废话少说,判断的代码如下:
1 2 3 4 5 6 7 |
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” 即可。
石头 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 日
不错不错·~