Border and background images (Re: CSS Attribute Proposal)

On Thu, 19 Aug 2004, Anne van Kesteren wrote:

> 
> > Looking at the above code, imagine what it'd be like if you were to have two
> > or more separate page elements that required these corners in order for the
> > page's design to flow properly.  What if, also, those other elements were
> > different sizes than the original?  That'd be a very big problem, indeed, as
> > CSS is supposed to eliminate more code than it adds.  This being the case,
> > problems like this defeat the entire purpose of CSS, which is, need I remind
> > you again, to make it simpler.
> 
> 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.

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

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.

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

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.



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos/                              W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Friday, 20 August 2004 23:08:25 UTC