Re: CSS 的可交換性、直書/橫書切換的邏輯屬性、Gecko 與 Webkit 的 CSS 實作差異

補一些實作細節（C++ 所以可能不太有趣）：

(11/04/19 13:05), Kang-Hao (Kenny) Lu wrote:
> 需要抽象化的方向的主因是我們不能把 上/右/下/左 照書寫模式改變方向的定
> 義，不然對於 RTL 的人來說左邊是右邊，右邊是左邊太混亂。邏輯屬性的優點是
> 同樣的樣式表可以用在不同的書寫模式上[3]，對於重複使用樣式有幫助。Gecko
> 在多年以前就為了 RTL 文字引入了 *-start/end，而 WebKit 也在實作直書之後
> 也很完整的支援邏輯屬性[4]。
>
> [4] Gecko:
> http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css#145
>      WebKit: http://www.ilovejs.net/lab/default-css/webkit-html-css.html

補穩定版的 URI
Gecko: http://mxr.mozilla.org/mozilla2.0/source/layout/style/html.css#145
WebKit:
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?rev=84039#L62

> 這雖然更罕見了，但是這是有前例的！根據 CSS2.1 規範†：
>
> p { font-size: 12px; margin-left: 1em; font-size: 14px; }
>
> 等同於 'margin-left: 14px'，所以前面的問題 'margin-before: 1em; ' 等同於
> 'margin-top: 1em; '
>

簡單的說，CSS2.1 的規範[1]定義了一個 specified value > computed value >
used value > actual value 的計算過程。在做 specified value 的計算的時
候，font-size: 14px; 就會把 font-size: 12 px 蓋掉了。1em → 14px 的過程是
在 computed value 的計算，是發生在後面的。

[1] http://www.w3.org/TR/CSS21/cascade.html#value-stages

> **Gecko 在解析 CSS 的一個宣告區塊
> （{...}）的時候，用來存多個屬性宣告的資料結構基本上是近似於一個
> Dictionary†**，也就是後面的非速記屬性的宣告會在解析時間就把前面的同一個
> 屬性的宣告蓋掉，這是因為 CSS 幾乎所有屬性都是可以交換的，這種優化一般來
> 說來說沒問題。

在 nsCSSExpandedDataBlock::AddLonghandProperty 這裡[2]，那個 storage 是
每次叫都會回傳一樣的位置。基本上 nsCSSExpandedDataBlock 就是那個
Dictionary，不過說它是 Dictionary 也不太對，他是固定大小的很大一塊用來存
所有屬性（畢竟屬性數是有限個）跟他的值的記憶體。同一個檔案還有
nsCSSCompressedDataBlock 這個類，是記憶體壓縮後的
nsCSSExpandedDataBlock，是建構出來之後大小就固定的（大小跟被壓縮的
nsCSSExpandedDataBlock 的屬性數有關）。

[2]
http://mxr.mozilla.org/mozilla2.0/source/layout/style/nsCSSDataBlock.cpp#489

> 請問，這看起來矛盾的兩件事（'margin-left' 到底跟
> 'margin-start' 交換還是不交換），Gecko 到底是怎麼實作的？（另一方
> 面，Webkit 的資料結構就是把一個宣告區塊中間的屬性宣告存成一個 Vector†，
> 後來取後面的當結果就相對簡單）

CSSMutableStyleDeclaration 的 m_properties[3] 就是該 Vector（注意到一個
CSSProperty 其實包含它的值，所以命名應該要是 CSSDeclaration ，總之這些命
名都有點問題，要注意一下 xdd）

[3]
http://trac.webkit.org/browser/trunk/Source/WebCore/css/CSSMutableStyleDeclaration.h#L174

> Mozilla 的超級大強者 David Baron 在 2002 年想出了一個不會改變太多 Gecko
> 的結構，但是解決了維持邏輯屬性跟物理屬性的順序這個要求的非常妙的方法
> [5]，而這個方法也就成為今天 Gecko 的 *-start/end 的實作†。

證據：[4]
連 margin-left 都是一個速記 :p
喔，忘了提。David Baron 是 Mozilla 在 W3C 的 Mozilla 總代表。

[4]
http://mxr.mozilla.org/mozilla2.0/source/layout/style/nsCSSProps.cpp#1936

> p.s. 我之後會整理一些關於瀏覽器實作的連結到小組的 wiki 上

我發現要了解瀏覽器實作真的是讀規範比讀 code 容易很多，我有想要做一份
CSS2.1 有實作註解（就是有連到原始碼的連結）的規範，如果有興趣合作的歡迎
私下連絡我。

我覺得現在大家都蠻關注 <canvas> 的，如果 canvas2D 跟 WebGL 的規範也這要
搞我覺得對了解細節跟實作都很有幫助～


Kenny

Received on Thursday, 21 April 2011 10:08:54 UTC