什么是 CSS hack
CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。针对不同的浏览器写不同的css,能在不同的浏览器得到想要的效果
谈一谈浏览器兼容的思路
- 以最大程度完善设计稿为基础,再考虑兼容性,不能为盲目为了兼容问题而弃用方便简洁的新方法(如html5、css3);当然也不能用过新的技术方法使得兼容性过于低、实用性差。
- 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
- 优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
列举5种以上浏览器兼容的写法
- CSS里可以给属性或者选择器写hack。属性例如:
* background:blue;_background:red;选择器例如:* html #demo {width:120px;} *+html #demo {width:130px;}
- HTML 针对所有IE:<![endif]-->
- IE7:*background:red;; IE8:\0background:blue;
- !important
- -webkit- ,-moz-,-ms-,-o-,针对不同浏览器的不同前缀
以下工具/名词是做什么的
- 条件注释:条件注释是一种安全的区分IE浏览器版本的语法,是一种浏览器兼容的方法
- IE Hack:针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
- js 能力检测:不同浏览器支持的js方法不同,封装函数解决或对象解决兼容性问题
- html5shiv.js:用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题
- respond.js:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询
- css reset:把浏览器提供的默认样式覆盖掉
- normalize.css:是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一。保留有用的默认值,不同于许多 CSS 的重置;标准化的样式,适用范围广的元素;纠正错误和常见的浏览器的不一致性;一些细微的改进,提高了易用性;使用详细的注释来解释代码。
- Modernizr:提供了一种简单的方式检测任意新特性,从而让我们可以采取相应的操作
- postCSS:一个使用JS 插件来转换CSS 的工具
一般在哪个网站查询属性兼容性?
- caniuse.com