检测浏览器是否支持某个css属性
以浏览器是否支持translate3d 为例说明,当然现代浏览器已经支持该属性。如果浏览器实现了带有前缀的某个属性,比如说支持-webkit-transform
,但是不支持直接写transform
,可以通过检测浏览器engine,给属性加上特殊的前缀
let docStyle = document.documentElement.style
let translate3d = false
let engine
if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
engine = 'presto'
} else if ('MozAppearance' in docStyle) {
engine = 'gecko'
} else if ('WebkitAppearance' in docStyle) {
engine = 'webkit'
} else if (typeof navigator.cpuClass === 'string') {
engine = 'trident'
}
let cssPrefix = {trident: '-ms-', gecko: '-moz-', webkit: '-webkit-', presto: '-o-'}[engine]
let vendorPrefix = {trident: 'ms', gecko: 'Moz', webkit: 'Webkit', presto: 'O'}[engine]
let helperElem = document.createElement('div')
let perspectiveProperty = vendorPrefix + 'Perspective'
let transformProperty = vendorPrefix + 'Transform'
let transformStyleName = cssPrefix + 'transform'
let transitionProperty = vendorPrefix + 'Transition'
let transitionStyleName = cssPrefix + 'transition'
let transitionEndProperty = vendorPrefix.toLowerCase() + 'TransitionEnd'
// 可能带prefix前缀也可能不带
if (helperElem.style[perspectiveProperty] !== undefined) {
translate3d = true
}
检测浏览器是否支持某个css属性的更多相关文章
- 判断浏览器是否支持某个css属性
方法:直接判断浏览器是否支持某个CSS属性才是王道,document.documentElement.style 如:判断是否支持 transform if( 'MozTransform' in do ...
- 判断浏览器是否支持指定CSS属性和指定值
/** * @param attrName 属性名 * @param attrVal 属性值 * @returns {boolean} */ function isCssAttrSupported(a ...
- 测试浏览器是否支持某个CSS属性
花了几个小时写了个API,为了兼容多种用法和测试花了不少时间,求鞭打.嘲笑和建议. <!DOCTYPE HTML> <html lang="zh-CN"> ...
- js检测浏览器是否支持某属性
以检测浏览器是否支持 input 标签的 required 属性为例: var isSupport = 'required' in document.createElement('input');
- 十个实用但IE不支持的CSS属性
对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6.当然,这样的想法是非常病态的,马上打消.本文里面,介绍了10个 ...
- 判断浏览器是否支持某个css3属性的javascript方法
判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...
- WebSocket API使用篇检测浏览器是否支持WebSocket(4)
WebSocket API是下一代客户端-服务器的异步通信方法.前面有三篇文章已经对WebSocket有了一些介绍,这里我总结了一下.我在使用WebSockets API过程中遇到的问题. 1.检测浏 ...
- CSS中浏览器开发商特定的CSS属性
浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...
- 检测浏览器是否支持cookie方法
cookie 摘自: http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html Cookie是什么? Cookie 是一小段文本信息 ...
随机推荐
- 奇怪吸引子---LorenzStenflo
奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...
- Android典型界面设计(3)——访网易新闻实现双导航tab切换
一.问题描述 双导航tab切换(底部区块+区域内头部导航),实现方案底部区域使用FragmentTabHost+Fragment, 区域内头部导航使用ViewPager+Fragment,可在之前博客 ...
- java 查看线程的信息
的代码上加上 断点 运行 进入Terminal jps 查看进程号 jstack 进程号 查看线程的信息 jstack pid 此时进去DEBUG 端F9 跑完程序 再回到Terminal 中 就能 ...
- 【转】JavaScript 的装载和执行
承接前面一篇文章<浏览器的渲染原理简介> ,本文来说下JavaScript的装载和执行. 通常来说,浏览器对于 JavaScript 的运行有两大特性: 1) 载入后马上执行 2) 执行时 ...
- ionic build - 修改gradle路径提升速度和成功率
ionic build 不成功很多时候是因为下载gradle太慢, 我们可以下载好gradle然后修改配置文件, 从而省去这个烦人的下载过程 1. 下载报错时的gradle zip文件, 或者直接查看 ...
- tmux 共享窗口大小
http://www.cnblogs.com/bamanzi/p/tmux-share-windows-between-sessions.html
- Atlas+Keepalived系列一:安装Atlas:
1:下载Atlas https://github.com/Qihoo360/Atlas/releases/download/2.2.1/Atlas-2.2.1.el6.x86_64.rpm 2:安装A ...
- MYSQL浮点型转int类型
cast('3.15926' as signed) cast(浮点型 as signed)
- python实现模拟登录
本文主要用python实现了对网站的模拟登录.通过自己构造post数据来用Python实现登录过程. 当你要模拟登录一个网站时,首先要搞清楚网站的登录处理细节(发了什么样的数据,给谁发等...). ...
- golang 面向对象编程
概述 Golang语言的面向对象与c++,py等语言有所不同,是由于Golang不支持继承:与上述支持聚合和继承的面向对象的语言不同,Golang只支持聚合(也叫做组合)和嵌入.聚合和嵌入的区别: t ...