讀《精通CSS：進階Web標準解決方案》

標籤：

    因為最近在看《精通CSS:進階Web標準解決方案》，做了一些記錄。  因為很多開發人員對於XHTML2的開發不滿，於是出現了WHATWG和W3C的分裂，WHATWG決定開發自己的規範，也就是HTML5,而W3C的XHTML2標準已被放棄，HTML5成為了W3C的正式標準。XHTML和HTML的區別就是XHTML嚴格遵守XML編碼規定，瀏覽器會依據文檔的MIME類型來解析文檔，如果不遵循規範會導致錯誤，而HTML卻是很寬鬆的。     Doctype類型和瀏覽器模式，DTD（文檔定義類型）是一組機器可讀的規則，它們定義XML或HTML的特定版本中運行有什麼，不允許有什麼。瀏覽器會對頁面進行相應的措施，並決定採取何種行為。瀏覽器會通過分析頁面的Doctype來瞭解使用哪個DTD。 添加在所有網站上都使用的常用規則，形成某種原型CSS檔案，這可以節省更多的時間。 模式組合是一個頁面或一系列頁面，他們使用當前的樣式表顯示網站上可能吸納時的每種樣式排列組合，從標題層級和文本樣式直到特定的內容和布局類型。 最基本的樣式指南應該描述一般性設計指南，比如rue處理標題和其他排版元素，網格結構的設計方式是什麼，以及使用哪個調色盤。 IE7和更低版本不支援在除連結之外的其他元素上使用偽類別選取器，但是所有現代瀏覽器都支援。 連結應該只用於get請求，決不要用於post請求。 把表單反饋資訊寫在label標籤裡，然後絕對位置更好？ CSS架構試圖通過在標記和表現之間建立強耦合來簡化CSS布局，但是這種耦合正式我們拋棄基於表格版面配置的主要原因。 要想建立可伸縮且容易維護的CSS相同，首先應該檢查設計，尋找重複的模式，這包括頁面結構中的模式或在網站中等元素反覆出現的方式。在這個階段，不應該太關注表現方式，而是應該注意結構和意義。1，先把頁面劃分為大的結構性地區，比如容器，頁首，頁面地區和頁尾。2，然後注意力轉移到內容地區本身，開始建立網格結構。尋找共同的特徵而不是視覺表現。3，然後在各個地區中尋找不同的布局結構，是否想要把某些資訊分成兩列，三列或四列。4，結構設計完之後，現在可以開始關注不同類型的內容。給每個內容塊起一個有意義的名稱，然後分析他們的關係。5，查看每個內容塊的結構，看看不同的類型中是否有共同的模式，不如公告和新聞其實和一樣的。6，找出模式並確定命名規範之後，最好馬上開始定義將使用的元素，這是有好處的。 混雜模式中IE5.x和IE6不支援margin:auto聲明，IE可以設計text-align：center確定置中， 用CSS進行布局有集中不同的方式，包括絕對位置和使用負的外邊距。 為了提高可訪問性，我選擇在原始碼中將祝內容地區放在次要內容地區的前面，這深深考慮到了螢幕助讀程式，因為螢幕助讀程式不用再經過不重要的內容，到達主內容部分。 在所有浮動元素中添加display:inline。這個預防措施用來防止IE中的外雙邊距產生的bug. 這兩個元素嵌套在contetn元素中，可以建立關聯，我利用了這個事實，這有兩個好處。首先不需要為要應用的每個元素建立新的類名，而應使用層疊找到元素。 利用浮動包含浮動，從而簡化清除浮動這一步，簡直贊。 如果選用某個架構，你可能會在每個項目中都使用它，因此思維方式很可能會逐漸僵化。正如俗話所說的，如果你只有一把鎚子，那麼是那麼東西看起來都是釘子。 這個工具箱可以包含全域reset,排版樣式和表單處理，以及登入表單，日曆表格和導航列表等常用HTML組建的標記模式。 最常見的CSS問題並非來自源於瀏覽器BUG，而是來源於對CSS規範的理解不完整。 IE的開發節奏比其他瀏覽器慢得多。 reset樣式表可以避免和緩解HTML元素預設樣式不一致的問題，跨所有瀏覽器一個一致的舞台。 我非常喜歡採用最小寬度和最大寬度的流式設計。 網格通常有預先確定的寬度，包含指定數量的列和可選的隔離帶。網格是你最好的朋友，可以協助你克服困難。它是Photoshop和CSS之間的的“中間人”，可以協助你做出浮動，定位，外邊距，內邊距，邊框等相關的初步定位決定。

 

讀《精通CSS：進階Web標準解決方案》