[css3-background] slash('/') in border-image shorthand (again) (was: [css3-background] double '/' in border)

6.7. Border Image Shorthand: the ‘border-image’ property


A year ago Yves Lafon raised the issue that the 'border-image' shorthand
should not allow empty argument between two '/', which results in the WG
resolution in the following link:

(10/11/25 14:00), fantasai wrote:
> Minutes of the telecon are here:
>   http://lists.w3.org/Archives/Public/www-style/2010Nov/0264.html
> The WG resolution is not to change the border-image syntax.


I'll point out one more oddness with the current syntax. Like any issue
related to syntax, this is in some sense only about aesthetics.

Currently, the syntax component after <'border-image-slice'> is an optional

  [/ <‘border-image-width’>? [ / <‘border-image-outset’> ]?]

. This has two implications:

1. A trailing slash is valid. This means that

  border-image: 13 / url(example.png);

is valid, while

  background: 50% / url("example.png");
  font: 1em / sans-serif;

are not.

2. Two trailing slashes are not valid.

I found 1. very unacceptable although I can't judge how harmful this is
or if this is harmful at all. The hypothetical scenario might be: a CSS
author bumps into the first declaration which happens to work (not sure
how theoretical it is. Of course we should never teach people about this
syntax corner case.) and he/she then imagines that "slash can be used to
separate any two components in a shorthand" and tries that on
'background' and 'font' and fails.


I have four proposals to address these:

A. Leave the current syntax as it is.

Rule of thumb (when we have N slashes separating N+1 values in the
future): If there are N slashes, the first and the last component can't
be empty while the others can. Otherwise, there can be at most N-1
trailing slashes.

Firefox13a implements this.

B. Allow more tailing slashes.

  [/ <‘border-image-width’>? [ / <‘border-image-outset’>? ]?]

This addresses 2. but not 1.

Rule of thumb: If there are N slashes, the first component can't be
empty while the others can. There can be at most N trailing slashes.

This is in some sense not compatible with CSS2.1 which always has N=1 .

C. Disallow trailing slash at the end.

  [/
     [<‘border-image-width’> [ / <‘border-image-outset’> ]? |
      / <‘border-image-outset’> ]
  ]

(Even thought this looks messy, this is just spec language so I don't
think it matter that much.)

This addresses both 1. and 2.

Rule of thumb: The first and the last component can't be empty while the
others can.

D. Disallow empty component.

  [/ <‘border-image-width’> [ / <‘border-image-outset’> ]?]

This addresses both 1. and 2.

Rule of thumb: n slashes are used to separated n+1 values. None of them
can be empty. n is up to N.

I think Chromium18 implements this, although not the border-image-*
longhand yet. This also addresses Yves' original concern.


My preference is D > C > B > A and I'll call A and B ugly. From code
inspection in Gecko (I don't speak from them though), it takes less than
5 lines of codes to change form A. to any other, so I believe the
implementation cost is pretty small here.


I haven't dug the archive enough far to see why we have the syntax as it
is so I apologize if this point was address before. If that's the case,
I'll appreciate it if someone gives me a pointer to discussions about
this in the past.


Cheers,
Kenny

Received on Thursday, 8 March 2012 00:41:29 UTC