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

2017-04-14 本文已影响114人 Iris_mao

今天好热啊，有一种突然从冬天过到夏天的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个技巧

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

CSS hack

CSS 优化

猜你喜欢

热点阅读