Proper order for settings to CSS border selector

J

joshbeall

Hi All,

I recently had someone look at a stylesheet I had written up, and they
gave me a slap on the hand for putting something like this:

div.someclass {
border: 1px red solid;
}

They said it was not the proper order. Fair enough, so I made it this:

div.someclass {
border: 1px solid red;
}

Which is, I'm told, the correct order.

However, I then heard from another miscellaneous site* that the order
doesn't matter.

So, who is correct? Can anyone point me to the relevant portion of the
specs that would say who is correct?

-jb


*Item number 3 from this page:
http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/
 
J

jojo

I recently had someone look at a stylesheet I had written up, and they
gave me a slap on the hand for putting something like this:

div.someclass {
border: 1px red solid;
}

They said it was not the proper order. Fair enough, so I made it this:

div.someclass {
border: 1px solid red;
}

Which is, I'm told, the correct order.

However, I then heard from another miscellaneous site* that the order
doesn't matter.

So, who is correct? Can anyone point me to the relevant portion of the
specs that would say who is correct?

-jb


*Item number 3 from this page:
http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/

ASFAIK the order doesn't really matter. But specs (see:
http://www.w3.org/TR/REC-CSS2/propidx.html ) say that it has to be
'width' 'style' 'color'. But most browsers understand it every way
round, although that isn't correct. Is just the browsers doing you a
favor (but they don't need to!).
 
D

dorayme

jojo said:
dorayme said:
Does not say any such thing at your reference.

It does!

'border' [ 'border-width' || 'border-style' || <color> ]|inherit

Ok, let me explain: to press your point home you need to give the
OP a reference to how this is to be read. Your reference, in
itself, does not contain any instructions as to whether the order
printed here is mandatory. You might think it obvious. It is not
obvious to me nor might it be to the OP. You need to reference
the meaning of "||" as well.

And just to make sure, let me comment on a possible thought you
are having. "Why would they print it in this order if they did
not mean it to be that way?" The answer is that there is no way
they can print an example or template without printing it in some
order.[1]

The point, again, is that you cannot always judge how something
is to be interpreted by staring at it. Take the word "zymotic" as
an example: staring at it will never reveal its meaning. If you
otherwise know its meaning, it will not impress a doubter by
referring her to the word itself.

[1] They could with javascript or php perhaps: have the order
keep changing every second and you get to see that it does not
matter. That would be a way it could show the order is not
important.
 
M

mbstevens

jojo said:
dorayme said:
ASFAIK the order doesn't really matter. But specs (see:
http://www.w3.org/TR/REC-CSS2/propidx.html ) say that it has to be
'width' 'style' 'color'.

Does not say any such thing at your reference.

It does!

'border' [ 'border-width' || 'border-style' || <color> ]|inherit

Ok, let me explain: to press your point home you need to give the
OP a reference to how this is to be read. Your reference, in
itself, does not contain any instructions as to whether the order
printed here is mandatory. You might think it obvious. It is not
obvious to me nor might it be to the OP. You need to reference
the meaning of "||" as well.

It was pretty well hidden, but I knew they had to have it somewhere:

http://www.w3.org/TR/REC-CSS2/about.html
...seems to have the necessary info for interpreting:
http://www.w3.org/TR/REC-CSS2/propidx.html

The most relevant section:
<quoting>
* Several juxtaposed words mean that all of them must occur,
in the given order.
* A bar (|) separates two or more alternatives:
exactly one of them must occur.
* A double bar (||) separates two or more options:
one or more of them must occur, in any order.
* Brackets ([ ]) are for grouping.
</quoting>
 
D

dorayme

mbstevens said:
jojo said:
dorayme wrote:

ASFAIK the order doesn't really matter. But specs (see:
http://www.w3.org/TR/REC-CSS2/propidx.html ) say that it has to be
'width' 'style' 'color'.

Does not say any such thing at your reference.


It does!

'border' [ 'border-width' || 'border-style' || <color> ]|inherit

Ok, let me explain: to press your point home you need to give the
OP a reference to how this is to be read. Your reference, in
itself, does not contain any instructions as to whether the order
printed here is mandatory. You might think it obvious. It is not
obvious to me nor might it be to the OP. You need to reference
the meaning of "||" as well.

It was pretty well hidden, but I knew they had to have it somewhere:

http://www.w3.org/TR/REC-CSS2/about.html
...seems to have the necessary info for interpreting:
http://www.w3.org/TR/REC-CSS2/propidx.html

The most relevant section:
<quoting>
* Several juxtaposed words mean that all of them must occur,
in the given order.
* A bar (|) separates two or more alternatives:
exactly one of them must occur.
* A double bar (||) separates two or more options:
one or more of them must occur, in any order.
* Brackets ([ ]) are for grouping.
</quoting>

Yes, this seems to be definitive. As jojo implied, browsers seem
not to be bothered though... I tested in all my Mac browsers.

(Well found, mb...)
 
J

jojo

dorayme said:
ASFAIK the order doesn't really matter. But specs (see:
http://www.w3.org/TR/REC-CSS2/propidx.html ) say that it has to be
'width' 'style' 'color'.
Does not say any such thing at your reference.

It does!

'border' [ 'border-width' || 'border-style' || <color> ]|inherit

Ok, let me explain: to press your point home you need to give the
OP a reference to how this is to be read. Your reference, in
itself, does not contain any instructions as to whether the order
printed here is mandatory. You might think it obvious. It is not
obvious to me nor might it be to the OP. You need to reference
the meaning of "||" as well.
It was pretty well hidden, but I knew they had to have it somewhere:

http://www.w3.org/TR/REC-CSS2/about.html
...seems to have the necessary info for interpreting:
http://www.w3.org/TR/REC-CSS2/propidx.html

The most relevant section:
<quoting>
* Several juxtaposed words mean that all of them must occur,
in the given order
* A bar (|) separates two or more alternatives:
exactly one of them must occur.

Would have guessed so.

Oh, my apologies. I did not find the info how to interpret this. My
explanation for || would have been:

* A double bar (||) separates two or more options:
one or more of them must occur, in the given order.
* Brackets ([ ]) are for grouping.
</quoting>

Yes, this seems to be definitive. As jojo implied, browsers seem
not to be bothered though... I tested in all my Mac browsers.

And every browser on windows I have (Opera, Firefox, IE6) ignore the
order, too. Yes, even IE does it right...
 
M

mbstevens

Oh, my apologies. I did not find the info how to interpret this. My
explanation for || would have been:

Their use is not 'standard' here, either. In mathmatical logic
and in most (but clearly not all) computer languages it simply
means a test for inclusive-or with the truth table:

x T F T F

y F T T F

(x || y) T T T F
 
M

mbstevens

Their use is not 'standard' here, either. In mathmatical logic
and in most (but clearly not all) computer languages it simply
means a test for inclusive-or with the truth table:

x T F T F

y F T T F

(x || y) T T T F

However, if we interpret being present to mean truth, their use actually
does fall in line with the standard use, since there is no requirement
for ordering in the standard use, either.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top