Announcing cssess – The Bookmarklet That Finds Unused CSS Selectors
I’m happy to announce the release of cssess (pronounced secess, like secession), a bookmarklet that helps you find unused CSS selectors on any site.
Around mid Jan 2010 Charles Lawrence announced Helium. Helium is a similar JS tool designed to help find unused CSS selectors. It was a great idea but had a number of significant flaws.
- It used querySelectorAll, meaning it wouldn’t work in IE 6 or 7.
- It was designed to be included in the page itself and used on development sites precluding its use on live sites.
- While it would spider other pages to test selectors, you had to add the URLs manually.
Shortly after I decided to create my own project based on Helium that would solve these issues and cssess was born. I replaced querySelectorAll with jQuery, designed it for use as a bookmarklet, and had it spider links on the current page. Unfortunately it fell to the wayside and was never developed far enough for public release, until now.
Using cssess
Using cssess is easy.
- Drag the following link to your bookmarks: cssess
- Navigate to the page you want to check and invoke the bookmarklet.
- cssess will present you with a list of URLs linked to by the current page. Select the ones you want to include in the test.
- Click run.
After running, cssess will present you with a list of unused selectors for each page.
Known Issues
I consider cssess to be at a beta level. It’s usable but has issues.
- It doesn’t combine unused selectors across pages correctly.
- Its stylesheet is minimal, meaning it could look funny due to styles already included on the site.
- It lists some URLs multiple times.
- Probably some other stuff I’m not thinking of right now.
There are also some features I want to add, including the ability to enter additional URLs manually and checking for a sitemap.
Feel free to fork cssess on github, fix bugs and add features, and submit a pull request. If you find additional issues or have feature requests please add them to the github issue tracker.
Comments are closed.
42 Comments
It does not work on URLs starting with file: and localhost
Thanks. I’ve added it to the list of issues on github.
Sounds good. How does it compare to the Dust Me Selectors add-on for Firefox, other than being cross-platform? Haven’t tried that add-on in awhile; don’t know if it’s been updated.
Dust-Me Selectors hasn’t been updated in over a year. I thought they had dropped support for it entirely but it should, apparently, work with FF 3.6. I haven’t used it in a long time so I’ll have to try it out again.
Minor quibble: you might want to change the text on the “Drag this link to your bookmarks” link in the blog post to something like “csses” so the title of the bookmarklet once dragged isn’t “Drag this link to your bookmarks.”
Good catch, link updated.
Great little widget/bookmarklet – keep it up! Slight comment – it appears to want to create a framed page and put the original site into frame – the main site I test has code to prevent being stuck in a subframe (due to some unsavoury practices by one indexing site in particular) – so I can’t use this!
Damned shame… maybe another way around it could be found?
Opening each page in an br is necessary to make sure the page is fully rendered, including any JS. Originally I thought about pulling the pages down using ajax but that wouldn’t account for any dynamic changes.
I suppose an option would be to use a popup window but that’s more intrusive for most users. A hidden br is much nicer, except in the situation you described.
Good idea but it will always remain dangerous because it cannot predict javascript interactions. If you add classes or elements/parts of code using JS, which is very likely to happen in modern websites, it will list “unused” selectors you could remove by mistake.
It’s a tool designed to help developers, not replace them. You’d need to review what it finds and decide what can be removed and what can’t.
Made some additions to createWin for select all/none and validating at least one selection is made prior to the run, hope you can use them!
cssess.v.createWin = function() {
// Remove window if it already exists
if (cssess.win) {
cssess.win.remove();
}
cssess.$(“#cssess”).remove();
cssess.win = cssess.$(‘cssessselect all/noneXRun’);
// Add event to run button to run tests
cssess.$(“button.run”, cssess.win).click(function() {
// Clear any previously detected styles
if (cssess.$(‘.links’).find(‘:checkbox:checked’).length > 0) {
cssess.$(“ul.styles”, cssess.win).html(“”);
// Load the checked links and spyder them.
cssess.loadLinks();
cssess.spider();
} else {
alert(‘You must select at least one page’);
}
});
// select all
cssess.$(“a.all”, cssess.win).click(function() {
cssess.$(‘.links’).find(‘:checkbox’).attr(‘checked’, ‘checked’);
return false;
});
// select none
cssess.$(“a.none”, cssess.win).click(function() {
cssess.$(‘.links’).find(‘:checkbox’).attr(‘checked’, ”);
return false;
});
// Close button removes the win div
cssess.$(“a.close”, cssess.win).click(function() {
cssess.win.remove();
return false;
});
cssess.win.appendTo(“body”);
};
Can you make it automatically uncheck mailto links?
Does it work with local files like “Web developer Toolbar” has an option to validate local css. This tool would be great for testing websites that are in development soon to be published.
It doesn’t validate CSS. It finds unused selectors. You’d want to run validation first, fix any issues, then use cssess.
Yeah I know It doesn’t validate, I must have explained myself wrong, I was wandering if this checks unused selectors on local files instead of only files already on hosting servers.
MSIE 8 error “console is undefined” ?
Nice work anyway.
I had it set to do a console.log when there was a cross-domain security exception. I’ll fix it in the next update.
unselect all button please ?
Would be nice to display all unused selectors which aren’t used on any site.
The browser security model doesn’t allow cross-domain requests. It’s unable to request CSS from another domain. This is obviously a problem if someone is using a CDN or wants to check multiple domains. One possibility would be to run it server-side using something like NodeJS. I’ll add that as something to look into in the future.
doesnt work on any page I try..?
Sorry Ryan, the URL to the script changed and I hadn’t updated this post. It’s updated now, try again.
Is there a version usable with google chrome as plugin?
It’s just a bookmarklet but a plugin would be cool. Maybe someday when I have the time.
Trackbacks and Pingbacks
Comments are closed.