CSS hack
2017-03-19 本文已影响0人
赫鲁晓夫的玉米棒子
一、什么是CSS hack
由于市场上的各大浏览器厂商使用的浏览器内核不同，导致对于一些CSS样式有着不同的支持程度和解析方法。为了解决这些误差，采取不同的CSS样式设置来解决这些问题，让页面能同时减兼容不同的浏览器。这样就叫做CSS hack。
二、谈一谈浏览器兼容的思路
第一、清楚自己所写产品的受众是谁，他们使用各浏览器的比例是多少。
第二、兼容哪些浏览器，放弃哪些浏览器。
第三、在兼容性不同的浏览器上，哪些需要做到精美，哪些只需基本功能，考虑实现效果的成本和回报。
第四、根据兼容需求选择技术库和框架，根据兼容需求选择相应的兼容工具。
合适的框架：
- Bootstrap (>=ie8)
- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
- Vue (>= ie9)
三、列举5种以上浏览器兼容的写法
条件注释（IE10不支持条件注释）
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
项目 范例 说明
！ [if !IE] 非IE
lt [if lt IE 5.5] 小于IE 5.5
lte [if lte IE 6] 小于等于IE6
gt [if gt IE 5] 大于 IE5
gte [if gte IE 7] 大于等于IE7
| [if (IE 6)|(IE 7)] IE6或者IE7
属性选择器
.box{
color: green;
_color: red; /*ie6*/
*color: yellow; /*ie67*/
color: blue\9; /*ie/edge 6-8*/
}
选择器前缀
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
使用Modernizr工具。
四、以下工具/名词是做什么的
- 条件注释
条件注释是IE5到IE9中HTML里一个特殊的解释语句。用于判断IE浏览器版本。且这些判断不是在脚本里执行的，而是直接在HTML代码中执行的。
- IE Hack
针对不同版本浏览器，编写对应的CSS，让其能正常渲染页面。 - js 能力检测
检测该浏览器是否支持某一特定能力。 - html5shiv.js
用于解决IE9以下版本不能对HTML5新增标签进行支持，导致CSS无法作用。 - respond.js
respond.js可以为IE6-IE8以及其他不支持CSS3媒体查询功能的浏览器提供媒体查询的min-width和max-width特性，实现响应式布局。 - css reset
将浏览器的默认样式全部重新定义。 - normalize.css
normalize.css是一个可定制的CSS文件，它让不同的浏览器在渲染网页的时候更加统一。 - Modernizr
Modernizer可以使得更加方便的为各种情况编写JS和CSS，无论浏览器是否支持。
Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。 - postCSS
它使用 JavaScript 代码来转换 CSS 中的样式。PostCSS 的插件可以完成各种不同的功能。
