Hax 的 [att~=val] 中當 val 裡有空白時應解釋為任一皆可的提案 (原: 一些意见和proposal)

大家好


這是之前 Hax 的一些提案 →
http://lists.w3.org/Archives/Public/public-html-ig-zh/2010Sep/0012 的第三項

（歡迎大家一起來考古 :p）

(10/09/08 3:02), John Hax wrote:
> [恕刪]
>
> 三、CSS3 selector [att~=val] 的问题
>
> [attr~=val]是attr为空格分隔的词中包含val。按照现在的规定Val本身不能含
> 空格，如果含空格是不可能match的。
>
> 建议修改这个行为，如果val包含空格，则表示attr的词列表中包含任意一个val
> 中空格分隔的词

雖然不太看好，總是試著送出去試試。[1]

[1] http://lists.w3.org/Archives/Public/www-style/2011Mar/thread#msg215

>
> nav a[rel~="prev"]::before, nav a[rel~="next"]::before, nav
> a[rel~="first"]::before, nav a[rel="last"]::before, nav
> a[rel~="up"]::before {
>   border-radius: 4px;
>   background: url(nav-link-bg.png)
> }
>
> 注意到这个selector序列会非常冗长（复杂的情况下会更长到不可思议），而且
> 不幸的，很容易写错而且很难看出来（各位能看出来我哪里写 错了吗？）

找很久找到了 :)  不公佈留給其他人試試看 xd

> 这时候如果支持前述定义，就可大大简化了：
>
> nav a[rel~="prev next first last up"]::before {
>   border-radius: 4px;
>   background: url(nav-link-bg.png)
> }
> nav a[rel~="prev next first last up"][rel~="external"]::before {
>   background: url(external-nav-link-bg.png)
> }

其實現在 Mozilla 有這個 :any 的提案[2]（還沒有寫成 W3C 文檔）是個很一般
的解決用「,」的樣式過長問題的提案，你的第二個樣式可以寫成：

nav a:any([rel~="prev"], [rel~="next"], [rel~="first"],
               [rel~="last"], [rel~="up"])[rel~="external"] { color: red }

（做了一個 demo[3] 給大家玩玩看）
雖然是縮短一點，不過看起來的確是很難看。不過同樣是解決樣式重複的問題，我
覺得最後不會兩個提案都用。另外就是你的提案會讓 [rel~="a b"] 跟 [rel="a
b"] 走不同的 codepath，有種不協調的感覺。看看之後會怎麼樣吧。

[2] https://developer.mozilla.org/en/CSS/%3A-moz-any
[3] （需要FF4b） http://www.w3.org/People/kennyluck/Test/any-selector-attr

此致
Kenny, HTML5 中文興趣小組W3C連絡人
推特: http://twitter.com/kanghaolu
噗浪: http://www.plurk.com/kennyluck
新浪微博: http://t.sina.com.cn/1950042164 （還不是很有東西）

Received on Saturday, 12 March 2011 03:00:33 UTC