W3C home > Mailing lists > Public > public-html-ig-zh@w3.org > March 2012

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

From: Kang-Hao (Kenny) Lu <kennyluck@w3.org>
Date: Mon, 05 Mar 2012 21:25:06 +0800
Message-ID: <4F54BEB2.5060809@w3.org>
To: W3C HTML5 中文興趣小組 <public-html-ig-zh@w3.org>
英文版: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

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:43:50 UTC