- From: Marat Tanalin | tanalin.com <mtanalin@yandex.ru>
- Date: Fri, 20 Jan 2012 02:13:43 +0400
- To: Tab Atkins Jr. <jackalmage@gmail.com>
- Cc: Brad Kemper <brad.kemper@gmail.com>,John Daggett <jdaggett@mozilla.com>,Matthew Wilcox <elvendil@gmail.com>,www-style@w3.org,ACJ <ego@acjs.net>
19.01.2012, 21:55, "Tab Atkins Jr." <jackalmage@gmail.com>:
> 2012/1/19 Marat Tanalin | tanalin.com <mtanalin@yandex.ru>:
>
>> 19.01.2012, 21:44, "Tab Atkins Jr." <jackalmage@gmail.com>:
>>> This could also be addressed by something like:
>>>
>>> background-image-4: url(whatever.png);
>>>
>>> That seems somewhat easier to read - it's difficult to tell off-hand
>>> what layer is being referenced in your example.
>> Just thoughts: maybe background-image[4] (looks more array-like)?
>
> That's not allowed by the grammar currently, though by the
> error-recovery rules it would fail nicely (it'll eat content until the
> next ";" or "}", like any malformed declaration). I agree that it
> looks a little better. My concern is that it looks a bit more like
> mutating, rather than a separate property, so the fact that it works
> within the normal cascade system might be confusing.
Oh, it seems I've initially not quite understood the goal. Sorry for that. Fortunately, it can be seamlessly expanded to match the usecase and even more.
Syntax I've already mentioned is intended for mutating, i.e. background-image[4] is meant to _replace_ fourth background layer.
For inserting extra value item _between_ existing values in enumeration defined in a previous matching rule, we could use "-"/"+" suffix:
.lorem {background-image[4-]: url(beforeFourth.png); }
.ipsum {background-image[4+]: url(afterFourth.png); }
'-'/'+' after index here means that new value should be inserted between layer that previously had specific index (4 in the example) and its previous ('-') or next ('+') layer -- without replacing any of them.
We could also have keywords "first" and "last" to conveniently address first and last items of enumeration:
.foo {background-image[first-]: url(prepend.png); }
.bar {background-image[last+]: url(append.png); }
So, if we have:
.base {background-image: url(a.png), url(b.png); }
.base.derived {background-image[first-]: url(prepend.png); }
it would be equivalent to:
.base.derived {background-image: url(prepend.png), url(a.png), url(b.png); }
Ranges could be expressed too:
.base {font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif; }
.base.derived {font-family[2,4]: Lucida; }
it would be equivalent to:
.base.derived {font-family: Verdana, Lucida, sans-serif; }
where all items in range from second item to fourth item (inclusive) are replaced with new 'Lucida' font-family item.
The proposed syntax in summary:
1. index inside square brackets after property name is used to _replace_ corresponding item in comma-separated values' enumeration;
2. index with added '-' is used to _insert_ new item _before_ specified item;
3. index with added '+' is used to _insert_ new item _after_ specified item;
4. 'first' keyword instead of numeric index is equivalent to '1';
5. 'last' keyword instead of numeric index is equivalent to numeric index of last item (e.g. it's equal to '3' if enumeration has 3 items, or '7' if enumeration has 7 items);
6. one or multiple new items can be inserted or be replacement for one or multiple items;
7. this syntax is applicable to any comma-separated lists (like {prop: a, b, c;}) including (but not limited to) backgrounds and font-families.
Thanks.
Received on Thursday, 19 January 2012 22:14:23 UTC