830
汽車大全
w3c係列CSS2.1之路（一）
CSS的學習一般是從看書看博客開始的，看到一定程度之後總覺得總是少了些什麼，網上各類資料多半是提供怎麼解決問題，很少有深入分析原理的。本係列是對w3.org中標準的CSS2.1進行學習，希望能從更深入的角度去看CSS。
有時間建議去看看官方原文：https://www.w3.org/TR/2011/REC-CSS2-20110607/
CSDN論壇上也有對CSS標準的詳解係列：https://bbs.csdn.net/topics/340173664
本文作為係列開篇，是對CSS2.1的一個總體介紹。對應於原文的前三章。（以後無特別聲明，CSS默認指代CSS2.1）
1.CSS處理模型
官方給出了user agent 解析CSS的一個流程，但實際上根據UA（本文默認UA都指代瀏覽器）的不同可能有些差別：
1.根據源文檔創建出文檔樹（document tree）。這裏的源文檔一般都是HTML代碼。
2.識別目標媒體類型（media type）。media type可能有多種（screen，paper等），某些特定的CSS屬性隻能針對特定的媒體類型，所以在渲染前一定要確定media type。
3.檢索出所有針對目標media type所編寫的CSS代碼。這裏想到了media query，針對不同尺寸的設備響應不同的代碼，就是這個道理。
4.將指定的CSS屬性值應用到文檔中所有指定的元素上。在應用的過程中需要計算出每個元素應該賦予的值（具體應用過程後麵的係列會講），在不同的media type下，會用到不同的計算算法。比如說目標媒體類型為screen時，瀏覽器會應用visual
formatting model（可視化格式模型，這個在後麵的係列會講）。
5.根據應用屬性後的文檔樹生成formatting structure。一般來說formatting structure與文檔樹很相似，但也可能不同，比如說你用了偽元素（pseudo-elements）改變了文檔結構。而且formatting structure也不一定是樹形結構的了，比如說你用display:none隱藏了某些元素。個人理解：文檔樹就是源文檔中的結構，而formatting structure就是經過CSS渲染後的文檔結構。
6.最後一步就是將formatting structure的結果渲染在目標媒體上。比如瀏覽器將其渲染到你的屏幕上。
2.CSS設計準則
- Forward and backward compatibility
- Complementary to structured documents
- Vendor, platform, and device independence
注重廠商，平台以及設備的獨立性，允許你將特定的CSS應用到一組設備上。
- Maintainability
可維護性，不解釋。
- Simplicity
簡潔。
- Network performance
注重網絡性能，你可以將CSS壓縮以減少網站訪問流量。
- Flexibility
靈活性。你可以以不同的方式引入CSS。
- Richness
給設計者提供豐富的特性來讓你的頁麵達到更完美的效果。
- Alternative language bindings
支持其他語言的操控。比如你想改變字體顏色，除了CSS，還可以用JS來控製。
- Accessibility
易接受性。CSS可以通過某些特性來讓一些有訪問障礙或特殊需求的人更容易的使用Web。比如當你的無法訪問網絡圖片時，可以用alt中文字代替。
3.總結
本係列主要針對於Web開發，w3c中部分章節作用不大就直接忽略了，比如第7章講media types媒體類型，講了各種媒體類型print，speech，tv什麼的，（一般用到的就是screen吧= =）。有興趣，或者有必要的時候，再去看看原文也不錯。
最後更新：2017-04-03 05:40:03