cssess's Introduction

CSSess

CSSess is a JS tool that helps find extra CSS rules on your site. It is designed to be used as a bookmarklet.

The name CSSess comes from the word secess and is pronounced the same way. secess means withdraw or retreat.

It was inspired by Helium (https://github.com/geuis/helium-css/). CSSess has many improvements over Helium:

Helium depends on querySelectorAll, restricting use to the latest browsers. CSSess uses jQuery as a selector engine.
Helium requires that you add URLs to check manually. CSSess will spider all same domain links on the current page.
Helium was designed to be included within the page. CSSess is designed to be used as a bookmarklet.

To install as a bookmarklet use the following in a bookmark URL:

javascript:(function(d,t){var j=d.createElement(t),s=d.getElementsByTagName(t)[0]||d.getElementsByTagName("link")[0];j.src='http://driverdan.github.com/cssess/cssess-min.js';s.parentNode.insertBefore(j,s);})(document,"script");

To use the un-minified version replace cssess-min.js with cssess.js.

How It Works

Each URL is loaded into a hidden iframe. Once the iframe has finished loading all of the stylesheets and inline styles are checked against the DOM to find unused styles.

Notes

CSSess will not work cross-domain due to browser security restrictions.
Contributions are welcome. Feel free to fork on github and submit a pull request.

Recommend Projects