css hack 用法注意

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 优化

• 避免过分约束
  一条广泛规则

// 糟糕 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;}