美文网首页大闹前端Web前端之路程序员
web前端开发【连载9】-CSS hack和优化

web前端开发【连载9】-CSS hack和优化

作者: Iris_mao | 来源:发表于2017-04-14 14:11 被阅读114次

    今天好热啊,有一种突然从冬天过到夏天的feel~


    热死傻球了~
    CSS hack
    • 分类:CSS属性前缀法、选择器前缀法以及IE条件注释法
      1.属性前缀法(即类内部Hack):例如 IE6能识别下划线""和星号" * ",IE7能识别星号" * ",但不能识别下划线"",IE6~IE10都认识"\9",但firefox前述三个都不能认识。
      2.选择器前缀法(即选择器Hack):例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}。
      3.IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本:。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
    • 属性前缀法:
    “-″减号是IE6专有的hack
    “\\9″ IE6/IE7/IE8/IE9/IE10都生效
    “\\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
    “\\9\\0″ 只对IE9/IE10生效,是IE9/10的hack
    
    • 选择器前缀法:
    *html *前缀只对IE6生效
    *+html *+前缀只对IE7生效
    @media screen\\9{...}只对IE6/7生效
    @media \\0screen {body { background: red; }}只对IE8有效
    @media \\0screen\\,screen\\9{body { background: blue; }}只对IE6/7/8有效
    @media screen\\0 {body { background: green; }} 只对IE8/9/10有效
    @media screen and (min-width:0\\0) {body { background: gray; }} 只对IE9/10有效
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
    
    • 条件注释法:
      这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。举例如下
        只在IE下生效
        <!--[if IE]>
        这段文字只在IE浏览器显示
        <![endif]-->
        
        只在IE6下生效
        <!--[if IE 6]>
        这段文字只在IE6浏览器显示
        <![endif]-->
        
        只在IE6以上版本生效
        <!--[if gte IE 6]>
        这段文字只在IE6以上(包括)版本IE浏览器显示
        <![endif]-->
        
        只在IE8上不生效
        <!--[if ! IE 8]>
        这段文字在非IE8浏览器显示
        <![endif]-->
        
        非IE浏览器生效
        <!--[if !IE]>
        这段文字只在非IE浏览器显示
        <![endif]-->
    

    详情参考:史上最全的CSS hack方式一览
    鑫神的相关整理:http://www.zhangxinxu.com/wordpress/?s=css+hack

    CSS 优化
    • 避免过度约束
      一条普遍规则
     // 糟糕
    ul#someid {..}
    .menu#otherid{..}
    // 好的
    #someid {..}
    #otherid {..},不要添加不必要的约束。
    
    • 后代选择符最烂
      不仅性能低下而且代码很脆弱,html代码和css代码严重耦合,html代码结构发生变化时,CSS也得修改,这是多么糟糕,特别是在大公司里,写html和css的往往不是同一个人。
    // 烂透了
    html div tr td {..}
    
    • 避免链式(交集)选择符
      这和过度约束的情况类似,更明智的做法是简单的创建一个新的CSS类选择符。
    // 糟糕
    .menu.left.icon {..}
    // 好的
    .menu-left-icon {..}
    
    • 使用复合(紧凑)语法
      尽可能使用复合语法。
    // 糟糕
    .someclass {
     padding-top: 20px;
     padding-bottom: 20px;
     padding-left: 10px;
     padding-right: 10px;
     background: #000;
     background-image: url(../imgs/carrot.png);
     background-position: bottom;
     background-repeat: repeat-x;
    }
    // 好的
    .someclass {
     padding: 20px 10px 20px 10px;
     background: #000 url(../imgs/carrot.png) repeat-x bottom;
    }
    
    • 避免不必要的命名空间
    // 糟糕
    .someclass table tr.otherclass td.somerule {..}
    //好的
    .someclass .otherclass td.somerule {..}
    
    • 避免不必要的重复
      尽可能组合重复的规则。
    // 糟糕
    .someclass {
     color: red;
     background: blue;
     font-size: 15px;
    }
    .otherclass {
     color: red;
     background: blue;
     font-size: 15px;
    }
    // 好的
    .someclass, .otherclass {
     color: red;
     background: blue;
     font-size: 15px;
    }
    
    • 尽可能精简规则
      在上面规则的基础上,你可以进一步合并不同类里的重复的规则。
    // 糟糕
    .someclass {
     color: red;
     background: blue;
     height: 150px;
     width: 150px;
     font-size: 16px;
    }
    .otherclass {
     color: red;
     background: blue;
     height: 150px;
     width: 150px;
     font-size: 8px;
    }
    // 好的
    .someclass, .otherclass {
     color: red;
     background: blue;
     height: 150px;
     width: 150px;
    }
    .someclass {
     font-size: 16px;
    }
    .otherclass {
     font-size: 8px;
    }
    
    • 避免不明确的命名约定
      最好使用表示语义的名字。一个好的CSS类名应描述它是什么而不是它像什么。
    • 避免 !importants
      其实你应该也可以使用其他优质的选择器。
    • 遵循一个标准的声明顺序
    .someclass {
     /* Positioning */
     /* Display & Box Model */
     /* Background and typography styles */
     /* Transitions */
     /* Other */
    }
    
    • 组织好的代码格式
      减少空格和回车位空间
    //糟糕的
    .yangshi{ 
            font-size:12px;
            border:1px solid #000000;
            padding:5px;
    }
    .yangshi2{ 
           font-size:12px;
           border:1px solid #000000;
           padding:5px;
    }
    //好的
    .yangshi{ font-size:12px;border:1px solid #000000;padding:5px;}
    .yangshi2{ font-size:12px;border:1px solid #000000;padding:5px;}
    

    原文参考:css代码优化的12个技巧

    相关文章

      网友评论

      • Klart:最后一个表示不赞同,阅读麻烦不是太好。但压缩上传可以。
        Iris_mao:其实我的编码习惯就是横着写的 习惯了看了也不麻烦

      本文标题:web前端开发【连载9】-CSS hack和优化

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