入门12

作者: 安石0 | 来源:发表于2017-05-31 11:13 被阅读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

    相关文章

      网友评论

          本文标题:入门12

          本文链接:https://www.haomeiwen.com/subject/eubdfxtx.html