什么是 CSS hack
不同浏览器的核心解析认识不一样，造成同一段代码在不同浏览器最终的页面不一样。这时候需要针对不同的浏览器写不同的CSS，或者使CSS兼容不同的浏览器，使得页面能得到我们想要的结果。
谈一谈浏览器兼容的思路
-
要不要
做产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
成本的角度 (有无必要做某件事) -
做到什么程度
让哪些浏览器支持哪些效果 -
如何做
根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
条件注释、CSS Hack、js 能力检测做一些修补
列举5种以上浏览器兼容的写法
- 条件注释
| 项目 | 范例 | 说明 |
|-|-|
|！ | [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: red; _color: blue; /*ie6*/ *color: pink; /*ie67*/ color: yellow\9; /*ie/edge 6-8*/ }
inline-block: >=ie8 min-width/min-height: >=ie8 :before,:after: >=ie8 div:hover: >=ie7 inline-block: >=ie8 background-size: >=ie9 圆角: >= ie9 阴影: >= ie9 动画/渐变: >= ie10
以下工具/名词是做什么的
- 条件注释
条件注释 是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。 条件注释最初于微软的 Internet Explorer 5浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于IE10停止支持。 - IE Hack
针对不同的浏览器写不同的CSS，或者使CSS兼容不同的浏览器，使得页面能得到我们想要的结果。 - js 能力检测
浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。 - html5shiv.js
在使用html5的时候，有些浏览器不支持h5的一些新特性和标签，需要用这个html5shiv.js来模拟这些标签。 - respond.js
在做响应式网页的时候一些浏览器器不支持媒体查询等css3新特性，使用respond.js来兼容。 - css reset
将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。更简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。 - normalize.css
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。
它可以：
保留有用的默认值，不同于许多 CSS reset 的简单粗暴。
标准化的样式，适用范围广的元素。
纠正错误和常见的浏览器的不一致性。
一些细微的改进，提高了易用性。
使用详细的注释来解释代码。 - Modernizr
Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整CSS 的 class 名。 。 - postCSS
它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码
网友评论