Windows 7 Forums
Welcome to Windows 7 Forums. Our forum is dedicated to helping you find support and solutions for any problems regarding your Windows 7 PC be it Dell, HP, Acer, Asus or a custom build. We also provide an extensive Windows 7 tutorial section that covers a wide range of tips and tricks.

Windows 7: CSS Crunch: new IE Extension for developers

04 Mar 2010   #1
SGT Oddball

CSS Crunch: new IE Extension for developers

There are many tools in the market that allow you to customize your pages' cascading style sheets (CSS), but there are actually a very few that do the opposite—scan for all the CSS rules in the document and remove those that are not used. Cleaning out the CSS will not only reduce the bandwidth impact, but will also improve the performance of the browser (minimizing the time spent by the CSS engine to parse the style sheets).

In this post, I will describe how to build that tool using a bookmarklet and a new standard function introduced in Internet Explorer 8: document.querySelectorAll().

Let’s start with the basics: a Web page can include many cascading style sheets, each of which is composed of one or more selectors. For instance, #elementId { }, .className { }, and body{ } are each examples of selectors. Using the function querySelectorAll(), you can programmatically inspect the DOM tree and count the number of times each selector is actually used.

For instance, the following code snippet counts the number of times the CSS class Foo is used in the document:

var selectorCount = document.querySelectorAll(“.Foo”).length;

Now that we have this information, we need a way to run this script inside the document. For the purpose of this article, I didn’t want to change our server-side code.

I decided to create a bookmarklet, which is a special link that can interact dynamically with the currently loaded page. The syntax of the bookmarklet is fairly straightforward:

CSS Crunch

As you can see, at runtime this injects a remote script file that runs the analysis and displays the result.

If you scroll to the bottom of the list of CSS rules, you’ll see an option to remove temporarily unused selectors. This allow you to test if the page still displays and behaves the same way, as shown in the picture below.

I’d like to stress the fact that the goal is not to reach 100% usage on any page; there are scenarios in fact where the same style sheet could possibly be used by multiple pages and it makes sense to pre-fetch some rule, or where the page compression balance well having additional styles to maintain. Instead you should use this tool to identify possible areas for improvement.

That’s it! You can try it here:

  1. Right click Run CSSCrunch and select “Add to Favorites”
  2. Accept the security warning (by default, any bookmarklet is considered unsecure due to its nature)
  3. Choose a location (for example, Favorites Bar)
  4. Installed! You can now browse to this test page (or any other site) and click "CSS Crunch" in the Favorites Bar
This is just a starting point; if you are interested in doing more, you can find the source code here. I encourage you to look at the underlying code and customize it to suit your needs. For example, you might want to add support for multiple-pages analysis, or integration with server-side tools such as Visual Studio or IIS, or a compression capability such as Microsoft Ajax Minifier.

Ok, time to go! I'm checking the CSS on this blog now… :)

Have fun!

Giorgio Sardo
Web Technical Evangelist
Microsoft Corporation


My System SpecsSystem Spec

 CSS Crunch: new IE Extension for developers

Thread Tools

Similar help and support threads
Thread Forum
Chrome Extension Idea - Extension Bar
I got a idea for a Chrome extension, but no where to request it. When you install extensions in Chrome it places all the extensions to the right side of the address bar. My idea is to have a extension bar below the bookmark bar that automatically hides it's self when the mouse isn't hovering...
Browsers & Mail
Where is the best place to yell at the MSN developers?
I can't find a better forum, so I have a simple question.... I keep getting messages from people that are not on my contact list and show as "offline". And thanks to the jackasses that develop MSN, there is no SIMPLE & LOGICAL way to block them. Am I missing something? Where is my nice and...
What do game developers use to run their games?
It seems like even a high performance PC, with the latest nVidia 580GTX, doesn't really run the latest games that well, when the game is set to maximum settings, with all the anti-aliasing and graphics features on. Crysis 2 has the most powerful graphics? So what hardware do game developers of...
Graphic Cards
An Early Look At IE9 for Developers
Guidelines for add-on developers

Our Sites

Site Links

About Us

Find Us

Windows 7 Forums is an independent web site and has not been authorized, sponsored, or otherwise approved by Microsoft Corporation. "Windows 7" and related materials are trademarks of Microsoft Corp.

© Designer Media Ltd

All times are GMT -5. The time now is 02:11.
Twitter Facebook Google+ Seven Forums iOS App Seven Forums Android App