什么是 CSS hack
不同厂商的浏览器,比如IE,Safari,Mozilla Firefox,Chrome等,或是同一厂商浏览器的不同版本,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果;于是我们就需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的结果;简单来说,就是利用不同浏览器对相同css识别不同这个bug,在css中加入兼容各个浏览器的css写法;
CSS hack大致有三种表现形式: CSS属性前缀法,选择器前缀法,IE条件注释法
谈一谈浏览器兼容的思路
- 判断是否需要做浏览器兼容,分别从产品的角度(受众,受众的浏览器比例,效果优先还是功能优先等)与成本的角度进行判断
- 确定兼容的范围,比如需要浏览器支持哪些效果,选择渐进增强或是优雅降级;
- 确定兼容的方法: 1. 根据兼容需求选择技术框架/库(jQuery); 2. 根据兼容需求选择兼容工具(html5shiv.js, respond.js, css reset, nomarlize.css, modernizr); 3. 使用postcss; 4. 使用条件注释, CSS hack, js能力检测做一些修补
一般来说优雅降级与渐进 增强的原则是: 如果比较难兼容的,就保持渐进增强原则,先维持正常的可用功能的实习,再针对其他浏览器兼容做更绚丽的改动;如果是比较容易的兼容,保持优雅降级原则
列举5种以上浏览器兼容的写法
- 条件注释法
<!--[if IE]>只在IE浏览器显示<![endif]-->
<!--[if IE 6]>只在IE6显示<![endif]-->
<!--[if gte IE 6]>只在IE6以上(包括)显示<![endif]-->
<!--[if ! IE 8]>只在IE8不生效<![endif]-->
<!--[if !IE]在非IE浏览器显示<![endif]-->
<!--[if (gte IE 9) | (gt IEMobile 7) | ! (IEMmobile) | ! IE]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
- 合适的框架
- Bootstrap(≥IE8）
- jQuery 版本1≥IE6，版本2≥IE9
- Vue ≥IE9
- css属性前缀法(类内部hack)
.box{
color: red;
-color : bule; /*IE6识别*/
*color: pink; /*IE67识别*/
color: yellow\9; /*IE6~10/edge6~8*/
}
- 选择器前缀法不常用
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- Modernizr
运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”.可以直接使用Modernizr在元素里生成的class名称，在你的css文件里定义相应的属性以便支持当前浏览器。
以下工具/名词是做什么的
- 条件注释: 是于HTML源码中被IE有条件解释的语句;条件注释可被用来向IE提供及隐藏代码;条件注释IE10以上版本不支持
- IE Hack: 针对IE浏览器编写不同的CSS能让IE正常渲染的过程
- js 能力检测: 能力检测的目标不是特定的浏览器,而是检测浏览器的能力;这样,只需要检测浏览器是否支持特定的能力,就可以给出特定的解决方案;这一部分检测是解决浏览器兼容问题的主要检测
- html5shiv.js: 用于解决IE9以下版本浏览器对新增的HTML5标签不识别,并导致CSS不起作用的问题;所提我们在使用过程中,想要让低版本的浏览器(IE9以下版本)支持,HTML5shiv.js是很好的选择
- respond.js: 一个小脚本,用于为IE6~8以及其他不支持CSS3媒体查询功能的浏览器提供媒体查询的min-width和max-width特性,实现响应式网页设计
- css reset: 将浏览器默认样式全部去掉;通过重新定义标签样式,"覆盖"浏览器的CSS默认样式
- normalize.css: 一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一.它可以保留有用的默认值,不同于CSSreset的简单粗暴;标准化的样式,适用范围广的元素;纠正错误和常见浏览器的不一致性;一些细微的改进,提高了易用性;使用详细的注释解释代码
- Modernizr: 可以方便点的为各种情况编写JS和CSS,无论浏览器是否支持这些特性,这是处理渐进增强的完美方案;modernizr会在页面加载后立即检测特性,然后创建一个包含检测结果的JS对象,同事在HTML元素加入方便调整CSS的class名
- postCSS: 可以理解为一个平台,可以让一些插件在上面跑,他提供了一个解析器,可以让CSS解析成抽象语法树,通过postCSS,我们能够开发一些插件,来处理CSS;r热门插件如autoprefixer,可以帮我们处理兼容问题,只需正常写CSS,autoprefixer可以帮我们自动生成兼容代码
一般在哪个网站查询属性兼容性？
caniuse.com
