1、什么是 CSS hack
由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。CSS hack 就是这种情况下我们针对不同的浏览器去写不同的CSS的一个过程,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
2、谈一谈浏览器兼容的思路
第一、产品的受众,及受众使用的各浏览器的比例,效果优先还是基本功能优先。
第二、成本的考虑,投入产出比。
第三、兼容哪些浏览器,兼容到什么版本,让哪些浏览器支持哪些效果。
第四、渐进增强和优雅降级的选择
第五、根据兼容需求选择技术框架,比如:
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
第六、根据兼容需求选择兼容工具html5shiv.js、respond.js、css reset、Modernizr、postCSS
第七、条件注释、CSS Hack、js 能力检测做一些修补。
3、列举5种以上浏览器兼容的写法
*,ie6,ie7可以识别;
_和- , ie6可以识别;
!important ,表示高优先级,ie7及以上,firefox都支持,ie6认识带!important的样式属性,但不认识!important的优先级;
-webkit- ,针对safari,chrome浏览器的内核CSS写法
-moz-,针对firefox浏览器的内核CSS写法
-ms-,针对ie内核的CSS写法
-o-,针对Opera内核的CSS写法
4、以下工具/名词是做什么的
- 条件注释
IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法。
条件注释只能用于IE5以上。
如果你安装了多个IE,条件注释将会以最高版本的IE为标准。
条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
条件注释是一种安全的区分IE浏览器版本的语法,且被认为是取代针对IE css hack的首选办法。
写法:
用于非 IE
- IE Hack
CSS Hack大致有3种表现形式, CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。 - js 能力检测
浏览器的能力检测目标不是检测特定的浏览器,而是检测浏览器的能力。这样,只需要检测浏览器是否支持特定的能力,就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。 - html5shiv.js
用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。
由于IE6/IE7/IE8还有很大一部分用户,为了让网站浏览者都能正常的访问HTML5网站,解决方案就有下面使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式(Bootcss官方例子也是如此)。
原理:利用脚本document.createElement(“”)创建对应的脚本,CSS选择器便可正确应用到该标签。使用:考虑到IE9是支持html5的,所以直接在HTML页面的head标签中添加脚本引用即可
- respond.js
让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。 - css reset
将浏览器的默认样式全部去掉,就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。 - normalize.css
normalize.css 是一个可定制的CSS文件,使浏览器呈现的所有元素,更一致和符合现代标准。它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的样式。这是一个现代的,HTML5-ready 的CSS重置样式集。 - Modernizr
Modernizr 是一个 JavaScript 库,用于检测用户浏览器的 HTML5 与 CSS3 特性。
Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
工作原理
Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。 - postCSS
PostCSS 是使用 JS 插件来转换 CSS 的工具,支持变量,混入,未来 CSS 语法,内联图像等等。
PostCSS 包括 CSS 解析器,CSS 节点树 API,一个源映射生成器和一个节点树 stringifier。
PostCSS是CSS变成JavaScript的数据,使它变成可操作。PostCSS是基于JavaScript插件,然后执行代码操作。PostCSS自身并不会改变CSS,它只是一种插件,为执行任何的转变铺平道路。
5、一般在哪个网站查询属性兼容性?
can i ues http://caniuse.com/