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;}