作家
登录

兼容性CSS HACK 写法用法

作者: 来源: 2014-06-23 15:20:10 阅读 我要评论

 我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以方便维护。解决兼容以3点为基本原则:

  1. 权衡成本:在浏览器被淘汰后,如何快速清理掉无用代码 
  2. 可维护:在资源成本和完美间平衡的向后兼容 
  3. 可读:省力、易记 一、CSS 选择器 Hack

     

    /* Opera */
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
    {head~body .sofish{display:block;}} 

    这种写法的优缺点是

    • 优点:全面,各种HACK都有;清理无用代码里易认 
    • 缺点:选择器名称不易记;代码量多(要重复写选择器) 

    二、CSS 属性 Hack

     

    .sofish{ 
    padding:10px; 
    padding:9px9; /* all ie */ 
    padding:8px�; /* ie8-9 */ 
    *padding:5px; /* ie6-7 */ 
    +padding:7px; /* ie7 */ 
    _padding:6px; /* ie6 */ 

    这种写法的优缺点是

    • 优点:易记,代码少 
    • 缺点:不全面 

    三、IE 注释

     

    <!--[if IE]>IE only<![endif]--> 
    <!--[if !IE]>NOT IE<![endif]--> 

    这种写法的优缺点是

    • 优点:安全;向后兼容好;易维护 
    • 缺点:用不好会增加HTTP请求;用得好代码又多 

    四、浏览器探测:JS/后端程序判断

     

    // 以jQuery为例,检测是否是IE6,是则加上class="ie6" 
    if ($.browser.msie && $.browser.version = 6 ){ 
    $('div').addClass('ie6'); 
    }

    这种写法的优缺点是:

    • 优点:全面;易维护;可读性高 
    • 缺点:占资源;代码量大(要重写选择器) 

    上面4种是我们最常用的方法。现在,让我们抽出心里存着的那3个原则,看看如何选择。要时间思考一下么?这里简单地说一下我的选择:

    1、尽量使用单独HACK 

    这样维护起来成本比较低,改动不会影响其他的浏览器,而一旦有浏览器淘汰,只要搜索关键字,就可以批量去掉这些代码。比如,ie6的单独hack:

     

    _padding:6px;; 

    2、向后兼容的目标:1年 

    你想现在的网站兼容IE10么,谁不想,但这可预见性太低了,也可以说,成本太高了。暂时没必要。不过,IE9可能要发布了,所以,选择像

     

    padding:8px�; 

    这样的IE8+的hack,在删掉其他代码不影响向后兼容上,会更好;并且,如果IE10出来,一旦支持这个hack,而又没有这个bug,可能删掉只影响2个浏览器,也会更方便;

    3、尽可能省资源 

    你要是不考虑页面加载速度,不考虑服务器承受能力的话,那在向后兼容和淘汰的处理上可以做得很完美(从代码上),但这从某种程度上,不如不做。

    五、个人推荐写法

    其实可以纠结的还真多,这里结合A-Grade浏览器的种类和HACK的种类,写两种个人认为比较合理的HACK和向后兼容相兼顾的写法,仅供大家参考的。

    经济实惠型写法:注重单独的HACK。 IE的HACK比较多,选择省力易记的属性HACK;其他浏览器HACK少,选择块状的选择器HACK(推荐)

     

    .sofish{ 
    padding:10px; 
    padding:9px9; /* all ie */ 
    padding:8px�; /* ie8-9 目前应用于IE8的单独hack,情况比较少 */ 
    *padding:5px; /* ie6-7 */ 
    +padding:7px; /* ie7 */ 
    _padding:6px; /* ie6 */ 

    /* webkit and opera */ 
    @media all and (min-width: 0px){ .sofish{padding:11px;} } 

    /* webkit */ 
    @media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } 

    /* opera */ 
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } 

    /* firefox * / 
    @-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */ 
    html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */ 

    准完美主义写法:配合IE注释,一律采用选择器HACK(选择性推荐)

     

    HTML: 添加body class: 

    <!--[if IE6]--><body class="ie6"><![endif]--> 
    <!--[if IE7]--><body class="ie7"><![endif]--> 
    <!--[if IE8]--><body class="ie8"><![endif]--> 
    <!--[if IE9]--><body class="ie9"><![endif]--> 
    <!--[if !IE]--><body class="non-ie"><![endif]-->

     

    .sofish{padding:10px;} 
    .non-ie .sofish{padding:12px;} 
    .ie9 .sofish{padding:9px;} 
    .ie8 .sofish{padding:8px;} 
    .ie7 .sofish{padding:7px;} 
    .ie6 .sofish{padding:6px;} 

    /* webkit and opera */ 
    @media all and (min-width: 0px){ .sofish{padding:11px;} } 

    /* webkit */ 
    @media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} } 

    /* opera */ 
    @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} } 

    /* firefox * / 
    @-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */ 
    html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */ 
    [/css]
    <p>然后,从第二种方式我们也可以发现。把IE注释用在body class上,而不是添加单独的<code>&lt;link /&gt;</code>或者<code>@import</code>会是更好的选择。虽然分文件也是一种不错的选择,但了为页面加载速度,HTTP请求一个都不能浪费。</p>
    <p>至于利用JS或者后端程序来判断,除非你有足够的资源,除非你解决不了(90%不会发生),不然,并不推荐用。附上一个表(<a rel="nofollow" href="viahttp://paulirish.com/2009/browser-specific-css-hacks/">via</a>),可以参考参考:</p>
    <h3>六:全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表:</h3>
    [cc lang="css"]
    /***** Selector Hacks ******/ 

    /* IE6 and below */ 
    * html #uno { color: red } 

    /* IE7 */ 
    *:first-child+html #dos { color: red } 

    /* IE7, FF, Saf, Opera */ 
    html>body #tres { color: red } 

    /* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 
    html>/**/body #cuatro { color: red } 

    /* Opera 9.27 and below, safari 2 */ 
    html:first-child #cinco { color: red } 

    /* Safari 2-3 */ 
    html[xmlns*=""] body:last-child #seis { color: red } 

    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
    body:nth-of-type(1) #siete { color: red } 

    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
    body:first-of-type #ocho { color: red } 

    /* saf3+, chrome1+ */ 
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
    #diez { color: red } 

    /* iPhone / mobile webkit */ 
    @media screen and (max-device-width: 480px) { 
    #veintiseis { color: red } 

    /* Safari 2 - 3.1 */ 
    html[xmlns*=""]:root #trece { color: red } 

    /* Safari 2 - 3.1, Opera 9.25 */ 
    *|html[xmlns*=""] #catorce { color: red } 

    /* Everything but IE6-8 */ 
    :root *> #quince { color: red } 

    /* IE7 */ 
    *+html #dieciocho { color: red } 

    /* Firefox only. 1+ */ 
    #veinticuatro, x:-moz-any-link { color: red } 

    /* Firefox 3.0+ */ 
    #veinticinco, x:-moz-any-link, x:default { color: red } 

    /***** Attribute Hacks ******/ 

    /* IE6 */ 
    #once { _color: blue } 

    /* IE6, IE7 */ 
    #doce { *color: blue; /* or #color: blue */ } 

    /* Everything but IE6 */ 
    #diecisiete { color/**/: blue } 

    /* IE6, IE7, IE8 */ 
    #diecinueve { color: blue9; } 

    /* IE7, IE8 */ 
    #veinte { color/***/: blue9; } 

    /* IE6, IE7 -- acts as an !important */ 
    #veintesiete { color: blue !ie; } /* string after ! can be anything */ 

    虽然是HACK了,注释也是很重要的。给代码一个注释,方便日后使用。

    注:IE都能识别*;标准浏览器(如FF)不能识别*;

    IE6能识别*,但不能识别 !important,

    IE7能识别*,也能识别!important;

     

    FF不能识别*,但能识别!important;


  推荐阅读

  研究人员:云的相互依存可能导致“云崩溃”

当云计算越来越成为主流之时,各种严重的运营“崩溃”事故就可能出现,因为在云中,终端用户和厂商的各种东西都在一起混搭、匹配或捆绑着,这就是一位研究人员所撰写的一篇新论文的主张,该论文将在下周于>>>详细阅读


本文标题:兼容性CSS HACK 写法用法

地址:http://www.17bianji.com/diaocha/34315.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)