Style System
Tech Talk

June 24, 2002

David Baron

dbaron@dbaron.org

Style System

Style sheets & rules

Rule tree

Style context interface

Style sheets & rules

CSS Style Sheets

p {
  color: green;
  font-size: 12em;
}
selector {
  property: value;
  property: value;
}

CSS Style Rules

What do style rules mean?

Example document source

<doc>
  <title>A few quotes</title>
  <para class="emph">
    Franklin said that <quote>"A penny
    saved is a penny earned."</quote>
  </para>
  <para>
    FDR said <quote>"We have nothing to
    fear but <span class="emph">fear
    itself.</span>"</quote>
  </para>
</doc>

Example document tree

doc
titlepara
class="emph"
para
quotequote
span
class="emph"

Example stylesheet

doc {
  display: block;
  text-indent: 1em;
}

title {
  display: block;
  font-size: 3em;
}

para { display: block; }
[class="emph"] { font-style: italic; }

CSS style rule representation

CSS style rule representation

h1, h2 {
    color: green;
    text-align: right;
    text-indent: 0;
}
CSSStyleRuleImplCSSStyleRuleImpl
h1nsCSSDeclarationh2
nsCSSColor
 color: green
nsCSSText
 text-align: right
 text-indent: 0

CSS style rule representation

Other nsIStyleRule implementations

The cascade

The nsIStyleRuleProcessor interface

CSSRuleProcessor

Style contexts

Style context API

The rule tree

The rule tree

Rules:
/* rule 1 */ doc { display: block; text-indent: 1em; }
/* rule 2 */ title { display: block; font-size: 3em; }
/* rule 3 */ para { display: block; }
/* rule 4 */ [class="emph"] { font-style: italic; }
Rule tree:
A: null
B: 1C: 2D: 3E: 4
F: 4
Style context tree:
doc: B
title: Cpara: F
class="emph"
para: D
quote: Aquote: A
span: E
class="emph"

The rule tree and style data

The rule tree and style data

We optimize for the structs for which the rules have no declarations. In this case: Inherited structs act like reset ones in the descendents of any rule node for which the data are fully specified.

Style data cached in style context tree

Style data cached in rule tree

Style data computation

Style data computation

Style data computation

Managing style contexts

Managing style contexts

Dynamic changes to content

Dynamic changes to content

Dynamic changes to content: optimizations

Style attribute changes

Style sheet addition and removal

Style rule changes

The style system

Style sheets & rules

Rule tree

Style context interface