zoukankan      html  css  js  c++  java
  • 转:浏览器兼容

    1.什么是 CSS hack

    CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
    简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
    CSS Hack大致有三种表现形式 :

    • css属性前缀法
    • 选择器前缀法
    • IE条件注释法

    2.谈一谈浏览器兼容的思路

    • 1.要不要做
      产品的角度(产品的受众,受众的浏览器比例,效果优先还是基本功能优先)
      成本的角度(有无必要做某件事情)
    • 2.做到什么程度
      让哪些浏览器去支持哪些效果
    • 3.如何做
      1.根据兼容需求选择技术框架/库(Bootstrap (>=ie8),jQuery 1 (>=ie6), jQuery 2 (>=ie9),Vue (>= ie9)
      2.根据兼容需求选择兼容工具(html5shiv.js/respond.js/css reset/normalize.css/modernizr/postCSS)
      3.条件注释/css Hack/js 能力检测做一些修补

    • 4.关于浏览器兼容的应对策略(渐进增强和优雅降级)
      渐进增强 progressive enhancement:
      概念:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
      观点:“渐进增强”观点认为应关注于内容本身。
      内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
      优雅降级 graceful degradation:
      概念:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
      观点:“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。
      在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。
      区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

    3.浏览器兼容的写法

    • 属性前缀法(即类内部Hack)
      例如 IE6能识别-, 下划线, 星号,IE7能识别星号*,但不能识别-, 下划线,IE6~IE10都认识9,但firefox前述三个都不能认识

       box{
       color: red;
       _color: blue; /*ie6*/
       *color: pink; /*ie67*/ 
       color: yellow9; /*ie/edge 6-8*/
      }
    • 选择器前缀法
        *html* 前缀只对IE6生效
        *+html *+前缀只对IE7生效
        @media screen9{...}只对IE6/7生效
        @media 0screen {body { background: red; }}只对IE8有效
        @media 0screen\,screen9{body { background: blue; }}只对IE6/7/8有效
        @media screen0 {body { background: green; }} 只对IE8/9/10有效
        @media screen and (min-00) {body { background: gray; }} 只对IE9/10有效
        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
    • 条件注释法
      这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式

       <!--[if IE]>
      这段文字只在IE浏览器显示
      <![endif]-->
      
      <!--[if IE 6]>
      这段文字只在IE6浏览器显示
      <![endif]-->
      
      <!--[if gte IE 6]>
      这段文字只在IE6以上(包括)版本IE浏览器显示
      <![endif]-->
      
      <!--[if ! IE 8]>
      这段文字在非IE8浏览器显示
      <![endif]-->
      
      <!--[if !IE]>
      这段文字只在非IE浏览器显示
      <![endif]-->

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

    • 条件注释
      条件注释 是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。 条件注释最初于微软的 Internet Explorer 5浏览器中出现,并且直至 Internet Explorer 9 均支持。微软已宣布于IE10停止支持。具体代码如上已给出。

    • IE Hack
      针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程

    • js 能力检测
      能力检测又称特性检测。能力检测的目的不是识别具体的浏览器,而是识别浏览器的能力。
      能力检测的目的应该是根据你需要的特性来选择问题的解决方案,而不是检测用户在用什么浏览器。而且在检测时要保证你要用到的能力确实存在,自己不要做过多的推测,代码也不要做过多的判断。
      两个重要的概念:
      第一个概念是先检测达成目的的最常用的特性。先检测最常用的特性,可以保证代码最优化,因为在多数情况下都可以避免测试多个条件。
      第二个概念是必须测试实际要用到的特性。一个特性存在,不一定意味着另一个特性也存在。

    • html5shiv.js
      IE 9之前的版本几乎不支持HTML5元素和其它HTML5特性。
      HTML5 Shiv支持在旧版Internet Explorer(IE9之前)中使用HTML5细分元素,并为Internet Explorer 6-9,Safari 4.x(和iPhone 3.x)和Firefox 3.x提供基本的HTML5样式。

    • respond.js
      响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js
      Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计。
    • css reset
      css reset是通过重新定义标签样式,把浏览器的默认样式覆盖掉,以便保持个浏览器渲染的一致性。相对暴力
    • normalize.css
      normalize.css是reset.css的替代方案,保留有用的浏览器默认样式,同时进行一些bug的修复。相对平和

    • Modernizr
      Modernizr是一套JavaScript 库,用来侦测浏览器是否支持 CSS3 或 HTML5 功能支持情况等。如果浏览器不支持,Modernizr会使用其他的解决方法来进行模拟。
      Modernizr 会在页面加载后立即检测特性;然后创建一个包含检测结果的 JavaScript 对象,同时在 html 元素加入方便你调整 CSS 的 class 名。

    • postCSS
      PostCSS是一个使用JS插件转换样式的工具。这些插件可以删除您的CSS,支持变量和混合,透明未来的CSS语法,内联图像等。
      PostCSS不是预处理器本身; 它不会转换CSS。事实上,它本身根本不做任何事。它所做的是提供一个CSS解析器和一个框架,用于创建可以分析,lint,处理资产,优化,创建回退,否则转换解析的CSS的插件。PostCSS将CSS解析为抽象语法树(AST),通过一系列插件将其传递,然后PostCSS核心为插件更改的树生成一个新的CSS字符串。。如果你熟悉JavaScript工具,那么你可以认为PostCSS 为CSS的Babel。
      PostCSS目前有200多个插件,其中很多在PostCSS GitHub页面上列出,而其他的可以在有用的PostCSS目录postcss.parts中找到。PostCSS可以集成在大多数构建工具中,包括Gulp,Grunt,webpack或npm。
      PostCSS被行业领导者使用,包括维基百科,Twitter,阿里巴巴和JetBrains。该 Autoprefixer PostCSS插件是最流行的CSS处理器之一。

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

    http://browserhacks.com/
    http://caniuse.com/

  • 相关阅读:
    [NOI2003],[AHOI2006]文本编辑器
    luogu P5151 HKE与他的小朋友
    [NOI2005]维护数列
    [HNOI2012]永无乡
    luogu P4146 序列终结者
    [SCOI2016]美味
    UVA1451 Average
    [JSOI2007]字符加密
    luogu P3809 【模板】后缀排序
    CentOS 7系统启动后怎么从命令行模式切换到图形界面模式
  • 原文地址:https://www.cnblogs.com/cosyer/p/6655254.html
Copyright © 2011-2022 走看看