什么是CSS hack
所谓css hack是指在css样式中加上一些特殊的符号,让不同的浏览器能够识别不同的特殊符号,用来达到应用不同CSS样式的目的。简单来说,就是不同浏览器在解读CSS时候,进行对网页内容显示差别的处理,由于各个浏览器的内核不相同,因此造成误差难以避免。
浏览器兼容的思路
对于浏览器兼容的思路,首先考虑的是,要不要做?从两个方面进行考虑,一个是产品的角度进行考虑,对于一个产品,要考虑其受众,受众的浏览器比例,是功能优先还是效果优先;
其次考虑的是要做到什么程度,让哪些浏览器支持,要实现什么效果。
再者考虑的是如何做?从中要根据技术的需求选择技术框架/库(jquery),其中框架如下
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
根据兼容需求选择兼容工具。然后对条件注释,css hack,js的能力检测做一些修补。
对于浏览器兼容还包括平稳退化和渐进增强。
平稳退化是指一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
渐进增强是指针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
列举五种以上浏览器兼容的写法
- 条件注释
<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css"/><![endif]-->
- css hack 方法,这个方法又具体细分为3个方法 分别为
属性前缀法:ie6能识别下划线"_"和" ",ie7能识别" ",但是不能识别下划线。IE6~IE10都认识"\9",但firefox前述三个都不能识别。
常见的属性兼容情况:
inline-blcok:>=ie8
min-width:>=ie8
:before:after:>=ie8
div:hover>=ie8,
background-size: >=ie9
圆角:>=ie9
阴影:>=ie9
动画渐变:>=ie10
选择器前缀法
IE条件注释法结合选择器整体优化
- 利用兼容开发工具,例如Modernizr:运行的时候它会在html元素上添加一批css的class名称,这些class名称标记当前浏览器支持哪些特性和不支持哪些特性,支持的特性就直接显示该特性的名称作为一个class,不支持的特性的class是no-特性名称。我们就可以直接使用modenizr在元素里生成的class的名称,在css文件里定义相应的属性以便支持当前的浏览器。
以下名词意义以及作用
- 条件注释:条件注释是一种安全区分IE浏览器版本的语法,且被认为是取代 IE css hack,条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
- IE hack: 针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程。
- js 检测能力:浏览器的能力检测目标不是检测特定的浏览器,而是检测浏览器的能力。这样,只需要检测浏览器是否支持特定的能力,就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
- html5shiv.js:用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。
- respond.js:在做响应式网页的时候一些浏览器器不支持媒体查询等css3新特性,使用respond.js来兼容。
- css reset:重置浏览器的默认样式,也就是重新定义标签的样式。
- normalize css:不像css reset一样重置所有样式,而是保留有用的样式。而且标准化的样式适用于更广的元素。
- Modernizr:Modernizr帮助我们检测浏览器是否实现了某个feature,如果实现了那么开发人员就可以充分利用这个feature做一些工作,反之没有实现开发人员也好提供一个fallback。所以,我们要明白的是Modernizr只是帮我们检测feature是否被支持,它并不能够给浏览器添加那些本来不支持的feature。
- postCSS:它可以被理解为一个平台,可以让一些插件在上面跑,它提供了一个解析器,可以将CSS解析成抽象语法树,通过PostCSS这个平台,我们能够开发一些插件,来处理CSS。热门插件如autoprefixer,它可以帮我们处理兼容问题,只需正常写CSS,autoprefixer可以帮我的自动生成兼容性代码