入门12
什么是 CSS hack
CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
谈一谈浏览器兼容的思路:
要不要做
产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
成本的角度 (有无必要做某件事)
做到什么程度
让哪些浏览器支持哪些效果
如何做
根据兼容需求选择技术框架/库(jquery)
根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
条件注释、CSS Hack、js 能力检测做一些修补
合适的框架
Bootstrap(>=ie8)jQuery1.~(>=ie6), jQuery2.~(>=ie9)Vue(>= ie9)
条件注释
CSS hack
.box{color: red;/*所有浏览器都支持*/color:red!important; ⁄* Firefox、IE7支持 *⁄ _color: blue;/*ie6支持*/*color: pink;/*ie6、7支持*/color: yellow\9;/*ie/edge 6-8*/}
常见兼容处理范例
.clearfix:after{content:'';display: block;clear: both;}.clearfix{*zoom:1;/* 仅对ie67有效 */}
使用兼容工具
html5shiv.js(模拟新标签用js创建一个新元素)
respond.js(模拟css3媒体查询)
css reset
Normalize.css,
Modernizr
以下工具/名词是做什么的
条件注释
注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
IE Hack
针对不同的浏览器编写不同的css代码,从而使每个版本的浏览展示效果基本相同
.box{color: red;_color: blue;/*ie6*/*color: pink;/*ie67*/color: yellow\9;/*ie/edge 6-8*/}
js 能力检测
检查浏览器是否支持某些js的方法和属性
html5shiv.js
用js创建一个新元素,模拟高浏览器版本支持的新标签
respond.js
模拟css3媒体查询
css reset
因为早期的浏览器支持和理解的CSS规范不同,导致渲染页面时效果不一致,会出现很多兼容性问题,需要将元素样式进行初始化
normalize.css
Normalize.css是一种CSS reset的替代方案。
保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式:为大部分HTML元素提供
修复浏览器自身的bug并保证各浏览器的一致性
优化CSS可用性:用一些小技巧
解释代码:用注释和详细的文档来
Modernizr
Modernizr 是一个很小的用来检测下一代 Web 技术原生实现可用性的JavaScript 库。
HTML5 和 CSS3 都引入了各自的新特性,但是同时也有很多浏览器不支持这些新特性。
Modernizr 提供了一种简单的方式检测任意新特性,从而让我们可以采取相应的操作。比如,浏览器还不支持视频特性,那么我们可以显示一个简单的页面。
属性可用性而不是浏览器版本,加class:no-textshadow
postCSS
简而言之,PostCSS 可以将 CSS 转变成 JavaScript 可以操作的数据格式。基于 JS 写的插件可以完成上面所说的那些操作。PostCSS 本身不会对 CSS 代码作任何修改,她只是为插件提供了一些接口,方便插件完成它们各自的功能。
一般在哪个网站查询属性兼容性?