浏览器兼容
什么是 CSS hack
- 根据不同厂商的浏览器，比如internet Explore、Safari、Mozilla、Firefox、chrome等，或是同一厂商浏览器的不同版本、比如IE6和IE7，对CSS解析认识不完全一样，得不到我们所需要的页面效果。
这是我们就需要根据不同浏览区去写不同的CSS，让它能在不同的浏览器也能得到同样的效果。 - CSS hack大致有三种表现形式，css属性前缀法、选择器前缀法以及IE条件注释法(即html头部引用if IE)Hack，实际项目中CSS Hack大部分是根据IE浏览器的不同版本之间的表现差异引入的。
- 1.属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
- 2.选择器前缀法(即选择器Hack)
- 3.IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效
谈一谈浏览器兼容的思路
- 要不要做产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度 (有无必要做某件事)
- 做到什么程度让哪些浏览器支持哪些效果
- 如何做根据兼容需求选择技术框架/库(jquery)
- 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
postCSS
条件注释、CSS Hack、js 能力检测做一些修补
列举5种以上浏览器兼容的写法
.clearfix:after{content: "";display: block;clear: both;} .clearfix { *zoom:1;}*zoom:1是属性前缀
if IE 6是ie的条件注释
div{width:500px;height:500px;color:blue;}div\9{color:yellow;} \9是选择器前缀
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;这是浏览器内核前缀
选择合适的类库
使用工具css reset ,Modernizr 等
以下工具/名词是做什么的
- 条件注释:于HTML源码中被IE有条件解释的语句,可被用来向IE提供及隐藏代码。
- IE Hack : 指的是IE浏览器漏洞，利用IE Hack，我们可以兼容IE低版本
- js 能力检测 : 检测当前浏览器支持和不支持的特性。如Modernizr.js,它会为浏览器的html标签生成一批的css的class名称，标记当前浏览器支持和不支持的特性。我们利用html标签上的类名，就可以为不同版本的不同浏览器添加兼容样式。
- html5shiv.js: 使低版本浏览器模拟H5的标签
- respond.js:使低版本浏览器模拟媒体查询
- css reset : css初始化样式,核心作用就是清除HTML自带的样式
- normalize.css : 也是css初始化,保护有用的浏览器默认样式而不是全部清除,修复一些浏览器bug,优化css可用性,解释代码
- Modernizr: 检测浏览器是否支持一些功能
- postCSS 是通过自定义插件和工具这样的生态系统来改造CSS。把扩展的语法和特性转换成现代的浏览器友好的CSS
网友评论