- From: Eric A. Meyer <eric@meyerweb.com>
- Date: Tue, 25 Jan 2011 10:08:26 -0500
- To: www-style@w3.org
Hello again, As I worked my way through understanding 'border-image' and related sub-properties-- which I mostly do now, I think-- I was massively hampered by an initial intuition that turned out to be completely wrong. I raise it here because I doubt very much I'll be the only person so affected. I assumed, based on the name of the property and a general idea of what it was meant to do ("use an image for the element's border"), that I could take a single image and repeat it all the way around the border. As an example, put stars around a div by using an image of a star. As it turns out, as most of you know, that's not possible. You can get that end result, but only with an image that contains a 3x3 grid of copies of the same star. Once I overcame my incorrect intuition, it was much easier to understand 'border-image'. I had to realize that what I was working with was a sprite-sheet containing pieces of a border frame that CSS would slice up and then use the pieces to decorate the edges of the element. The point being that the simplest case of creating an image border (one image repeated) is not supported in a straightforward manner. In fact, it's not supported at all if you take "one image repeated" to mean "an image of a single glyph/icon/etc. repeated". It is supported if you take it to mean "an image containing 8 copies of a single glyph/icon/etc. repeated" but that's not what most authors are going to assume when they first approach this property. In case that last assertion seems dubious, I put a 'border-image' scenario to the readers of meyerweb[1]. A number of them came up with the right answer but complained about the property being very counter-intuitive. Others hacked around the problem entirely using other methods because they couldn't figure out how to do what I specified, or couldn't figure out how 'border-image' was supposed to work in the first place. (And a couple of people got it to work in WebKit, but we're still not sure if that was a bug exploit or not.[2]) It seems to me that this could be addressed in a couple of ways: 1. Change the behavior of 'border-image-slice' so that if you specify '100%' (which is also the default) for an image, the whole image is used for each slice. Similarly if you specify a number that equals the number of pixels in height/width of the image. I can't see a good reason why it should behave as it does now, where slices get replaced with transparency if your slices exceed half the height/width of the base image. Note that WebKit already does this, but other browsers do not. 2. Change the property name to 'border-frame' or 'border-image-frame', and the related sub-properties to match. (Credit for the 'frame' nomenclature goes to Peter Gasston[3].} Because that's more like what the properties do, at least as specified. While I don't think this name would be immediately intuitive, it would be a lot less counter-intuitive: authors would be less likely to approach the property thinking, "Oh, cool, images for borders! Let's run this star around this div!" and then be completely stumped by the resulting behavior. [1] http://meyerweb.com/eric/thoughts/2011/01/24/border-imaging/ [2] http://meyerweb.com/eric/thoughts/2011/01/24/border-imaging/#comment-531046 [3] http://meyerweb.com/eric/thoughts/2011/01/24/border-imaging/#comment-531023 -- Eric A. Meyer (eric@meyerweb.com) http://meyerweb.com/
Received on Tuesday, 25 January 2011 15:09:04 UTC