Bug 67868 – Optimize CSS rule handling for body and html for efficient CSS

• Status: RESOLVED
• Resolution: WONTFIX
• Component: CSS

[Steven Roussey]

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.

I have also made a bug report for Mozilla[4].

[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
[4] https://bugzilla.mozilla.org/show_bug.cgi?id=678568

[Paul Irish]

On the mozilla bug, David Baron explained the fast path for this one: https://bugzilla.mozilla.org/show_bug.cgi?id=678568#c2

Modernizr is used in the HTML5 Boilerplate and ships with Visual Studio, so documentElement classes are certainly a lot more popular than in the past. A fastpath here would be excellent.

[Simon Fraser (smfr)]

We already optimize descendant selectors. I'm not sure there's more.

[Antti Koivisto]

Sounds like Gecko should optimize descendant selectors properly. We already do, there is no particular need for body specific hacks like this.
 
Almost nothing in that "Efficient CSS" guide is relevant to current WebKit.