CSS3 . Info
CSSWG RFC: border-image Issues and Other Topics
by fantasai, 13 April
2009 10:42 PM
So, the CSS Working Group is trying to wrap up the CSS3 Backgrounds and
Borders Module and prepare it for Last Call. However, there are
still some open issues we’d would like to get comments on.
Most of the open issues revolve around
border-image. Brad Kemper knocked down several with
his
proposal and the CSS Working Group has adopted it in principle.
(You can find it drafted into the
latest unofficial Editor’s Draft on the W3C site.) We’re still
ironing out the details on that, but there are a few others still
open on border-image:
First Issue: Several people have commented that
they would like a way to clip out the center part of the image.
There are two options for this: A) Keep the middle part by default
(current behavior). Add an empty keyword that clips
out the middle part. B) Make the middle part clip out by default.
Add a fill keyword that keeps it. (It’s needed for
stretch-tiling things like aqua buttons.) Of course we might also
just keep the current solution, C) have authors make that part of
the image transparent. Comments? What would you use?
Second Issue: The syntax is particularly
arcane. One commenter suggested breaking up
border-image into multiple properties, leaving
border-image itself as a shorthand. For example,
border-image: url(...) 20% 40% / 10% 4em 20% / 0 1em;
would be equivalent to
border-image-source: url(...);
border-image-slice: 20% 40%;
border-image-widths: 10% 4em 20%;
border-image-outset: 0 1em;
This would also allow the values to cascade independently,
making it easy to e.g. swap just the image. There’s an overhead
cost to more properties, however, so if we do this there needs to
be a significant and useful advantage. Thoughts on this idea, or
any other ideas for making border-image easier to understand?
Third Issue: There’s still an open question of
how border-image should interact with
box-shadow. The two proposals on the table are: 1.)
Ignore box-shadow when border-image is in
effect. (The author can draw the shadow directly in the
border-image.) 2.) Use the border-image as a mask to draw a shadow,
but only draw the shadow where it appears outside the padding edge
(inner border edge). Comments? Preferences?
Fourth Issue: The next topic is fallback
colors: the
current draft has a feature that lets you specify a background
color to use only if the bottommost background image fails to load.
The WG wants to know, is this feature something authors really
want? Several WG members have posted comments saying that it’s too
hard to understand, that it’s not useful, and that the proposed
syntax doesn’t make sense. What do you think?
Fifth Issue: The last issue is, the
current draft specifies a background-clip: no-clip
feature that lets a background image spill out of the border box.
Implementors are concerned that it’s tricky to implement, and
aren’t convinced that it would be useful. If this is something you
want, show off a realistic example or two that demonstrates why it
is needed.
Off-topic Issue: While I’m here, the WG wanted
me to ask what people thought of renaming the
block-progression property to block-flow
or block-direction and whether either was more
understandable (or if anyone had better ideas). The property
changes the direction of block layout, and the values are
tb (horizontal lines stacked top-to-bottom, like
English text), rl (vertical lines stacked
right-to-left, like traditional Chinese text), and lr
(vertical lines stacked left-to-right). This is for vertical text
layout, btw; it’s different from graphical rotation. See pages 2-5
of UTN
22 (PDF/HTML+SVG)
for a definition.
P.S. Could someone please fix the css3.info style sheet so it
doesn’t effectively eat list markup? Thanks.
, rather than in the right-hand
properties panel. This is to improve consistency and avoid
surprises.
