各种奇妙的hack
Chrome
Selector Hacks
Supports Hacks
Property/Value Hacks
.selector { (;property: value;); }.selector { [;property: value;]; }
- Chrome ≤ 28
- Safari ≤ 7
- Opera ≥ 14
JavaScript Hacks
Webkit
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
- Chrome *
- Safari ≥ 3
- Opera ≥ 14
Media Query Hacks
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
- Chrome ≥ 29
- Opera ≥ 16
Firefox
Selector Hacks
Everything but Firefox and Internet Explorer ≤8
_::selection, .selector:not([attr*='']) {}
- Internet Explorer ≤ 8
- firefox *
Supports Hacks
@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {}
- firefox ≥ 30
JavaScript Hacks
Media Query Hacks
@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: .001dpcm) {}@media all and (-moz-images-in-menus:0) and (min-resolution: .001dpcm) {}
- firefox ≥ 8
@media all and (min--moz-device-pixel-ratio:0) { @media (min-width: 0px) {} }@media all and (-moz-images-in-menus:0) { @media (min-width: 0px) {} }
- firefox ≥ 11
Miscellaneous
Internet Explorer
Selector Hacks
.unused-class can be any unused class
* html .selector {}.unused-class.selector {}
- Internet Explorer ≤ 6
*:first-child+html .selector {}.selector, x:-IE7 {}*+html .selector {}body*.selector {}
- Internet Explorer 7
Everything but Internet Explorer ≤7
html > /**/ body .selector {}head ~ /**/ body .selector {}
- Internet Explorer ≤ 7
Everything but Firefox and Internet Explorer ≤8
_::selection, .selector:not([attr*='']) {}
- Internet Explorer ≤ 8
- firefox *
Everything but Internet Explorer ≤8
:root .selector {}body:last-child .selector {}body:nth-of-type(1) .selector {}body:first-of-type .selector {}.selector:not([attr*='']) {}
- Internet Explorer ≤ 8
Property/Value Hacks
Any combination of these characters: ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
.selector { !property: value; }.selector { $property: value; }.selector { &property: value; }.selector { *property: value; }.selector { )property: value; }.selector { =property: value; }.selector { %property: value; }.selector { +property: value; }.selector { @property: value; }.selector { ,property: value; }.selector { .property: value; }.selector { /property: value; }.selector { `property: value; }.selector { ]property: value; }.selector { #property: value; }.selector { ~property: value; }.selector { ?property: value; }.selector { :property: value; }.selector { |property: value; }
- Internet Explorer ≤ 7
Acts as an !important; string after ! can be anything
.selector { property: value !ie; }
- Internet Explorer ≤ 7
JavaScript Hacks
Check for Internet Explorer version
var ieVersion = /*@cc_on (function() {switch(@_jscript_version) {case 1.0: return 3; case 3.0: return 4; case 5.0: return 5; case 5.1: return 5; case 5.5: return 5.5; case 5.6: return 6; case 5.7: return 7; case 5.8: return 8; case 9: return 9; case 10: return 10;}})() || @*/ 0;
- Internet Explorer 3-10
var isIE = document.all && document.querySelector && !document.addEventListener;
- Internet Explorer 8
Check for Internet Explorer version
var ieVersion = (function() { if (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) { return parseFloat( RegExp.$1 ); } else { return false; } })();
- Internet Explorer ≤ 10
var isIE = 'behavior' in document.documentElement.style && '-ms-user-select' in document.documentElement.style;
- Internet Explorer 10
var isIE = '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style;
- Internet Explorer 11
Media Query Hacks
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
- Internet Explorer ≥ 10
Everything but Internet Explorer and Safari ≤6
@media screen { @media (min-width: 0px) {} }
- Internet Explorer *
- Safari ≤ 6
Conditional comments
<!--[if IE 6]> Internet Explorer 6 <![endif]--><!--[if IE 7]> Internet Explorer 7 <![endif]--><!--[if IE 8]> Internet Explorer 8 <![endif]--><!--[if IE 9]> Internet Explorer 9 <![endif]-->
- Internet Explorer 6-9
<!--[if lte IE 6]> Internet Explorer 6 or less <![endif]--><!--[if lte IE 7]> Internet Explorer 7 or less <![endif]--><!--[if lte IE 8]> Internet Explorer 8 or less <![endif]--><!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->
- Internet Explorer 6-9
<!--[if gte IE 6]> Internet Explorer 6 or greater <![endif]--><!--[if gte IE 7]> Internet Explorer 7 or greater <![endif]--><!--[if gte IE 8]> Internet Explorer 8 or greater <![endif]--><!--[if gte IE 9]> Internet Explorer 9 or greater <![endif]-->
- Internet Explorer 6-9
Everything but Internet Explorer ≤9
<!--[if !IE]><!--> Everything but Internet Explorer ≤9 <!--<![endif]-->
- Internet Explorer ≤ 9
Opera
Selector Hacks
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {}
- Opera ≤ 11
Supports Hacks
Property/Value Hacks
.selector { (;property: value;); }.selector { [;property: value;]; }
- Chrome ≤ 28
- Safari ≤ 7
- Opera ≥ 14
JavaScript Hacks
Webkit
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
- Chrome *
- Safari ≥ 3
- Opera ≥ 14
Media Query Hacks
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
- Chrome ≥ 29
- Opera ≥ 16
Opera Mini
JavaScript Hacks
var isOperaMini = Object.prototype.toString.call(window.operamini) === '[object OperaMini]';
- Opera Mini *
Safari
Selector Hacks
Property/Value Hacks
.selector { (;property: value;); }.selector { [;property: value;]; }
- Chrome ≤ 28
- Safari ≤ 7
- Opera ≥ 14
JavaScript Hacks
Webkit
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
- Chrome *
- Safari ≥ 3
- Opera ≥ 14
var isSafari = !!navigator.userAgent.match(/safari/i) && !navigator.userAgent.match(/chrome/i) && typeof document.body.style.webkitFilter !== "undefined" && !window.chrome;
- Safari 6
Media Query Hacks
Everything but Internet Explorer and Safari ≤6
@media screen { @media (min-width: 0px) {} }
- Internet Explorer *
- Safari ≤ 6
各种奇妙的hack的更多相关文章
- 转载:移动web开发规范
本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头 ...
- html5手机常见问题与工具分享
mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 ...
- mobileTech
A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 工具类网站 HTML ...
- (任寒韬)WebApp群主 - MobileTech 资料
web app : http://www.lightapp.cn/brand/index/4101 https://github.com/jtyjty99999/mobileTech/blob/mas ...
- mobilehack -转
# mobileHack##工具类网站 [HTML5 与 CSS3 技术应用评估](http://html5please.com/ "html5与css3技术应用评估") [各种奇 ...
- frontend-tools
收集整理好用的前端开发利器(Collect good front-end development tools ) 1.w3cplus前端工具 2.jsfiddle在线JS代码调试工具 3.w3cfun ...
- 移动Web解决方案的链接收藏
信息类 html5 浏览器兼容性查询 - 浏览器内建对象文档 es5规范浏览器兼容性表格 es6规范浏览器兼容性表格 stackoverflow 最靠谱的问题解决方案 github 开源代码网站 全球 ...
- css常用hack
原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...
- CSS3_01之选择器、Hack
1.兄弟选择器:①相邻兄弟选择器:元素的后一个兄弟元素,选择器1+选择器2:②通用兄弟选择器:元素后的所有兄弟元素,选择器1~选择器2: 2.属性选择器:attr表示属性名称,elem表示元素名:①[ ...
随机推荐
- Jmeter(四)_16个逻辑控制器详解
循环控制器: 指定其子节点运行的次数,可以使用具体的数值,也可以设置为变量 1:勾选永远:表示一直循环下去 2:如果同时设置了线程组的循环次数和循环控制器的循环次数,那循环控制器的子节点运行的次数为两 ...
- CentOS 6.8 安装Maven
1.下载maven安装包到developer文件目录下 2,解压缩maven,命令: -bin.tar.gz 3.配置maven路径到环境变量中 export JAVA_HOME=/usr/java/ ...
- Unity程序协同问题,传送时屏幕变黑变亮的解决,常规操作的行为集合
在unity中运行某段程序时往往需要运行另外一段不相干但是却对功能上有需求的程序,比如进行场景传送,在传送点处,点击I键,屏幕慢慢变黑,场景传送到另外一个场景,场景又慢慢变亮.这里首先涉及两个物体,一 ...
- About The Algorithm Simplification
For mode 1, you have to ergod all the data in the files. So the key point to solve this problem is t ...
- Linux命令(二十七) 用户组管理命令
Linux提供了一系列的命令管理用户组.用户组就是具有相同特征的用户集合.每个用户都有一个用户组,系统能对一个用户组中所有用户进行集中管理,通过把相同属性的用户定义到同一用户组,并赋予该用户自一定的操 ...
- [转帖]Linux后端执行命令的方法
Linux 后台执行命令的方法 http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=4241330&fromuid=212883 ...
- IdeaVim-常用操作(转载)
IdeaVim简介 IdeaVim是IntelliJ IDEA的一款插件,他提高了我们写代码的速度,对代码的跳转,查找也很友好. 安装位置 安装之后它在 Tools > Vim Emulator ...
- Nginx 配置遇到问题
1 connect() to 10.2.20.170:1009 failed (13: Permission denied) while connecting to upstream 现这个错误是因为 ...
- 查看是否存在tomcat进程和关闭方法
#看是否已经有tomcat在运行了 ps -ef |grep tomcat #如果有,用kill; kill - pid #pid 为相应的进程号 例如 ps -ef |grep tomcat 输出如 ...
- selenium_UI自动化——篇1(基础)
元素定位的几种方式: (1)driver.find_element_by_id("idname") (2)driver.find_element_by_name("nam ...