Re: Border and background images (Re: CSS Attribute Proposal)

>> You might want to look at the CSS3 Border Module[1]
> 
> Yes, that is indeed the right place, but you probably noticed that that
> draft is quite old. It isn't abandoned, but interest in fancy borders
> seems to have diminished a lot and it didn't seem important to publish a
> new version.

I'm not sure what you mean by that. Maybe people from inside the Working Group
don't like the idea anymore, but from what I have heard and seen (forums,
mostly) a lot of web page authors would really like to have this ability.
Currently you can work around it by adding 4 extra DIV/SPAN elements and style
the appropriately, but that isn't really the idea I guess.

Other methods include using generated content, but that only solves the problem
for when the 'width' of the element is set in pixels.


> However, seeing this message, maybe there is interest still and we should
> publish another draft, even if it has many loose ends still...

Indeed. It should be made more solid and ready for implementations in UAs.


> Because there is a rather interesting idea in there:
> 
> In fact, in an attempt to reduce the rather large number of properties in
> the old draft[1], and noticing how designers often go about making their
> images, somebody came up with the idea to merge the border and background
> and allow both to be specified with a *single* image, plus four numbers,
> that specify how to cut it into nine parts: four corners, four sides and
> the center part for the background itself. 'Background-repeat' and the new
> 'background-size' together then not only specify how the background is
> tiled and stretched, but also cause the four sides of the border to tile
> or stretch to match the background.

This seems to be a lot more complicated than how the current WD works. Although
it has a lot more properties, those properties are understandable from the
moment you see them, right?

The single image idea is however quite nice. It can save a lot of server hits
and such techniques are currently (heavily) used for navigation.


> The typical application is that you draw a picture of a complete box with
> the desired background and borders at some small size and then you only
> have to specify how it scales or tiles to adapt to differently sized
> boxes. No need to cut it up yourself, the browser will do it for you.

There is quite a big chance that this will make it look ugly, right? At least,
for non vector images.


> There is probably no need for new border properties at all, this way,
> while (nearly?) all the functionality of the border module is retained.
> Adding four custom corners in particular could be done with just one image
> and one property.

It is quite strange though, to combine a 'background' with 'border'


> As I said, there are a number of details that we haven't come round to
> defining yet, but one of the possibilities is that, if you specify
> 
>     background-image: tile("image.png", 15px, 15px, 15px, 15px)
> 
> the presence of a tile() value instead of a url() automatically disables
> 'border-style' and causes the outer 15px of the image to be used instead.
> (Unless the image fails to open, in which case 'border-style' is the
> fallback.) Many other syntaxes are possible, but this should give an idea.

Does this property overrides other 'border' properties that are set? For
example:

  border:30em solid #000;

I also think that 'url()' should be nested inside 'tile()' for consistency.


--
 Anne van Kesteren
 <http://annevankesteren.nl/>

Received on Saturday, 21 August 2004 09:34:45 UTC