-
什么是 CSS hack?
不同浏览器和同一浏览器的不同版本, 对css的解析认识不完全一样, 因此会导致生成的页面效果不一样,
这个时候就需要针对不同的浏览器去写不同的css, 从而在不同的浏览器中也能得到想要的页面效果, 这就是css hack
css hack的三种方法: 属性前缀法(即类内部Hack), 选择器前缀法(即选择器Hack), IE条件注释法(即HTML条件注释Hack) -
谈一谈浏览器兼容的思路.
-
要不要做?
(1)产品的角度.(用户, 浏览器, 效果优先or功能优先)
(2)成本的角度 -
做到什么程度
让哪些浏览器支持哪些效果 -
如何做
根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
条件注释、CSS Hack、js 能力检测做一些修补
- 列举5种以上浏览器兼容的写法
(1)条件注释(ie6,7,8,9)
举例:
<script>alert(1);</script>
(2)属性前缀法
IE6能识别下划线""和星号" * "，
IE7能识别星号" * "，但不能识别下划线""，
IE6~IE10都认识"\9"，但firefox前述三个都不能认识
举例:
.box{
color: red;
_color: blue; /ie6/
color: pink; /ie67/
color: yellow\9; /ie/edge 6-8*/
}
(3)选择器前缀法
(4)根据浏览器内核添加样式
- Trident内核：IE浏览器，前缀为-ms-
- Gecko内核：FireFox浏览器, -moz
- Presto内核：Opera浏览器，前缀为-o-
- Webkit内核：Chrome和Safari浏览器，前缀为-webkit-
举例:
-webkit-font-size: 16px;
-o-font-size: 16px;
-moz-font-size: 16px;
-ms-font-size: 16px;
(5)使用兼容相关的开发工具
- html5shiv.js
- respond.js
- css reset
- normalize.css
- modernizr
- 以下工具/名词是做什么的?
-
条件注释
条件注释 是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。 条件注释最初于微软的 Internet Explorer 5浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于IE10停止支持 -
IE Hack
针对IE浏览器编写不同的CSS（属性前缀法、选择器前缀法、IE条件注释法）使得页面效果在不同版本的IE浏览器中达到效果一致。 -
js 能力检测
能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，就可以给出相关的方案 -
html5shiv.js
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题 -
respond.js
Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询 -
css reset
早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题, 这个时候需要清除一些浏览器的默认样式 -
normalize.css
是css reset的替代品.
在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案. -
modernizr
Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能，而是令你通过创建可选风格配置修改页面设计。 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。 -
postCSS
PostCSS 是一个允许使用 JS 插件转换样式的工具。
这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能.
- 一般在哪个网站查询属性兼容性？
http://caniuse.com/
网友评论