CSS 屬性與標準

CSS 是由一系列標準組成，而不是一種具有單一版本號的語言。規範以層級與模組的形式演進，而瀏覽器實作的是這些文件中持續變動的子集。

層級與模組 #

W3C 從一開始就將 CSS 標準化為基於層級的系統。CSS 1、CSS 2 以及後續層級並不只是小幅修訂；每個層級都對範圍與結構進行了足夠大的調整，因此較早的文件有一部分已經過時。

現代 CSS 透過下列模組進行描述：

• Colors;
• Backgrounds and Borders;
• Flexbox;
• Grid;
• Values and Units;
• Media Queries.

這種模組化設計使規範能夠獨立演進，因此瀏覽器可以逐步推出各項功能。

屬性值 #

CSS 屬性的值會經歷多個階段：

• specified value：樣式表中寫入的值；
• computed value：處理繼承與相對單位後解析得到的值；
• used value：套用版面配置限制後的值。

繼承遵循 computed value，因此如果父元素已經將百分比解析為絕對長度，子元素不會繼承原始百分比。

例如：

.box {
  width: 80%;
}

如果父元素寬度為 1000px，計算後的寬度會變成 800px。

display #

display 屬性同時控制外部與內部的版面配置行為。

<display> = <display-outside> <display-inside> <display-listitem>

其實際含義如下：

• outer display 控制盒子如何參與正常流程；
• inner display 控制子元素如何進行版面配置。

因此，display 不只是外觀屬性。它會改變格式化內容。

長度單位 #

絕對單位與相對單位分別解決不同的問題。

常見絕對單位：

• px
• cm
• mm
• in
• pt
• pc

常見相對單位：

• em
• ex
• ch
• cap
• lh
• ic

相對單位會隨字型度量與書寫模式縮放，因此十分有用。

標準文件 #

主要參考文件包括：

• CSS 規範索引；
• CSS snapshots，用於總結平台的目前狀態；
• 個別模組的草案，用於定義功能系列。

這種結構很重要，因為「CSS 標準」通常指一組持續演進的文件，而不是一份單一的整體式手冊。

實務規則 #

撰寫 CSS 時，應將以下三個層次分開：

1. 屬性語法；
2. 計算後的版面配置行為；
3. 定義該屬性的標準模組。

這種分離可以讓瀏覽器行為更容易除錯，也便於追蹤哪些部分是穩定的、實驗性的或已經過時的。