'cycle()' 的使用情節與設計

我在給 CSS3 取值與單位模組（CSS Values and Units Module Level 3，以後簡
稱 CSS3 V&U）找碴的時候，發現到 cycle() [1]的定義似乎不能滿足我想像的使
用情節。目前的定義如下：

  # ‘cycle()’ 回傳的值必須透過比較繼承值 I（一般是父元素的計算值，若對
  # 象是根元素的時候，使用屬性的初始值）與 ‘cycle()’ 的第 n 個參數的計
  # 算值 Cn 來決定。若 Cn 是滿足 Cn = I 的最前面的值，則 ‘cycle()’ 回
  # 傳 Cn+1。不然，若 Cn 是最後的值，又或沒有等於 I 的 Cn，則回傳第一個
  # 值的計算值。

而我想像的使用情節是

使用情節 1：在一個由巢狀的 <table> 構成的使用者介面中，對 <table> 交替使
用不同的 'background-color'。參考圖片[2]。

我本來以為

  table {
    background-color: cycle(gray, white);
  }

之類的就可以，我也問過 doyle 說「你覺得這個問題要怎麼用 CSS 解決」他也直
接說 'cycle()'。但是按照上面的定義的話，其實不行，因為假如 <table> 跟
<table> 之間有別的元素（在這個介面中當然有 <td> 等等），'background-
color' 的繼承值會變回初始值：'none'，所以最後會變成每個 <table> 的
'background-color' 都是 'gray'。

[1] http://www.w3.org/html/ig/zh/wiki/Css3-values#cycle
[2] http://www.w3.org/DesignIssues/diagrams/tabulator/Picture07.png


這裡我想了不少，想到的兩個解決方案是：

解決方案 A：

更改上述定義成

  | 繼承值 I 的定義如下：若屬性可繼承，繼承值為父元素的計算值或屬性的初
  | 始值（根元素的時候）。若屬性不可繼承，繼承值為計算值不是屬性初始值的
  | 祖先元素中，最靠近對象元素的那一個祖先元素的計算值，或屬性的初始值（
  | 對象元素是根元素或是祖先元素的計算值全部都是初始值得時候）
  |
  | ‘cycle()’ 回傳的值必須透過比較繼承值 I 與 ‘cycle()’ 的第 n 個參
  | 數的計算值 Cn 來決定。若 Cn 是滿足 Cn = I 的最前面的值，則
  |‘cycle()’ 回傳 Cn+1。不然，若 Cn 是最後的值，又或沒有等於 I 的 Cn，
  | 則回傳第一個值的計算值。

也就是在非繼承屬性的時候特別無視初始值。不過其實我不太清楚這種使用不是直
接父元素的資訊的方案是不是可實作的。

我另外想了更複雜的方案，等於是重寫 'cycle()' 的運作方式，不過或許更直觀
一點，未來的發展性也說不定更高一點。

解決方案 B：

  | 每個 ‘cycle()’ 對應一個無名計數器，初始值為 0。每當進入一個設有這
  | 個 ‘cycle()’ 的元素的時候，對應計數器加 1，離開的時候計數器減 1。
  |‘cycle()’回傳第 counter(anonymous) mod L 個值（從 0 算），其中 L 是
  | ‘cycle()’的 <value> 個數。

這個方案其實讓

使用情節 2（範例十七）：在巢狀 <ul> 中，輪流使用不同的標記。

更簡單：

  ul {
    list-style-type: cycle(disk, circle, square, box);
  }

現在的範例十七之所以需要用

  ul { list-style-type: disk; }
  li > ul { list-style-type: cycle(disk, circle, square, box); }

是因為 'list-style-type' 的初始值就是 'disk'，如果照原先定義，使用上面那
個就會變成第一層 <ul> 是 'circle'。（也就是，原先定義中 'cycle()' 是描述
「若父元素是 A，則變成 B」，我的定義直接是讓 'cycle()' 描述「第 N 層使用
第 N 個值」，也就是不需要特別知道父元素繼承下來的值是什麼。）

但是卻完全不能解決

使用情節 3（範例十六）：若 em 不在斜體裡面，使用斜體，若在斜體裡面，使用
一般體。

因為那就是需要「若父元素是 A，則變成 B」的場合。或許有一個專有的
'toggle()' 比較好？


我的定義如果可以不用無名計數器，而直接使用有名計數器的話，CSS 就變成可以
使用一般程式語言的列了、、、


先不天馬行空，不知道大家對這個問題有什麼想法，我自己是覺得使用情節 1 比
使用情節 3 出現的機率高，3 又比 2 高，所以這兩個解決方案之一一定要被採
用，還有其他方案嗎？

又，有沒有人可以幫忙找找類似使用情節 1 的其他情節，或是發揮創意看看 CSS
有列的時候到底在什麼樣的使用情節會有用。基本上回到使用情節討論問題會比較
踏實一點。


此致

呂 康豪（Kenny）, 中文興趣小組W3C連絡人
新浪微博: http://t.sina.com.cn/1950042164
Google+: https://plus.google.com/112088462407783855918/posts

Received on Monday, 9 April 2012 16:07:41 UTC