I just came drown from altitude in the Himalayas, so I'm admittedly pretty far behind in my technology reading, email maintenance and blogging. That said, in beginning to catch up I came across this complex and interesting post from David Hyatt on his Surfin' Safari blog. For those of you that have been paying attention, Hyatt is a leading browser developer, having worked on Gecko at AOL, and in his current position largely responsible for the magic in Safari and Web Core.

His post deals with the challenges of rendering CSS:

One of the most interesting problems (to me at least) in browser layout engines is how to implement a style system that can determine the style information for elements on a page efficiently.

Hyatt has created a new, more efficient algorithm for doing this (and a few other related things). For the algorithm to work, it checks ten features of each DOM node. I'm blogging this because it presents a new optimization opportunity for web developers. By being mindful of these 10 items, and not needlessly failing the 10 tests, we'll take advantage of these new rending efficiencies in Safari. These aren't revolutionary steps, but there are situations where they will certainly be the tie-breaker between alternate approaches.

There are a number of conditions that must be met in order for this sharing to be possible:

  1. The elements must be in the same mouse state (e.g., one can't be in :hover while the other isn't)
  2. Neither element should have an id
  3. The tag names should match
  4. The class attributes should match
  5. The set of mapped attributes must be identical
  6. The link states must match
  7. The focus states must match
  8. Neither element should be affected by attribute selectors, where affected is defined as having any selector match that uses an attribute selector in any position within the selector at all
  9. There must be no inline style attribute on the elements
  10. There must be no sibling selectors in use at all. WebCore simply throws a global switch when any sibling selector is encountered and disables style sharing for the entire document when they are present. This includes the + selector and selectors like :first-child and :last-child.

In web development there are often 6 different similar ways to do the same thing. What makes a good web developer is continually choosing the best of nearly-indistinguishable paths. These insider tips from Hyatt give us a more complete understanding of the guts of the browsers, and will help us choose the best methods.

Read about it in his own words here: http://weblogs.mozillazine.org/hyatt/archives/2005_05.html#007507

Filed on June 27, 2005 at 12 AM (Permalink) in these cateories:

Please leave a comment (0) or ping a trackback (0).


TrackBack URL for this entry:

Listed below are links to weblogs that reference Rendering CSS Efficiently - Insider Tips from Safari:


The comments to this entry are closed.