1,什么是 CSS hack
CSS hack是一种编程技术。由于不同厂商的浏览器或者同一厂商不同版本的浏览器(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对css支持、解析不一样,导致在不同浏览器或同一浏览器不同版本上展现的页面效果不一样。这时,我们为了获得同一的页面展示效果,所以需要针对不同浏览器或不同版本写特定的css样式,我们把针对不同浏览器,不同版本写相应css code的过程,叫做css hack。
css hack 维基百科
查看css属性兼容
查hack的写法
2,谈一谈浏览器兼容的思路
1)要不要做
a,产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)
b,成本的角度 (有无必要做某件事)
2)做到什么程度
让哪些浏览器支持哪些效果
3)如何做
a,根据兼容需求选择技术框架/库(jquery)
b,根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
c, postCSS
d,条件注释、CSS Hack、js 能力检测做一些修补
3,列举5种以上浏览器兼容的写法
1)合适的框架:
Bootstrap(>=ie8)
jQuery1.(>=ie6) ,jQuery2.(>=ie9)
Vue(>=ie9
2)兼容开发利器
html5shiv.js、respond.js、css reset、normalize.css、Modernizr
例子:
利用Modernizr.css对浏览器能力的检测,对标签不存在的特别优化
3)CSS hack
样式类名添加前缀:
!important妙用:
动态属性:
条件注释和工具结合:
只在ie8中显示
只在非ie浏览器中显示
在大于ie6和非ie浏览器中显示
4,以下工具/名词是做什么的
条件注释
条件注释是,Html源码中被IE浏览器有条件解析的语句,可以对IE提供显示及隐藏代码
IE Hack
IE浏览器可以识别的css写法,有属性前缀,选择器前缀,IE条件注释
js 能力检测
使用js的语法检测浏览器的能力,为不同的能力提供不同的方案进行页面展示
html5shiv.js
对不兼容html5标签的浏览器,创建并模拟html5标签的效果并使相应css生效
respond.js
对不支持CSS3媒体查询的浏览器(ie6-8)模拟CSS3的媒体查询
css reset
清除浏览器元素的默认样式
normalize.css
保护有用的浏览器默认样式;一般化的样式,修复浏览器自身的bug并保证各浏览器的一致性;优化CSS可用性。
Modernizr
是一个JS类库,用来检测浏览器的CSS3和HTML5能力,从而解决浏览器的兼容问题。
postCSS
使用JS插件转换样式的工具。这些插件可以删除您的CSS,支持变量和混合,最新的CSS语法,内联图像等。
在写css属性时,按照正常css属性名书写,通过postCSS命令,自动为css命名添加前缀