web端 css hack（一），web端csshack

web端 css hack（一），web端csshack

逢10月小長假，幾天不敲鍵盤，渾身難受。也是有時間分享一下自己遇到的css問題。先說一下什麼css hack

 

簡單介紹一下css hack：

定義：

　　一般都是利用各瀏覽器的支援CSS的能力和BUG來進行的，可以分為能力選擇和怪癖選擇(BUG)。

　　能力通常是指瀏覽器對CSS特性的支援程度，而怪癖是指瀏覽器特有的一些BUG。

　　總結：這裡定義的很清晰哦：第一瀏覽器的對  css  支援程度 不一樣，第二，不同的瀏覽器攜帶自身特有的屬性。

提醒：

　　盡量找到通用方法而減少對CSS Hack的使用，大規模使用CSS Hack會帶來維護成本的提高以及瀏覽器版本變化而帶來類似Hack失效等系列問題

　　總結：這裡指出，不是hack 寫的越多越好，考慮到 每種瀏覽器各個版本之間還存在差異，時間花費，也不一定就有好的成效。

書寫方法：

　　CSS hack書寫順序，一般是將適用範圍廣、被識別能力強的CSS定義在前面。稍後回有例子。

 

 

本次主要說明   瀏覽器的對  css  支援程度

 

 

三種書寫方法：

　　一：條件Hack    ( IE )

　　<!--[if <keywords>? IE <version>?]> HTML代碼塊 <![endif]-->

　　if條件共包含6種選擇方式：是否、大於、大於或等於、小於、小於或等於、非指定版本

是否：

指定是否IE或IE某個版本。關鍵字：空

大於：

選擇大於指定版本的IE版本。關鍵字：gt（greater than）

大於或等於：

選擇大於或等於指定版本的IE版本。關鍵字：gte（greater than or equal）

小於：

選擇小於指定版本的IE版本。關鍵字：lt（less than）

小於或等於：

選擇小於或等於指定版本的IE版本。關鍵字：lte（less than or equal）

非指定版本：

選擇除指定版本外的所有IE版本。關鍵字：!

特彆強調 IE10以後沒有條件hack了。

舉例子：

　　<!--[if IE 8]>   //這是格式

　　　　//這裡是code地區，不僅可以是css  也可以使html標籤    （HTML代碼塊 ）

　　　　<style>
　　　　　　div{position:relative;}     
　　　　</style>

　　<![endif]-->

　　二：屬性Hack    ( 瞭解，官方說明：需謹慎使用 )

　　　　selector{<hack>?property:value<hack>?;}

　　　　就簡單舉個例子，就不做詳細的說明了

　　　　　

　　　如想同一段文字在IE6,7,8顯示為不同顏色，可這樣寫：

　　.test {　　color: #090\9; /* For IE8+ */*color: #f00;  /* For IE7 and earlier */_color: #ff0;  /* For IE6 and earlier */　　}

　　　三：選擇符級Hack    ( 瞭解，官方說明：需謹慎使用 )

　　　　這個就是我們常用的css選取器。只要多注意一些css文法的相容性，一般不建議使用hack。

　　　　* html .test { color: #090; }       /* For IE6 and earlier */　　　　* + html .test { color: #ff0; }     /* For IE7 */　　　　.test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */　　　　.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */


總結一下：
　　　　這裡簡單介紹一下css hack的說明。關於相容瀏覽器的hack，盡量少使用。
　　原因：
　　　　1 開發項目 不僅考慮 瀏覽器之前的版本，更要注意 瀏覽器的後續發展，不能已解決現在的問題，就是完全解決問題。

　　　　　　　　一方面：這樣敲代碼，用一位前輩的話來說： Inhumanity，不人道的，後面接手的兄弟（或者妹子）完全抓狂

　　　　　　　　另外一點：多考慮，有利於今後解決問題的多思路，對於今後的代碼容錯有非常大的協助。

　　　　2 瀏覽器的相容，需要說明相容的版本，以及理由，這也是我們程式員的應該要考慮的。
　　　　　　 
　　　　　　　　作為一個面向大學生消費群體的應用，去相容IE67 這樣的需求，完全可以拍回去。