I'd like to compare my CSS files with the classes that I'm actually using in the site, and generate a new CSS file that contains only those classes. The point being to get rid of classes that I'm not using.
I previously used the Dust Me Selectors extension for FireFox to find the used and unused CSS selectors but it doesn't work in FireFox 6 any more.
Are there any alternatives?
When you put your site to GT-Metrix. Than you can see the un-used CSS selectors. Or you can do it with Google pagespeed.
You can try this online tool or use Google Chrome's developer tool(installed by default, no extension needed), which has audits tab to display unused css selectors on current page... but i dont think there is a way to have it done automatically for you...
You can try CSS Usage extension for Firebug. It works lika a charm, but it requires manual work https://addons.mozilla.org/en-US/firefox/addon/css-usage/
This system claim to do that:
http://sourceforge.net/projects/cssmerge/?source=dlp
But I couldn't make it work, though.
So here it goes some manual tools to compare the files. It is not as fast as an automatic solution, but would make it faster than going by visual comparison alone.
http://www.diffchecker.com/
http://www.araxis.com/merge_mac/index.html
http://csscompare.codeplex.com/
Related
I am implementing the Summernote Editor which rely on Bootstrap, but I usse my own custom stylesheet. This gives me 2 problems:
It breaks my design and the Bootstrap file is so long it is difficult to find the exact selectors causing the trouble.
It loads a 120kB file, when maybe just 20-30 is necessary (the part actually needed for the editor to render nice).
Does anyone know a tool (maybe online) to compare the actual used tags, classes etc. in the source code with the attached stylesheet pointing out what is in use?
Could also be helpful after a long developing proces, where you have made a lot of editing and you maybe ended up with a lot of un-used code.
Please right click and select Inspect Element while you are on your webpage on any browser.
You could use purifyCSS, which would require grunt or alike. There's this site https://unused-css.com/, which would require a URL of your site, it then would scan just a single page of that site. There's also this tool: https://sourceforge.net/projects/cssscanner/, which gives you list of used and unused selectors, but you need a machine running Windows to use.
I want to edit a html template to create a simple version for my need. I delete some ; but is there a tool to remove unused classes from CSS or I need to remove the manually?
For example, <div class="something"> is not used in my html; but still I have .something {} in my css file and make my css heavy. Currently, I delete unused classes from CSS one by one manually. I wonder if there is a way to delete any class in CSS which is not referenced in html!
Check out something like http://unused-css.com/. If you pay for it, you get to have it crawl your site and create a clean version for the entire site.
If you want a browser-based solution, try the Firefox plugin CSS Usage. You can open up Firebug, click on the CSS Usage tab, click on "Autoscan", then navigate your website a few times (be sure to hit every page). It will keep track of which classes are used and you can export a "cleaned" version. This requires more manual work and may be subject to broken styles, but if you are careful, it should work fine.
The answer is not really, due to the fact a CSS file can be used across a magnitude of HTML pages.
I'm sure some people might have made a tool that parses all their own specific HTML pages and creates a list of 'unused' css classes, but it'd be likely to be very bespoke to their needs (also if the HTML pages render out different things due to a user's choices, how'd you know that the CSS class is or isn't used?)
Does anyone know of software or a webservice that can read your stylesheet and html/php, and profile your CSS? By that I mean indicating which clauses or rules are never used, and so on.
After doing several serious redesigns on a fairly complex website, I'm sure there are some old skeletons hiding away, making my code clunkier and less readable, doing absolutely nothing, setting rules for divs and spans long since removed.
The 'Dust-Me Selectors' Firefox plugin is quite helpful for finding unused rules, it can test individual pages and spider entire sites.
Well, I've found something interesting. Using the "Audits" tool as part of the Chrome developer tools, you can find out which CSS rulesets are extraneous.
It's quite basic - it doesn't even point to the line number each of these rules are located from, but it is better than nothing. Hope this helps.
Try using firebug, the firefox extension. It will tell you what rules aren't being used and which ones are unnecessary.
I know it's easy to get the CSS that is applied to a single node in HTML, using tools like the Firebug extension for Firefox, etc.
But is there a way to see all the CSS that is in effect on an entire page, or a larger fragment of HTML?
Specifically, we are cleaning up our one extremely large CSS file into smaller modules and would like to find out what CSS is used on a certain page, so we can move all the non-used CSS to another module.
Thank you all! These are the various solutions I've looked at now from your recommendations (collected here for people with the same problem):
Dust-Me Selectors (Firefox Add-on)
This does exactly what I need. Lists used and unused CSS selectors (for the current page, or the entire site, after spidering), and can dump both lists as CSV text. Great.
https://addons.mozilla.org/firefox/addon/5392/
CSS Usage (Firefox Add-on)
https://addons.mozilla.org/firefox/addon/10704/
WARI - Web Application Resource Inspector (Java tool)
Appears to only handle static code, not dynamically generated HTML as is present in most web applications that use ajax – which, unfortunately, makes it useless, at least for me
http://wari.konem.net/
CSS Redundancy Checker (Ruby script, requires Rubygems and Hpricot)
http://code.google.com/p/css-redundancy-checker/
TopStyle (Windows-only application, $79.95 (!!))
http://svanas.dynip.com/topstyle/
These are all cross-platform and free, except for TopStyle.
As far as tools go, you could use the css usage plugin for firebug. It will analyze pages for used css.
Or were you looking for a way to do it more programmaticly?
You can try Dust-Me Selectors, it's add-on for firefox, if you use firebug, as you stated, you may find useful CSS Usage.
Is there a simple way to save an HTML page that has an external stylesheet (1 or more) referenced but force all of the rules to be inserted into the page itself, inline? So basically I want to move all external rules onto the elements that they affect themselves.
For what it's worth, I'm using nearly every major browser (incase the solution is browser-specific), and I'm on Windows (incase it's OS-specific).
I'm assuming you've seen the online tools that are available like this one? This online tool (which I have not tested but looks like it works) gives you the option of providing a url or source code and shows warnings for cross-browser compatibilities with your styles.
I use a tool that does something like that, but it was written for Ruby and TextMate for Mac. It is released by Campaign Monitor as a way of preparing HTML emails. It brings all the rules from the stylesheet and makes them inline styles.
It might give you a good start. I'll keep looking.
TextMate Email Bundle
The piece that does the heavy lifting is the TamTam RubyGem which brings the CSS inline. However, it seems to only support one style element (not link elements). If you could work with those restrictions, you could get it to work on Windows using Ruby and a ruby script file. Not quite drag and drop I'm afraid.
i use chrome extension Save Page WE