CSS Border images issues

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 afill 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 theblock-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.

You may also like...