My OperaThis topic has been closed. No new entries allowed.
Reason: You can now post comments on articles on Dev Opera
You need to be logged in to post in the forums. If you do not have an account, please sign up first.
28: Inheritance and Cascade
Inheritance and cascade are two of the most important concepts in CSS. The former relates to how child elements inherit styles form their parents, and the latter defines how CSS rules are applied to a document, and how conflicting rules do or don't overwrite one another. In this article, Tommy Olsson explores these concepts in detail.( Read the article )
Tommy Olsson
I very much like the explanation of the cascade.
You have successfully simplified the official explanation by omitting "1. Find all declarations" and reducing the cumbersome "2. Sort according to importance (normal or important) and origin (author, user, or user agent)" to the simple distinction between normal and important declarations.
However, after having read this article (and many others) I still have one question:
How exactly do inheritance and cascade work together?
My theory is as follows:
First of all the browser collects all relevant declarations "to the element and property in question". There are three possible outcomes to this:
1. No declaration
If no declaration is found, the browser checks for an inherited value. If no value is inherited he uses the "initial value" from "Full property table" in the CSS spec.
2. One declaration
If one declaration is found the value is simply being used.
3. Multiple declarations
If more than declaration has been found, they are sorted by Importance, Specificity and Source order until one value wins.
If a value is found, the browser then checks if the keyword "inherit" forces inheritance.
Does this assumed sequence of events make sense?
Thanx
Peter
You have successfully simplified the official explanation by omitting "1. Find all declarations" and reducing the cumbersome "2. Sort according to importance (normal or important) and origin (author, user, or user agent)" to the simple distinction between normal and important declarations.
However, after having read this article (and many others) I still have one question:
How exactly do inheritance and cascade work together?
My theory is as follows:
First of all the browser collects all relevant declarations "to the element and property in question". There are three possible outcomes to this:
1. No declaration
If no declaration is found, the browser checks for an inherited value. If no value is inherited he uses the "initial value" from "Full property table" in the CSS spec.
2. One declaration
If one declaration is found the value is simply being used.
3. Multiple declarations
If more than declaration has been found, they are sorted by Importance, Specificity and Source order until one value wins.
If a value is found, the browser then checks if the keyword "inherit" forces inheritance.
Does this assumed sequence of events make sense?
Thanx
Peter
Yes, your understanding is correct.
The specification can be found here: http://dev.w3.org/csswg/css3-cascade/
The specification can be found here: http://dev.w3.org/csswg/css3-cascade/
The order of importance in the article is mixed up. The article lists the order as follows:
1. User agent stylesheet declarations
2. Declarations in author style sheets
3. Declarations in user style sheets
4. Important declarations in author style sheets
5. Important declaration in user style sheets
However, 2 and 3 are mixed up and should be switched: http://www.w3.org/TR/CSS2/cascade.html#cascading-order
This is the right order:
1. User agent stylesheet declarations
2. Declarations in the user style sheet
3. Declarations in the author style sheet
4. Important declarations in the author style sheet
5. Important declarations in the user style sheet
Unless the order in this article is in regards to how Opera handles importance vs. how the W3C recommends importance?
1. User agent stylesheet declarations
2. Declarations in author style sheets
3. Declarations in user style sheets
4. Important declarations in author style sheets
5. Important declaration in user style sheets
However, 2 and 3 are mixed up and should be switched: http://www.w3.org/TR/CSS2/cascade.html#cascading-order
This is the right order:
1. User agent stylesheet declarations
2. Declarations in the user style sheet
3. Declarations in the author style sheet
4. Important declarations in the author style sheet
5. Important declarations in the user style sheet
Unless the order in this article is in regards to how Opera handles importance vs. how the W3C recommends importance?
