TAT.iAzrael 判断浏览器是否支持指定CSS属性和指定值
In 未分类 on 2011年10月25日 by view: 10,704
10

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

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

废话少说,判断的代码如下:

这个判断的原理是:创建一个节点,判断其的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/

  1. 石头 2015 年 11 月 29 日

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

  2. 劝儒 2015 年 9 月 28 日

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

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

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

  4. excel学习网 2014 年 6 月 6 日

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

  5. fed 2013 年 10 月 30 日

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

  6. 完美实现溢出文本省略 | 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 […]

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

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

  8. gdy 2011 年 10 月 25 日

    ~

  9. TAT.sheran

    sheran 2011 年 10 月 25 日

    不错不错·~

发表评论