Re: [WSG] guide to CSS inheritance
John Horner wrote: However, I know I've read an article also by Eric, which says that those nice numbers which make so much sense at first glance are not in base ten. I'm sure it was in his own personal website, but I can't seem to find it. I remember being puzzled by it at the time. If not base 10, then what? Hex? So a specificity of 11 is actually seventeen? And 17 is actually 23? Maybe I misinterpreted something? I'd appreciate any light members could shed on this, As John Allsopp mentions, the specs say that you convert the number to a high base number. If you have 10 or more elements, classes or Id's in your selector, using base 10 could become confusing. However if you've got such overly complicated selectors in the first place, I think you've got more problems than which base to choose! So in most practical situations I think it makes sense to use base 10, which is essentially what John does in his example. And here is the article I assume John Horner was referring to http://www.meyerweb.com/eric/css/link-specificity.html Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] guide to CSS inheritance
Seeing this email reminded me of something.
Yes, some CSS properties are inherited and some aren't.
Inheritance depends on *specificity*, which can be reduced to a
mathematical formula, as in this quote from the definitive O'Reilly
book by Eric Meyer, where it says:
H1 {color: red;}/* specificity = 1 */
P EM {color: purple;} /* specificity = 2 */
.grape {color: purple;} /* specificity = 10 */
P.bright {color: yellow;} /* specificity = 11 */
P.bright EM.dark {color: brown;}/* specificity = 22 */
#id216 {color: blue;} /* specificity = 100 */
which makes sense.
However, I know I've read an article also by Eric, which says that
those nice numbers which make so much sense at first glance are not
in base ten.
I'm sure it was in his own personal website, but I can't seem to find
it. I remember being puzzled by it at the time. If not base 10, then
what? Hex? So a specificity of 11 is actually seventeen? And 17 is
actually 23? Maybe I misinterpreted something?
I'd appreciate any light members could shed on this,
jh
Have You Validated Your Code?
John Horner(+612 / 02) 9333 2110
Senior Developer, ABC Online http://www.abc.net.au/
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] guide to CSS inheritance
John,
Seeing this email reminded me of something.
Yes, some CSS properties are inherited and some aren't.
Inheritance depends on *specificity*, which can be reduced to a
mathematical formula, as in this quote from the definitive O'Reilly
book by Eric Meyer, where it says:
H1 {color: red;}/* specificity = 1 */
P EM {color: purple;} /* specificity = 2 */
.grape {color: purple;} /* specificity = 10 */
P.bright {color: yellow;} /* specificity = 11 */
P.bright EM.dark {color: brown;}/* specificity = 22 */
#id216 {color: blue;} /* specificity = 100 */
which makes sense.
However, I know I've read an article also by Eric, which says that
those nice numbers which make so much sense at first glance are not in
base ten.
I'm sure it was in his own personal website, but I can't seem to find
it. I remember being puzzled by it at the time. If not base 10, then
what? Hex? So a specificity of 11 is actually seventeen? And 17 is
actually 23? Maybe I misinterpreted something?
I'd appreciate any light members could shed on this,
The numbers have no base at all (well, some very large one that may
change in future and is not really relevant)
See the specification for exact details
http://www.w3.org/TR/CSS21/cascade.html#specificity
But in a nutshell, you calculate the specificity like this
Get the following four values
A: is it in a style attribute or not (A=1 in the former, A=0 in the
latter)
B =count the number of id attributes in the selector (note this is
only those of form #, not [id=somidvalue])
C = count the number o other attributes and pseudo classes in the
selector
D = count he number of element names and pseudo elements in the
selector
Then Concatenate (don't add) A, B , C, D
So, if A=1, then we might have B=0, C=0, D=0 and the number would be
1000
and so on.
In essence, it doesn't really matter, because
1. if it is in a style attribute, (eg p style=...) then it will
certainly be more specific than anything else
2. if it contains an id, (p#anID) it will be more specific than any
selector without an id, and so on.
hope this helps a bit,
john
:: westciv :: http://www.westciv.com/
software, courses, resources for a standards based web
:: style master blog :: http://westciv.typepad.com/dog_or_higher/
:: WebEssentials Sept 2004 Sydney Australia :: http://www.we04.com
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] guide to CSS inheritance
[...] I know I've read an article also by Eric, which says that those nice numbers which make so much sense at first glance are not in base ten. I'm sure it was in his own personal website, but I can't seem to find it. I remember being puzzled by it at the time. If not base 10, then what? Hex? So a specificity of 11 is actually seventeen? And 17 is actually 23? Maybe I misinterpreted something? The numbers have no base at all (well, some very large one that may change in future and is not really relevant) See the specification for exact details http://www.w3.org/TR/CSS21/cascade.html#specificity [...] Thanks a lot John, that makes sense. I guess it's a form of modular arithmetic, and as you say, no matter what, 1000 is bigger than 100 which is bigger than 10 and so on, so the actual details needn't concern me. But at least if my students ask me, I'll have the answer ready... Have You Validated Your Code? John Horner(+612 / 02) 9333 2110 Senior Developer, ABC Online http://www.abc.net.au/ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] guide to CSS inheritance
Does anyone know of a definitive guide to CSS inheritance, hopefully including which tags inherit properties from other tags eg: p inherits from body Ive only been able to find general explanations like http://www.creativepro.com/story/feature/14776.html http://www.blooberry.com/indexdot/css/topics/inherit.htm looks interesting but it hasnt been updated since October 2003 and so wont include quirks from newer browsers -- Neerav Bhatt http://www.bhatt.id.au Web Development IT consultancy Mobile: +61 (0)403 8000 27 http://www.bhatt.id.au/blog/ - Ramblings Thoughts http://www.bookcrossing.com/mybookshelf/neerav ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] guide to CSS inheritance
Neerav, Does anyone know of a definitive guide to CSS inheritance, hopefully including which tags inherit properties from other tags eg: p inherits from body its an interaction of HTML and CSS. Some properties in CSS are inherited, others are not. See the spec, or westciv's guide as to whether a specific property is inherited. Why are some not inherited? Imagine for a moment that margin was inherited. Say body had a 1em margin. Then all the children of the body would have a 1em margin, all the children of those children, and so on ad infinitum. You can however, specify that a property be inherited in CSS, for any CSS property (if memory series me correctly, but there may be a small number of exceptions to that) As far as I am aware, the children of an element inherit all its inheritable properties. The proviso would be that where a property is restricted to say only block level elements, then its inline children would not inherit such properties. This bit is just unchecked conjecture. HTH, john John Allsopp :: westciv :: http://www.westciv.com/ software, courses, resources for a standards based web :: style master blog :: http://westciv.typepad.com/dog_or_higher/ :: WebEssentials Sept 2004 Sydney Australia :: http://www.we04.com ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] guide to CSS inheritance
Inheritance gets a bit trickier when you start talking about font-sizes, as they inherit the 'computed value'. A detailed explanation here (under font size and inheritance): http://css.maxdesign.com.au/selectutorial/advanced_inheritance.htm More on computed values: http://www.w3.org/TR/REC-CSS2/cascade.html#computed-value There is also a chart here that shows each property and how it is inherited: http://www.w3.org/TR/REC-CSS2/propidx.html Westciv also has a good explanation on inheritance here: http://westciv.com/style_master/academy/css_tutorial/advanced/cascade_inheri tance.html Russ Neerav, Does anyone know of a definitive guide to CSS inheritance, hopefully including which tags inherit properties from other tags eg: p inherits from body its an interaction of HTML and CSS. Some properties in CSS are inherited, others are not. See the spec, or westciv's guide as to whether a specific property is inherited. Why are some not inherited? Imagine for a moment that margin was inherited. Say body had a 1em margin. Then all the children of the body would have a 1em margin, all the children of those children, and so on ad infinitum. You can however, specify that a property be inherited in CSS, for any CSS property (if memory series me correctly, but there may be a small number of exceptions to that) As far as I am aware, the children of an element inherit all its inheritable properties. The proviso would be that where a property is restricted to say only block level elements, then its inline children would not inherit such properties. This bit is just unchecked conjecture. HTH, john ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
