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 Search this Thread
Search this Thread:

Advanced Search

Similar help and support threads
Thread Forum
what do software developers benefit ?
we know many of programs or softwares , like Messenger , Explorer , Yahoo , Whatsup , Photoshop , Realplayer , antiviruses ... etc the list goes on . as users we download them freely and use .. leave aside the paid softwares , there the matter is clear that the money you pay to get the software...
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
An Early Look At IE9 for Developers
Windows 7 Training Kit For Developers
I'm not seeing a forum on here for developers, so I thought I'd post this here for the dev geeks in the audience. You'll find it here - Download details: Windows 7 Training Kit For Developers
General Discussion
Guidelines for add-on developers
The Windows 7 Blog for Developers Published 23 October 08 09:58 AM | yochayk Welcome to the first post of a new Windows 7 blog. This blog will mainly focus on the development aspects of Windows 7 by providing valuable content for 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 08:59.

Twitter Facebook Google+

Windows 7 Forums

Seven Forums Android App Seven Forums IOS App