Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
30 lines (18 sloc) 1.39 KB

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.