|
翻譯：onestab [2004.02.08]
原文：mezzoblue CSS Crib Sheet
在使用CSS建站時，您肯定遇到過形形色色的佈局問題，最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更爲容易，當您遇到困難時爲您提供快速參考。
如果您有所補充，請在這裏發表您的意見.
本文的其他語言版：法語, 德語, 西班牙語 和 匈牙利語。 歡迎提供其他翻譯。
- 有疑問，先驗證
- 在調試時，先對您的代碼進行驗證往往能省去不少麻煩事。格式不正確的XHTML/CSS 會導致許多佈局上的錯誤。
- 在其他瀏覽器中進行測試之前，請先在最先進的瀏覽器中撰寫和測試CSS代碼，而不是相反。
- 如果您在破舊的瀏覽器中編寫和測試，你的代碼就不得不依賴那個破舊瀏覽器的糟糕的顯示，然後在符合標準的瀏覽器中進行測試，看到顯示結果“不正常”時，你會很沮喪的。相反，您應該先將您的代碼完善，然後再設法爲較低級的瀏覽器打算。這樣從一開始您的代碼就是符合標準的，你不必再爲支持其他瀏覽器而勞心費神。當然了，目前遵從標準的瀏覽器無疑就是 Mozilla, Safari 或 Opera。
- 確保您期望的效果確實存在
- 許多特定的瀏覽器專有的CSS擴展在正式標準中並不存在。 如果您對
filter(濾鏡) 或滾動條指定了樣式，那麼您就用了私有代碼，除了IE之外，在別的瀏覽器中毫無作用。如果驗證器告訴您代碼沒有定義，極有可能您用了私有樣式，這樣在不同的瀏覽器中很難達到一致的效果。 - 如果佈局中一定要用浮動對象，別忘了適時使用清除（clear）屬性。
- 浮動對象似易實難，而且不總是令人如願以償。如果您發現浮動對象伸出了容器的邊界，或者不像您所期望的那樣顯示，請檢查您的期望是否正確。關於這個問題請看Eric Meyer的教程
- 邊距的合併：可用padding 或 border 來避免。
- 您可能被多餘的(或者想要卻不出現的)空白搞得焦頭爛額。如果您用了 margins，邊距的合併可能就是問題的根源。 Andy Budd 對此的解釋可能爲你解惑。
- 避免將 padding/border 和固定寬度同時應用到同一元素。
- IE5 的區塊模型是錯誤的，是它把事情辦壞了。對此也有權宜之計，不過最好是繞過這個問題，當子元素的寬度固定時，爲父元素指定padding。
- 避免IE下未指定樣式內容的閃爍。
- 如果您僅僅靠
@import 來輸入外部樣式表，早晚您會發現IE有“閃爍”的毛病。在應用CSS樣式之前，未經格式化的HTML文本會短暫地出現。這是可以避免的. - 別指望
min-width 在IE中有用。 - IE不支持它，但是它將
width 當作 min-width，所以通過一些 IE 的過濾技巧(filtering)，可以實現同樣的最終效果。 - 把CSS過濾器(filters)當作最後的手段
- CSS 技巧和過濾器可以使您有選擇地應用到（或者不應用到）某些元素。應當儘可能地找到標準的跨瀏覽器的解決辦法來實現您想要的效果，而不是動不動就使用過濾器。要將它當成走投無路時的救命手段。在這裏可以找到大量的CSS 過濾技巧。[譯註：不要把這裏的filters和IE中的濾鏡混淆。由於各個瀏覽器對CSS標準的支持程度不一，人們找到了許多技巧，將瀏覽器無法解釋或錯誤解釋的樣式表或規則屏蔽掉。這就是所謂的CSS過濾器或技巧。]
- 如果使用了錨點，在應用超鏈接樣式時要特別小心。
- 如果您在代碼中使用了傳統的錨點(
<a name="anchor">)，您會注意到 :hover 和 :active僞類也會作用於它。要避免這種情形，你可以使用 id，或者使用鮮爲人知的語法: :link:hover, :link:active - 記住“LoVe/HAte”（愛/恨）鏈接規則
- 要以下面的順序指定超鏈接僞類：Link, Visited, Hover, Acitve。任何其他順序都不妥當。假如用了
:focus，次序應爲 LVHFA(“Lord Vader's Handle Formerly Anakin”，Matt Haughey這樣建議)。 - 請記住“TRouBLED”（麻煩的）邊框。
- 邊框(border)、邊距(margin)和補白(padding)的簡寫次序爲：順時針方向從上開始，即 Top, Right, Bottom, Left。比如
margin: 0 1px 3px 5px;表示上邊距爲零，右邊距爲1px，依此類推。 - 非零值要指明單位。
- 在用CSS指定字體、邊距或大小時，必須指明所用的單位。某些瀏覽器對未指明單位的處理方法不足爲憑。零就是零，不管是 px還是em還是其他單位，它不需要單位。例如：
padding: 0 2px 0 1em; - 測試不同的字體大小。
- 像Mozilla和Opera這樣的高級瀏覽器允許對字體進行縮放，不管你用的是什麼單位。某些用戶的默認字體大小肯定和您的不同，盡最大努力去滿足他們。
- 用嵌入式測試，發佈時改爲輸入。
- 將樣式表嵌入在你的HTML源代碼中，在測試時可以消除許多緩存引起的錯誤，尤其是某些Mac下的瀏覽器。但在發佈前，一定要記住將樣式表移到外部文件，用
@import 或 <link>引入。 - 加上明顯的邊框有利於佈局調試。
- 像
div {border: solid 1px #f00;} 之類的全局規則可以暫時爲你查出佈局問題。爲特定的元素加上邊框可幫您找到難以發覺的交錯或空白問題。 - 對圖片路徑不要用單引號。
- 當設置背景圖片時，要堅持用雙引號。儘管看起來有些多餘，但是如果不這麼做，IE5/Mac會噎住。
- 不要爲將來的樣式表（比如手持式設備或打印用樣式表）留個“空位”。
- Mac IE5 對空的樣式表比較感冒，會增加頁面的裝入時間。建議樣式表中至少應該有一條規則（哪怕是註釋也好），免得 MacIE噎住。
另外值得一提的還有一些雖然不針對某些功能，但是在開發過程中應當注意的理論：
- 好好組織您的CSS文件
- 恰當地成塊註釋CSS，將相似的CSS選擇符編爲一組，養成一致的命名習慣和空白格式（爲跨平臺考慮，建議用空白字符而不是tab。）以及適當的次序。
- 以功能（而不是外觀）爲類和ID命名
- 假如您創建了一個
.smallblue 類，後來打算將文字改大，顏色變爲紅色，這個類名就不再有任何意義了。相反，您可以用更有描述性的名字如 .copyright 和 .pullquote。 - 組合選擇符
- 保持CSS短小對減少下載時間非常重要。請儘量爲選擇符分組、 利用繼承(inheritance)以及使用簡寫(shorthand)來減少冗餘。
- 使用圖片替換技術時要考慮親和力
- 已經發現傳統的FIR在屏幕閱讀器，以及關閉圖片顯示[的瀏覽器]中會出問題。 對此有其他解決辦法，要根據具體情況，慎重使用。
|
