CSS3 Backgrounds & Borders 最後意見徵集反饋

英文版：http://dev.w3.org/csswg/css3-background/
中文版（30%）：http://www.w3.org/html/ig/zh/wiki/css3-background

還有新功能的部份不能在這個等級加進去的我以（CSS4）標注。


1. Introduction
---------------

由於 CSS2.1 在定義 ::first-letter 與 ::first-line 偽元素的時候，有列出所
有適用的的屬性[1]，雖然這些屬性包括「背景屬性」與「邊框屬性」，但是在
CSS3 B&B 有了更多的「背景屬性」跟「邊框屬性」還有 'box-shadow'、'box-
decoration-break' 這兩個不歸為這兩類的（嚴格來說 'border-radius' 也不
行）屬性的存在下，規範上應該在最前面加一句：

  | 除非額外說明，本規範的所有屬性適用於 ::first-letter 與 ::first-line
  | 偽元素。


3.4 Tiling Images: the ‘background-repeat’ property
6.5 Image Tiling: the ‘border-image-repeat’ property
------------------------------------------------

（CSS4）現在的 'background-repeat' 的語法是

  # repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

'background-image-repeat' 的是

  # [ stretch | repeat | round | space ]{1,2}

我有在想這兩個語法統合起來有沒有意義，有 'background-repeat: stretch' 的
話 'background: url(example.png) center / 100% 100%;' 就可以用非常短的
'background: url(example.png) stretch' 取代，不過功能上基本類似。

'border-image: no-repeat' 想起來好像沒什麼意思，圖切片跟切片中間留空白的
設計好像不常見，或許在有多背景邊框下有用點？


3.10 背景縮寫 ― ‘background’ 屬性
------------------------------------

  # 給定一個合法縮寫宣告，對於每一層，使用者代理先將 ‘background-
  # position’、‘background-size’、‘background-repeat’、
  #‘background-origin’、‘background-clip’ 與 ‘background-
  # attachement’ 的對應層設為屬性的初始值，再設定宣告中這個層有的所有取
  # 值。

不知道怎麼搞的，竟然漏了 'background-image'。（中文版已主動更正）


（CSS4）這裡應該加一個 <'background-size'> at <'background-position'> 的
語法，取代難讀的 <'background-position'> / <'background-size'>。語法是從
radial-gradient() 來的[2]。


4.2. Line Patterns: the ‘border-style’ properties
---------------------------------------------------

  #‘inset’
  #
  # Looks as if the content on the inside of the border is sunken into
  # the canvas. Treated as ‘ridge’ in border-collapsed tables. [CSS21]

「表格內」這個說法相當模糊（表格內的非表格元素不應該特殊處理？table-
caption 怎麼算？），用嚴格的 CSS2.1 的語言描述的話，應該是

 s/in border-collapsed tables/for border-collapsed table elements except
table captions/

或是

s/in border-collapsed tables/for table elements except table captions
when 'border-collapse' is 'collapse'


4.3. Line Thickness: the ‘border-width’ properties
----------------------------------------------------

  # The <length> may not be negative.

到不懂這句話的目的，CSS2.1 是說 "Explicit border widths cannot be
negative"。既然這邊也沒有講負的 <length> 怎麼處理，還是該至少用 CSS2.1
的句子把負的 'border-width' 視為不合法。


4.4 邊框縮寫屬性
----------------

（之前提到的 border: inherit; 的問題[3]）


5.1 Curve Radii: the ‘border-radius’ properties
-------------------------------------------------

規範沒有禁止負值，但是也沒有講負值怎麼處理。幾年前的規範是禁止負值的，不
知道是怎麼回事。


6.1 圖像源 ― ‘border-image-source’ 屬性
------------------------------------------

  # 若取值為 ‘none’ 或是圖像不能顯示，使用者代理會使用邊框樣式。

在 'border-image-source' 不適用的情形（邊距折疊的內部表格元素）下，還是
會用備用的邊框樣式才對，這裡應該寫完整。

（又，邊距折疊演算法在 'table' 有 'border-image-source' 的時候怎麼進行？
如果可以當作 'border-image-source' 不存在，那為什麼 'border-image-
source' 不適用於邊距折疊的內部表格元素？）


6.7 圖像邊框簡寫 ― ‘border-image’ 屬性
-----------------------------------------

這個縮寫語法的一部分是

  # <‘border-image-slice’> [ / <‘border-image-width’>?
  #                              [ / <‘border-image-outset’> ]? ]?

這是 CSS 第一次引入用兩個斜線，然而，這現在這個語法有幾個很奇怪的現象：

A. 這個部份可以以一個斜線結尾（<‘border-image-slice’> /），但是不能以兩
個部份結尾。我認為允許一個斜線結尾相當糟糕，比如說，

  border-image: 13 / url("example.png");

會變成合法的，但是至少到目前為止，其他有斜線的縮寫並不接受這種情形。例如：

  background: 50% / url("example.png"); /* 不合法 */
  font: 1em / sans-serif; /* 不合法 */

B. 兩個斜線中間可以沒有東西（<‘border-image-slice’> / /
<‘border-image-outset’> ），這個也有人抗議過。


我認為這兩個問題應該要一起解決，把語法改成

  | <‘border-image-slice’> [ / <‘border-image-width’>
  |                              [ / <‘border-image-outset’> ]? ]?

就行了（拿掉 <'border-image-width'> 後面的 '?'）



（以上都是有規範性的反饋，我還找到了一大堆編輯錯誤[4]，再下來 Last Call
結束前的兩天我可能會再多測試上面這些東西跟拿 Gecko/WebKit 原始碼出來看看
找錯誤。）


[1] http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors
[2] http://www.w3.org/html/ig/zh/wiki/Css3-images#radial-gradients
[3] http://lists.w3.org/Archives/Public/public-html-ig-zh/2012Mar/0013
[4] http://www.w3.org/html/ig/zh/wiki/User:Kennyluck/TODO


此致

Kenny

Received on Monday, 5 March 2012 13:25:42 UTC