Mozilla Style System

The Style System is the module of Mozilla's code responsible for the loading and parsing of CSS style sheets, and the computation of computed values for all CSS properties. The handling of those computed values is the responsibility of other parts of the code.

Architecture

The style system is split in half rather neatly. In one half (the backend) are the sources of specified style data, and in the other half (the frontend) is the code that turns the specified values into computed values. The barrier between these two halves consists of three abstract interfaces, plus some smaller structures associated with some methods on each:

nsIStyleSheet: nsIStyleSheet represents what one would think of as a style sheet: the in-memory representation of a CSS file or other source of style data. Some style sheets are managed by the document; some apply to all documents. The style system actually has relatively little to do with style sheets; it instead deals with style rule processors.

nsIStyleRuleProcessor: a style rule processor represents an origin within the CSS cascade. Thus there is a single style rule processor for all user-agent CSS style sheets, a single style rule processor for all user CSS style sheets, and a single style rule processor for all author CSS style sheets. There is also a style rule processor for style attributes (which contain CSS declarations) and one for presentational attributes in HTML. The methods on nsIStyleRuleProcessor allow the front end to ask the back ends for the style data that applies to a given element or pseudo-element, in the form of style rules.

nsIStyleRule: an nsIStyleRule is an immutable set of CSS property-value pairs. For CSS style sheets, they correspond to CSS's concept of rules. However, they also exist for the other types of rule processors. When script dynamically changes the data represented by a CSS style rule, we create a new nsIStyleRule object; keeping the old one around briefly helps to determine what changed and how we need to handle that change.

Computed style (front end)

The interface that the front end exposes to the rest of Mozilla consists of a single nsStyleSet object and many nsStyleContext objects, each of which holds the computed style for an element, pseudo-element, or text node.

The style set provides the API managing the rule processors and for creating style contexts. The style contexts then provide the API for computed style data by allowing retrieval of a set of style structs, each of which contains the computed values of a set of CSS properties.

Style structs

The style structs are a set of structs, each of which holds computed values a group of properties. They all have names beginning with nsStyle*, and they should not be confused with the CSS structs (nsCSS*), which hold specified values.

The grouping of properties into structs follows two rules:

any properties in the same style struct must also be in the same CSS struct
all of the properties in a style struct must be inherited or they must all be non-inherited (see inheritance for an explanation of the difference)

The first of these rules is no longer important (in fact, the separation of the specified values into nsCSS* structs is no longer important). However, the second of these rules is the key to many of the performance and memory-use optimizations in the style system.

Most callers who interact with the style system do so using the style structs. The style context has a getter for each struct, and nsIFrame, which represents the concept of a CSS box (or rendering object), also has getters that forward to the frame's style context. Thus, typical calling code looks like this:

 if (aFrame->GetStyleDisplay()->mOpacity < 1.0f)
   return PR_TRUE;

or like this:

 const nsStylePosition *stylePos = aFrame->GetStylePosition();
 if (stylePos->mWidth.GetUnit() == eStyleUnit_Coord) {
   nscoord w = stylePos->mWidth.GetCoordValue();
   ...
 } else if (stylePos->mWidth.GetUnit() == eStyleUnit_Percent) {
   ...

Architecture

Computed style (front end)

Style structs

Rule tree

Style data computation

CSS style sheet backend

Loading

Parsing

Data structures

Cascading

HTML Mapped Attribute backend

CSS style attribute backend

Handling of dynamic changes

See Also

Document Tags and Contributors