border 縮寫上的 inherit 與 !important 與 border-image 的交互作用

CSS3 背景與邊框模組裡關於 'border' 縮寫的描述[1]是這樣的：

  # ‘border’ 屬性是用相同的寬度、樣式與顏色設定盒的四個邊的縮寫屬性。
  # 與縮寫屬性 ‘margin’ 與 ‘padding’ 不同，‘border’ 不能在四個邊框
  # 設定不同的值。網頁作者需要用一個以上的其他邊框屬性才能在四個邊框設定
  # 不同的值。
  #
  # ‘border’ 縮寫也會重設 ‘border-image’ 為初始值。

這邊用一個「重設」這個說法相當模糊。使用現在這個說法，

div { border: inherit; }

到底跟

div {
  border-width: inherit;
  border-style: inherit;
  border-color: inherit;
  border-image: inherit;
}

還是

div {
  border-width: inherit;
  border-style: inherit;
  border-color: inherit;
  border-image: none;
}

等價呢？

雖然以最接近規範的字句解釋來看，後者比較像是對的（總是重設 'border-
image'），但是我想前面那個才是當前實現現實的可能性大一點，畢竟，就像
'margin' 是所有 'margin-*' 的縮寫一樣，'border' 應該也是包括
'border-image' 的所有 'border-*' 的縮寫一樣。只是 'border' 縮寫比較特
殊，用非 'inherit' 的值設值的時候，得到的結果會滿足下面不變量：

* border-width-top = border-width-right = border-width-bottom =
border-width-left
* border-style-top = border-style-right = border-style-bottom =
border-style-left
* border-color-top = border-color-right = border-color-bottom =
border-color-left

所以這邊「‘border’ 縮寫也會重設 ‘border-image’ 為初始值」這句話，可以理
解成 'border-image' 也是 'border' 的子屬性，但是這裡要求使用 'border' 縮
寫的時候滿足

* border-image = 0 （none）

這個不變量。

這只是一個理論而已，這邊我想也是後者個行為比較好一點（也比較不怪一點），
有人有興趣幫忙測試看看支援 'border-image' 的瀏覽器（FF、WebKit）是不是照
後面的這個解釋實作？還是前面甚至是完全不合規範的行為？


'!important' 的問題類似，以下的

div {
  border: none !important;
  border-image: url("example.png");
}

到底會不會有 'border-image' 呢？

*假如*，'border-image' 是 'border' 的子屬性的話，那根據 CSS2.1 關於
'!important' 的描述[2]：

  # 宣告縮寫屬性（如：'background'）為 "!important" 等同於宣告縮寫屬性的
  # 所有子屬性為 "!important"。

那前面的宣告就會覆蓋後面的。*但是現在規範的敘述看起來 'border' 只是
'border-width'、'border-style'、'border-color' 的縮寫。* 我想，'border-
image' 的確是 'border' 的子屬性，這邊規範過於含糊，需要寫清楚。

[1] http://www.w3.org/html/ig/zh/wiki/Css3-background#border
[2] http://www.w3.org/html/ig/zh/wiki/CSS2#important-rules


此致

Kenny

Received on Monday, 5 March 2012 08:00:23 UTC