人生七十古來稀

#1 CSS的優化與技巧 (下)

十三.清除浮動
一個非常常見的CSS問題，定位使用浮動的時候，下面的層被浮動的層所覆蓋，或者層裏嵌套的子層超出了外層的範圍。
通常的解決辦法是在浮動層後面添加一個額外元素，例如一個div或者一個br，並且定義它的樣式為clear: both。這個辦法有一點牽強，幸運的是還有一個好辦法可以解決，參看這篇文章《How To Clear Floats Without Structural Markup》(注：本站將儘快翻譯此文)。

上面2種方法可以很好解決浮動超出的問題，但是如果當你真的需要對層或者層裏的物件進行clear的時候怎麼辦？一種簡單的方法就是用overflow屬性，這個方法最初的發表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被廣泛討論。

上面那一種clear方法更適合你，要看具體的情況，這裏不再展開論述。另外關於float的應用，一些優秀的文章已經說得很清楚，推薦你閱讀：《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.橫向居中(centering)
這是一個簡單的技巧，但是值得再說一遍，因為我看見太多的新手問題都是問這個：CSS如何橫向居中？你需要定義元素的寬，並且定義橫向的margin，如果你的佈局包含在一個層(容器)中，就象這樣：

你可以這樣定義使它橫向居中：
#wrap {
width:760px; /* 修改為你的層的寬度 */
margin:0 auto;
}
但是IE5/Win不能正確顯示這個定義，我們採用一個非常有用的技巧來解決：用text-align屬性。就象這樣：
body {
text-align:center;
}
#wrap {
width:760px; /* 修改為你的層的寬度 */
margin:0 auto;
text-align:left;
}

第一個body的text-align:center; 規則定義IE5/Win中body的所有元素居中(其他流覽器只是將文字居中) ，第二個text-align:left;是將#warp中的文字居左。

十五.導入(Import)和隱藏CSS
因為老版本流覽器不支援CSS，一個通常的做法是使用@import技巧來把CSS隱藏起來。例如：
@import url(main.css);
然而，這個方法對IE4不起作用，這讓我很是頭疼了一陣子。後來我用這樣的寫法：
@import main.css;
這樣就可以在IE4中也隱藏CSS了，呵呵，還節省了5個位元組呢。想瞭解@import語法的詳細說明，可以看這裏《centricle’s css filter chart》

十六.針對IE的優化
有些時候，你需要對IE流覽器的bug定義一些特別的規則，這裏有太多的CSS技巧(hacks)，我只使用其中的兩種方法，不管微軟在即將發佈的IE7 beta版裏是否更好的支持CSS，這兩種方法都是最安全的。
1.注釋的方法

(a)在IE中隱藏一個CSS定義，你可以使用子選擇器(child selector):
html>body p {
/* 定義內容 */
}

(b)下面這個寫法只有IE流覽器可以理解(對其他流覽器都隱藏)
* html p {
/* declarations */
}

©還有些時候，你希望IE/Win有效而IE/Mac隱藏，你可以使用反斜線技巧：
/* */
* html p {
declarations
}
/* */
2.條件注釋(conditional comments)的方法

另外一種方法，我認為比CSS　Hacks更加經得起考驗就是採用微軟的私有屬性條件注釋(conditional comments)。用這個方法你可以給IE單獨定義一些樣式，而不影響主樣式表的定義。就象這樣：


十七.調試技巧：層有多大？
當調試CSS發生錯誤，你就要象排版工人，逐行分析CSS代碼。我通常在出問題的層上定義一個背景顏色，這樣就能很明顯看到層佔據多大空間。有些人建議用border，一般情況也是可以的，但問題是，有時候border 會增加元素的尺寸，border-top和boeder-bottom會破壞縱向margin的值，所以使用background更加安全些。
另外一個經常出問題的屬性是outline。outline看起來象boeder，但不會影響元素的尺寸或者位置。只有少數流覽器支援outline屬性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代碼書寫樣式
在寫CSS代碼的時候，對於縮進、斷行、空格，每個人有每個人的書寫習慣。在經過不斷實踐後，我決定採用下麵這樣的書寫樣式：
selector1,
selector2 {
property:value;
}

當使用聯合定義時，我通常將每個選擇器單獨寫一行，這樣方便在CSS檔中找到它們。在最後一個選擇器和大括弧{之間加一個空格，每個定義也單獨寫一行，分號直接在屬性值後，不要加空格。
我習慣在每個屬性值後面都加分號，雖然規則上允許最後一個屬性值後面可以不寫分號，但是如果你要加新樣式時容易忘記補上分號而產生錯誤，所以還是都加比較好。
最後，關閉的大括弧}單獨寫一行。
空格和換行有助與閱讀。




分享，是進步的原動力～
瑞宇網頁設計 http://www.rus.net.tw
~By Sunming