Open Bug 678568 Opened 14 years ago Updated 3 years ago

Optimize CSS rule handling for body and html for efficient CSS

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Platform:
x86
macOS
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: sroussey, Unassigned)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:6.0) Gecko/20100101 Firefox/6.0 Build ID: 20110804030150 Steps to reproduce: For quite some time several frameworks, ExtJS for example, have used the html and body tags as a place to add classes so that they can target specific browsers or browser capabilities in css rules. For example a class "x-ie6" will be added in IE6 to the body element. You can see examples in the ext-all.css file[1]. And there are now a bunch of sites using Modernizr (and look at what they do to the html element!)[2]. Taking advantage of these classes on html and body makes it easy to target "fixes" or "features" for certain browsers. Typical would be using CSS3 to style a button with gradients and rounded borders and drop shadows, or in old versions of IE using image spriting instead. Companies that use Sencha's ExtJS, for example, could reap some reward if Sencha changed its CSS to have: body.x-ie6 .buttonClsExample {} instead of .x-ie6 .buttonClsExample And the browser could remove all the body.x-ie6 * rules. According to the Mozilla guide on efficient CSS[3], this would be a real gain. [1] http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css [2] http://www.modernizr.com/ [3] https://developer.mozilla.org/en/Writing_Efficient_CSS
It's nor clear to me what problem you see in the Firefox style system. What is it that you want us to fix?
It's clear enough to me -- basically, to look at the left edge of a selector, see if it's for the body or html element, and if it is, either (a) jump to matching the left edge once we get it out of the rule hash and then proceed with normal matching or (b) do something even stronger so that we won't even get it out of the rule hash.
Right... Firefox can use this information to completely disregard CSS rules that start (on the left) with them. That way when processing the rules (which get processed from the right) they don't have to go all the way up the chain and realize that the rule doesn't apply. It is a short-circuit for the special cases of html and body since there is always one and only one of each. Webmasters can then make special rules for that apply to just those (and in fact, they already do as the Modernizr and ExtJS cases prove as examples). There are two optimizations: 1: Firefox need not process a ton of rules that might not ever target it. For example, often times there might be: body.x-ie6 .x-btn button { ... } and <body class="x-gecko">... And it all these rules will never be used as the x-ie6 class won't be added to the body for any version of Firefox, so it would be great if Firefox would ignore them altogether. Erase the body.x-ie6 * rules. 2: If it is a match (that is the class exists), then add it to the rule set but prune the lefthand (body and/or html) rule(s): body.x-gecko .x-btn button { ... } and <body class="x-gecko">... In this case it is always a match, so why bother checking up to the body (unless the body changes classes, in which case reprocess then)? So this case should then end up with rules in the system like: .x-btn button { ... } Note that body and html are both special cases and might be used together: <html class="x-quirks"><body class="x-ie6">... In which case, both html and body and their combination should be in this short-circuit system. David, is that what you said in a more concise way?
Cross-referencing with WebKit issue: https://bugs.webkit.org/show_bug.cgi?id=67868
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.