Re: [css3-background] lookahead and 'background' shorthand parsing

On Monday 15 September 2008 11:42, Anne van Kesteren wrote:
> On Mon, 15 Sep 2008 00:39:57 +0200, L. David Baron
> <dbaron@dbaron.org> wrote:
> > I noticed that in the parsing of the 'background' shorthand in
> > http://dev.w3.org/csswg/css3-background/#background1 , the parsing
> > requires two token lookahead, which current CSS parsing rarely, if
> > ever, requires.  In particular, when a '/' is encountered, it's not
> > possible to tell whether that '/' is the delimiter in the middle of
> > the background-color or whether it's the beginning of the
> > background-size without looking at the next token:
> >
> >   background: blue / black; /* background-color */
> >   background: blue / cover; /* background-color background-size */
> >
> > One way to solve this would be to require 'background-position' in
> > order to specify 'background-size'.
> >
> > (It's possible we could decide it's worth the complexity, although
> > I wouldn't be too happy about that.)
>
> I thought we decided that background-size would be enclosed by
> parenthesis in the background shorthand. The various examples reflect
> this, but the grammar apparently does not. (No idea what WebKit
> supports here though.)

Here are two concrete proposals for new text for section 3.11. I believe 
both of them satisfy the requirement that every token encountered 
during a parse uniquely identifies the property to set, without 
lookahead:

1) David's suggestion above: the slash must follow something that 
determines whether it is the slash of background-size or of 
background-color. This requires a change to 3.11 (the ‘background’ 
shorthand property) and to 3.2 (the ‘background-color’ property):

Replace the first two paras of 3.11 with:

    <bg-layer> stands for:

        <'background-image'>
        || <'background-position'> <'background-size'>?
        || <'background-repeat'>
        || <'background-attachment'>
        || <'background-origin'>
        || no-clip

    <final-bg-layer> stands for: 

        <'background-image'>
        || <'background-position'> <'background-size'>?
        || <'background-repeat'>
        || <'background-attachment'>
        || <'background-origin'>
        || no-clip
        || <'background-color'>

And replace the syntax line in 3.2 with:

    Value: <color> [ / <color> ]?

2) Anne's suggestion above, use "(...)" to mark-up the size. Replace the 
first two paras of 3.11 with:

    <bg-layer> stands for:

        <'background-image'>
        || <'background-position'>
        || ( <'background-size'>? )
        || <'background-repeat'>
        || <'background-attachment'>
        || <'background-origin'>
        || no-clip

    <final-bg-layer> stands for: 

        <'background-image'>
        || <'background-position'>
        || ( <'background-size'> )
        || <'background-repeat'>
        || <'background-attachment'>
        || <'background-origin'>
        || no-clip
        || <'background-color'>

Of course, there are many other other possible solutions, but typically 
they are more verbose. E.g., replace the parentheses by the 
keywords "with size" or remove the slash before the size but require 
the position to be specified in full:

    background: url(foo.png) center no-repeat with size 50% 50%;
    background: url(foo.png) no-repeat center center 50% 50%;
    background: url(foo.png) no-repeat center / 50% 50%;        /* 1 */
    background: url(foo.png) center no-repeat (50% 50%);        /* 2 */



Bert

PS. This is related to ACTION-105 and ISSUE-63.

-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Monday, 8 December 2008 15:42:24 UTC