Re: Small error in "tips and tricks"

Hello Jonathan,

> I came across a small error while reading one of your CSS tutorials.
> It has to do with an example utilizing the shorthand CSS for the
> border property.
> It seems that the rules listed in the example are out of order:
> 
> http://www.w3.org/Style/Examples/007/figures.html
> DIV.figure {
>   float: right;
>   width: 25%;
>   border: thin silver solid;
>   margin: 0.5em;
>   padding: 0.5em;
>   text-align: center;
> }
> 
> http://www.w3.org/TR/1999/REC-CSS1-19990111#border
> 5.5.22 'border'
> Value: <border-width> || <border-style> || <color>
> 
> 
> Normally I wouldn't think it was a big deal, but the spec notes:
> "Since the properties to some extent have overlapping functionality,
> the order in which the rules are specified becomes important."

Actually there is no error here. In this case the order doesn't
matter. Within the 'border' property, the width, style and color may
be put in any order. That is what the '||' means. The order of the
other properties also doesn't matter, since none of them influences
the border.

The order is only important in cases where there are multiple border
properties, as in this case:

    border: thin solid silver;
    border-top: thick solid silver
vs
    border-top: thick solid silver
    border: thin solid silver;

In the first case, the top border will be thick, since the 2nd line
overrides the first. In the second case, the top border will be thin.
You can easily see that, if you expand the shorthand properties. The
first case expands to:

    /* border -> */     border-top: thin solid silver;
                        border-right: thin solid silver;
                        border-bottom: thin solid silver;
                        border-left: thin solid silver;

    /* border-top -> */ border-top: thick solid silver

which contains two occurrences of 'border-top' and thus the first one
is ignored.



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

Received on Wednesday, 31 July 2002 06:09:15 UTC