入门12

2017-05-31  本文已影响0人  安石0

什么是 CSS hack

CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

谈一谈浏览器兼容的思路:

要不要做

产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先)

成本的角度 (有无必要做某件事)

做到什么程度

让哪些浏览器支持哪些效果

如何做

根据兼容需求选择技术框架/库(jquery)

根据兼容需求选择兼容工具(html5shiv.jsrespond.jscss resetnormalize.cssModernizr)

postCSS

条件注释、CSS Hack、js 能力检测做一些修补

合适的框架

Bootstrap(>=ie8)jQuery1.~(>=ie6), jQuery2.~(>=ie9)Vue(>= ie9)

条件注释

CSS hack

.box{color: red;/*所有浏览器都支持*/color:red!important;  ⁄* Firefox、IE7支持 *⁄    _color: blue;/*ie6支持*/*color: pink;/*ie6、7支持*/color: yellow\9;/*ie/edge 6-8*/}

常见兼容处理范例

.clearfix:after{content:'';display: block;clear: both;}.clearfix{*zoom:1;/* 仅对ie67有效 */}

使用兼容工具

html5shiv.js(模拟新标签用js创建一个新元素)

respond.js(模拟css3媒体查询)

css reset

Normalize.css,

Modernizr

以下工具/名词是做什么的

条件注释

注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。

IE Hack

针对不同的浏览器编写不同的css代码,从而使每个版本的浏览展示效果基本相同

.box{color: red;_color: blue;/*ie6*/*color: pink;/*ie67*/color: yellow\9;/*ie/edge 6-8*/}

js 能力检测

检查浏览器是否支持某些js的方法和属性

html5shiv.js

用js创建一个新元素,模拟高浏览器版本支持的新标签

respond.js

模拟css3媒体查询

css reset

因为早期的浏览器支持和理解的CSS规范不同,导致渲染页面时效果不一致,会出现很多兼容性问题,需要将元素样式进行初始化

normalize.css 

Normalize.css是一种CSS reset的替代方案。

保护有用的浏览器默认样式而不是完全去掉它们

一般化的样式:为大部分HTML元素提供

修复浏览器自身的bug并保证各浏览器的一致性

优化CSS可用性:用一些小技巧

解释代码:用注释和详细的文档来

Modernizr

Modernizr 是一个很小的用来检测下一代 Web 技术原生实现可用性的JavaScript 库。

HTML5 和 CSS3 都引入了各自的新特性,但是同时也有很多浏览器不支持这些新特性。

Modernizr 提供了一种简单的方式检测任意新特性,从而让我们可以采取相应的操作。比如,浏览器还不支持视频特性,那么我们可以显示一个简单的页面。

属性可用性而不是浏览器版本,加class:no-textshadow

postCSS

简而言之,PostCSS 可以将 CSS 转变成 JavaScript 可以操作的数据格式。基于 JS 写的插件可以完成上面所说的那些操作。PostCSS 本身不会对 CSS 代码作任何修改,她只是为插件提供了一些接口,方便插件完成它们各自的功能。

一般在哪个网站查询属性兼容性?

can i use

上一篇下一篇

猜你喜欢

热点阅读