In the past I used a Firefox extension called Dust Me Selectors, but it appears to have been abandoned and isn't compatible with Firefox Quantum.
I've been searching for a while and I've failed to come up with a current alternative, other than http://unused-css.com which is a paid-for service. I'd rather have a tool I could use myself.
This must be something that every developer wonders at some point, so hopefully someone reading this will be able to point me in the right direction!
Sorry for the late answer, I've found your question when searching for the same thing. Anyway you might be interested by :
https://purifycss.online/.
It removes unused css and you can add multiple urls.
Good luck
PS: I'm editing my answer because I found another website doing the unused CSS removal, maybe it will help someone reading this.
Honest Answer: Remove one by one and see if it breaks the style.
Smart Answer: Use your browser devtool to disable each css property and watch what will happen.
Related
I know there are several questions concerning unused CSS already, e.g.
How can I find unused images and CSS styles in a website?
or
how can i find unused css in ajax app?
As I understand from these questions and the answers given there it is currently not possible to automatically check for unused CSS for a complete webapp. The problem seems to be that it is nearly impossible to get all HTML that could ever be generated, even if you have access to the source code.
Also note that in my case I want to verify that some CSS is not used rather than finding it in the first place.
Still I guess removing unused CSS is a common task. So how is it done in real-life? I actually have to do this for a larger project. My current plan is to remove some CSS, test it manually and then wait for bug reports. I really hope there is a better way.
Edit: I just realized that this question is not really CSS specific. So when I broadened my search I found What is the best way to remove dead code from your application?. The answer given there mainly says it "is only possible with a really extensive set of tests" (which is not an option for me).
There is no exact solution, but a good workaround I found on css wizardry:
Add something like this to your css:
#suspicious_selector {
background-image: url('/assets/img/dead/suspicious_selector.gif');
}
After some time check for requests to that file. If there were no requests, it is mostly safe to remove the selector.
I don't know if there is any easy answer to this, but can anyone give me any idea why my site is totally crapping out in IE8? Is there something relatively easy that I can address to make it not become a complete mess?
Or at least any area to start investigating where similar problems tend to crop up in IE8?
Thanks!
http://firewalkcreative.com/2012/
Start by viewing and fixing validation errors. The most critical errors are often structural ones, like an unclosed tag. While it's good practice to fix non-structural errors (such as the one you mentioned in your other post), browsers are forgiving if you get the basic structure right.
The bigger culprit (but don't neglect fixing validation errors) is that you are using HTML 5 tags which IE8 knows nothing about like section and header. Thus, the CSS styles aren't applied to those tags. Modernizr will easily fix this.
I noticed it was using html5, then got a timeout upon refresh. Without being able to access the site I can't tell you exactly, but html5 and ie8 are going to cause problems (most of the time) unless you use a workaround like a .js plugin.
I frequently use Modernizr
Are CSS reset pages (like this one) still necessary in today's age? I assume the answer is yes but looking to see if I get surprised.
I've read thoroughly the HTML5 BoilerPlate from Paul Irish but don't see myself adopting a standard that isn't necessarily standard. [Rhetorical] Isn't this at least some cause of what got us into this mess if you put aside the IE bashing?
yes, the same reasons they were created still exist: several browsers have several different implementations of CSS, and this is one way to take care of them.
Necessary? No.
Some developers like to use them, some don't, but they are definitely not necessary.
Necessary? No. I actually think it never has been necessary. But a CSS reset will help you to make your project look the same in every browser and might save you a lot of time of browser-testing and debugging.
I'm using my own reset file, customized to my needs:
http://www.htmltweaks.com/Reset_Browser-Specific_CSS_Styles
only if you want to have an easier time getting your site to look the same in all browsers.
If that is not a requirement, or if you don't mind having a hard time getting IE to follow suit then by all means. A lot of developers every day are making sites without css-resets.
They are no less necessary than they ever were. IE6 still has a significant market share.
Are there any utilities that will crawl a site and determine which css rules are in use and which are not? We have a large site and a huge CSS file (--don't blame me I just got here). And, I think much of it is not being used however I'm afraid to strip stuff out just in case.
The file is confusing and difficult to manage and I think if we can trim it down by getting rid of the unused rules we will have a good starting point to go through and try to make it better.
Try the Dust-Me Selectors Firefox extension by SitePoint. It finds CSS selectors whose rules are never applied to your pages so you can remove them from your stylesheets.
https://addons.mozilla.org/en-US/firefox/addon/10704/?src=collection&collection_id=23d14a2d-b396-c08f-e9ba-b4d34691d5a9
It's an addon in Firebug.
I had the same problem a while ago (5k lines in a CSS) and found this Firefox Plugin which worked very well for me.
The Google Page Speed plugin for Firefox's Firebug addon is also a great tool that will highlight the unused CSS selectors as well as inform you which ones are poor performers.
As always though, you need to be aware that the CSS selector may not be used on "this" page but may very likely be used on another page so be careful when pruning them to ensure they are truly unnecessary.
You can use a service like Unused-CSS
This web app explores the pages of your site and builds clean CSS files
I have created a modified version of the suckerfish navigation for a personal project. It looks and performs exactly as I want it to. However, it completely degrades in IE. I spent all day yesterday trying to find a solution with no luck. So I thought I would ask some sharper minds than my own. I am open to just about anything right now. As it stands the page is valid HTML and CSS.
Thanks in advance.
The Navigation can be found here:
http://rachalconsulting.com/assets/samples/
The style sheet is here:
http://rachalconsulting.com/assets/samples/style.css
I had this very same problem, and the solution turned out to be to use the csshover.htc file.