美文网首页
10. 浏览器兼容

10. 浏览器兼容

作者: Joey的企鹅 | 来源:发表于2017-07-19 00:14 被阅读0次

    CSS hack

    由于不同厂商的流览器或某浏览器的不同版本对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack

    浏览器兼容的思路

    • 要不要做
    • 产品的角度(产品受众、受众的浏览器比例,效果优先还是基本功能优先等)
    • 成本的角度(有无必要去实现某个需求)
    • 做到什么程度
      ——让浏览器支持哪些效果
    • 该怎么做
    • 根据兼容需求选择技术框架/库(jQuery)
    • 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
    • post CSS(自动根据浏览器加前缀)
    • 条件注释、CSS Hack、JS能力检测 做一些修补

    渐进增强和优雅降级

    • 渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
    • 优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

    浏览器兼容的写法

    • 合适的框架
    框架 支持版本
    Bootstrap ≥ IE8
    jQuery 1._ ≥IE6
    jQuery 2._ ≥IE9
    Vue ≥IE9
    • 条件注释
      条件注释(conditional comment)是于HTML源码中被IE有条件解释的语句。可被用来向IE提供及隐藏代码。
      使用了条件注释的页面在IE9中可正常工作,但在IE10中就不行了。IE10不再支持条件注释。
    项目 支持版本 说明
    ! [if !IE] 非IE
    lt [if lt IE5.5] (less than)小于IE5.5
    lte [if lte IE6] (less than or equal)小于等于IE6
    gt [if gt IE5] (great than)大于IE5
    gte [if gte IE7 (great than or equal)大于等于IE7
    竖线 [if (IE6)竖线(IE7)] IE6或IE7

    PS:“非IE”的注释比较特殊一些

    <!-- [if !IE]><!-- >_____________<!-- <![end if]-->
    
    • 属性前缀(即内部Hack)
      IE6能识别 _ 和 *
      IE7能识别 *
      IE6~IE10都能认 " \q "
      但是以上,FireFox都不认识。

    • 选择器前缀
      比如IE6能识别html .class{ },IE7能识别+html .class{ }或者 *:first-child+html .class{ }

    • 合适的工具

    • html5shiv.js

    • respond.js

    • css reset

    • normalize.css

    • Modernizr

    一些常见的属性和写法

    • 常见写法
    .box {
      color: red;
      _color: blue; /* IE6 */
      *color: pink; /* IE6、7 */
      color: yellow\9; /* IE/Edge 6-8 */
    }
    
      <!-- [if IE7] >
      <link rel="stylesheet" href="IE7.css" type="text/css" />
      <!-- [end if] -->
    
    • 常见属性
    属性 兼容情况
    inline-block ≥IE8
    min-width / min-height ≥IE8
    :before / :after ≥IE8
    div:hover ≥IE7
    background-size ≥IE9
    圆角 ≥IE9
    阴影 ≥IE9
    动画 / 渐变 IE10

    名词(工具)解释

    • 条件注释
      这是基于HTML源码中被IE(IE≥9)有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
    • IE Hack
      针对IE浏览器编写不同的CSS(属性前缀法、选择器前缀法、IE条件注释法)使得页面效果在不同版本的IE浏览器中达到效果一致。
    • js 能力检测
      浏览器的能力检测目标不是检测特定的浏览器,而是检测浏览器的能力。这样,只需要检测浏览器是否支持特定的能力,就可以给出特定的解决方案。
    • 优先检测达到目的最常用的特性
    • 检测实际用到的属性
    • html5shiv.js
      针对不支持HTML5标签的浏览器,创建并模拟HTML5的标签的效果并使相应的CSS生效。
    • respond.js
      让 IE6-8 也能实现 CSS3 中的 Media Query(媒体查询)功能,实现响应式设计。
    • CSS Reset
    • CSS Reset 简单地说就是重置浏览器的 CSS 默认属性。
    • 因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如 标签,在 IE 浏览器、Firefox 浏览器以及 Safari 浏览器中的样式都是不同的,所以,通过重置 button 标签的 CSS 属性,然后再将它统一定义,就可以产生相同的显示效果。
    • CSS Reset 内容方法不同,但功能大同小异,都是起到重置的作用,所以说 CSS Reset 是根据个人需求不同可以按需自定义的
    • Normalize.css
      一个很小的CSS文件,让不同浏览器在渲染浏览器时形式更加统一,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。是一种CSS reset的替代方案。
    • 保护有用的浏览器默认样式:而不是完全去掉它们
    • 一般化的样式:为大部分HTML元素提供
    • 修复浏览器自身的bug:并保证各浏览器的一致性
    • 优化CSS可用性:用一些小技巧
    • 解释代码:注释和详细的文档
    • Modernizr
      Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS,无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
      Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。
    • PostCSS
      PostCSS是一个使用 JavaScript 插件来转换CSS的工具,通过PostCSS这个平台,我们自己也能够开发一些插件,来处理CSS。

    相关查询

    浏览器市场份额
    查询CSS属性兼容
    查询Hack的写法

    相关文章

      网友评论

          本文标题:10. 浏览器兼容

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