TAT.iAzrael 判断浏览器是否支持指定 CSS 属性和指定值
In 未分类 on 2011年10月25日 by view: 12,567
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 日

    不错不错·~

发表评论