Re: [Selectors4] Another interpretation of [att~=val] when val contains space

On 11/10/2011 4:58 AM, fantasai wrote:
> On 03/10/2011 09:25 PM, Kang-Hao (Kenny) Lu wrote:
>> (On courtesy of John Hax's proposal[1])
>>
>> I think this should have been proposed before, but I'll post it again in
>> case it hasn't.
>>
>> Currently, for [att~=val], the selectors spec says:
>>
>> [[ If "val" contains whitespace, it will never represent anything (since
>> the words are separated by spaces). ]]
>>
>> I am wondering whether we can redefine this to be a list of possible
>> match. Namely,
>>
>> [rel~="a b c d"]
>>
>> should represent what is represented by
>>
>> :any([rel~=a],[rel~=b],[rel~=c],[rel~=d])
>>
>> The use case is something like,
>>
>> nav a[rel~="prev next first last up"]::before {
>> border-radius: 4px;
>> background: url(nav-link-bg.png)
>> }
>> which will be less lengthy than the :any equivalent.
>>
>> My personally opinion is that the use case is not strong enough to add a
>> hack to the current syntax, but I am curious about what folks in this
>> forum think.
>
> I think I agree with your opinion. :) But we could do something like
>
> [rel~=prev,next,first,last,up] /* quotes not needed for idents */
> [rel ~= "prev", "next", "first", "last", "up"] /* if you need/prefer
> quotes */
>
> That will allow us to use the same notation for other types of attribute
> selectors. I'll ask what the WG thinks, and if they agree I'll add it to
> the Selectors 4 draft.
>
> ~fantasai


Allowing unquoted strings in CSS attribute selectors may not have been 
the way to go.

Should the below string match? All UAs tested match it.

<!DOCTYPE html>

<style type="text/css">
   * {color: white}
   [val="prev,next,first,last,up"] {background: green}
   /* note, above string must have quotes to match */
</style>

<p val=prev,next,first,last,up>note, string can have quotes or no quotes 
to be matched</p>

<p val="prev,next,first,last,up">note, string can have quotes or no 
quotes to be matched</p>


This sting correctly matches.

<!DOCTYPE html>

<style type="text/css">
   * {color: white}
   [val="prev next first last up"] {background: green}
   /* note, above string must have quotes to match */
</style>

<div val="prev next first last up">note, string must have quotes to be 
matched</div>



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Wednesday, 12 October 2011 10:26:56 UTC