`
xhgrid
  • 浏览: 14494 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

判断浏览器是否支持指定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/
分享到:
评论

相关推荐

    判断浏览器类型屏幕分辨率自动调用不同CSS的代码

    这部分代码简化了原始脚本中的浏览器检测逻辑,直接为IE、Firefox和其他浏览器指定了对应的CSS文件。 2. **屏幕分辨率匹配** ```javascript function ScreenWidth(CSS1,CSS2,CSS3,CSS4){ if((screen.width==...

    JS判断浏览器分辨率调用不同css样式

    ### JS判断浏览器分辨率调用不同CSS样式的实现方法 在Web开发中,为了提供更好的用户体验,根据不同的设备分辨率(屏幕尺寸)应用相应的CSS样式是非常重要的。这种方法有助于优化页面布局、提高加载速度,并确保...

    CSS-CSS属性速查表

    以上总结涵盖了给定文件中提到的CSS属性和相关知识点,详细解析了每个属性的作用、应用场景及与其他属性的关联,旨在帮助读者深入理解CSS的灵活性和强大功能,为高效运用CSS进行网页设计和开发奠定坚实基础。

    JS判断浏览器类型与版本

    在JavaScript中,我们经常需要检测用户的浏览器类型及版本,以便为不同的浏览器提供兼容性的解决方案或者优化用户体验。这可以通过检查navigator对象的各种属性来实现。navigator对象是浏览器提供的一个全局对象,...

    taobao购物车全选、到达指定位置,结算条悬浮于浏览器底部

    这些代码可能包括了JavaScript逻辑,用于处理全选/反选的逻辑判断和DOM操作,以及CSS规则,定义了结算条的显示和固定定位。通过分析这些代码,我们可以更深入地了解实现这些功能的技术细节。 总之,这个资源提供的...

    CSS_style属性大全

    - **功能**: 设置或获取由dataSrc属性指定的绑定到指定对象的给定数据源的字段。 - **语法**: `datafld: [field-name]` - **说明**: 当使用数据绑定技术时,该属性用于指定数据源中的哪个字段将被绑定到当前对象...

    JavaScript快速检测浏览器对CSS3特性的支持情况

    1. 创建一个`<div>`元素,通过`div.style`获取浏览器支持的CSS属性列表。 2. 直接检查CSS特性名称(例如`transform`)是否在列表中,若存在则返回`true`。 3. 对于带有前缀的CSS特性(如`-webkit-transform`),检查...

    原生javascript和jquery判断浏览器版本等信息

    通过特性检测,我们可以检测浏览器是否支持特定的CSS属性或JavaScript API,而不是简单地判断浏览器类型和版本。这样做可以更精准地为不同浏览器提供兼容性支持,同时避免由于浏览器版本更新导致的问题。 总之,...

    用js自动判断浏览器分辨率的代码

    2. 使用条件语句(if...else...)来判断浏览器类型。 3. 根据屏幕分辨率动态设置CSS样式表,以实现响应式设计。 4. `function`关键字用于定义自定义函数,如`ScreenWidth`和`setActiveStyleSheet`。 5. `document....

    js+div+css超酷多种弹出层 兼容各大浏览器

    - 通过正则表达式判断用户代理是否包含 “msie”,以识别 IE 浏览器。 - **透明度设置**: - 对于 IE 浏览器,使用 `filter: alpha(opacity=20)` 实现半透明效果。 - 非 IE 浏览器,则使用标准 CSS 属性 `-moz-...

    浏览器兼容

    同时,利用feature detection(特性检测)技术,如Modernizr,可以动态判断浏览器是否支持某个特性,从而决定是否加载相应的polyfill。 五、响应式设计 随着移动设备的普及,响应式设计变得至关重要。使用媒体查询...

    css日常公用样式与BUG解决方案

    - 使用`feature detection`(特性检测)来判断浏览器是否支持特定CSS特性。 9. **图片处理** - `object-fit`: 控制图片在容器中的填充方式,如`cover`、`contain`等。 - `image-set`: 针对不同设备分辨率提供...

    前端css+html+布局笔记

    选取属性值等于指定值的元素 [属性名^="属性值"] 选取属性值以指定内容开头的元素 [属性名$="属性值"] 选取属性值以指定内容结尾的元素 [属性名*="属性值"] 选取属性值中包含指定内容的元素 兄弟元素选择...

    基于HTML5+CSS3的简单播放器

    2. **视频源和类型**:`<source>`元素的`src`属性指定了视频文件路径,`type`属性则指定视频的MIME类型,如`video/mp4`,确保浏览器能正确识别并播放视频。 3. **兼容性**:不同的浏览器可能支持不同的视频编码格式...

    CSS3对角线淡入相册代码,图片会以对角的形式从左上到右下淡入,点击小图可大图预览,支持键盘左右方向键翻页。

    例如,他们可能会先为支持CSS3动画的浏览器编写代码,然后为不支持的浏览器提供备选方案,如使用JavaScript实现类似的效果。 此外,文件名为“CSS3对角线淡入相册代码,图片会以对角的形式从左上到右下淡入,点击小...

    css 学好的口诀

    2. **实现跨浏览器兼容性**:不同的浏览器对CSS特性的支持程度不同,可以通过检测用户代理(User Agent)来判断浏览器类型,并针对性地调整样式。例如,使用Modernizr库来检测浏览器特性。 3. **解决响应式设计中的...

    CSS3气泡动画文字导航菜单代码

    总之,这个CSS3气泡动画文字导航菜单代码利用了现代浏览器支持的CSS3特性,创造出一种引人注目的交互效果,同时展示了CSS3在网页设计中的强大能力。设计师和开发者可以通过调整这些特性参数,定制出符合自己网站风格...

    js动态的获取浏览器页面放大缩小的比例.pdf

    - `window.devicePixelRatio` 是一个表示设备物理像素与CSS像素之间比例的属性。在大多数现代浏览器中,可以通过这个属性直接获取放大缩小的比例。例如,如果devicePixelRatio等于1.5,说明页面被放大了50%。 3. *...

    巧用CSS属性值正则匹配选择器(小技巧)

    总结起来,CSS属性值正则匹配选择器是增强页面样式和交互性的有力工具。通过巧妙地运用`[attr^="val"]`、`[attr$="val"]`和`[attr*="val"]`,我们可以实现诸如链接类型识别、文件类型图标显示以及搜索过滤等功能,...

    css入门笔记

    样式声明:用样式属性和值组成(属性:值;) 常用的样式属性: 1.颜色 属性 :color 颜色 取值:颜色英文名 2.背景颜色 属性:background 取值 :颜色 3.设置文字大小 属性:font-size 取 值:数值 px ...

Global site tag (gtag.js) - Google Analytics