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?)
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.
Is there any way to find which CSS tags and elements are related to the specific HTML page section?
For example: We have a large CSS file but few of elements are related to content in HTML classes, is there any way to find related elements and remove other parts?
How large is the CSS file? I can't think of anything else than splitting it to multiple libraries and then including a library in your page if it's required.
For example, if the page has a slider then it will have a CSS link to slider.css this might not be ideal when you send too many HTTP requests so you might embed the library as internal <style> CSS. I've seen many WordPress theme developers use that technique.
This shouldn't be a problem since minification and Gzipping reduce the filesize drastically and once the file is cached your users wouldn't need to wait extra time to load your next pages.
For Chrome
In the Chrome DevTools, there is an Audits tab that will allow you to run a Web Page Performance audit and see a list of unused CSS rules :
For Firefox
You could install one of these add-ons :
CSS Usage for Firebug
Dust-Me Selectors
CSS Usage
Dust-Me Selectors
I don't think there is. It would be really hard to do this, too, because your system could build up a page by including 500 different files of different languages. How could such a program know which of your files is included where and under which conditions?
The thing that I think comes closest would be using your DevTools to see which styles apply to which element and maybe by hand or in an automated way create a list of which CSS rules apply to which end-page (for example which URL endpoint) element. But! Even then it would be hard, because it would be really hard for a program to find out which styles are dynamically added to elements (for example Javascript could add/remove classes when a user performs a certain action).
I've just found the CSSCoverage tool in the firefox dev. edition.
It shows the unused CSS classes from a page / set of pages that can supposedly be safely removed to slim down your stylesheets.
My question is, does anyone know a way to save the stylesheets from the console without the unused rules. It visibly displays them so surely there's a way? When I click save, it saves the original (full) stylesheet.
There is way to copy the classes which you add run time through inspect element in browser by clicking on one of newly added class, then it shows you only new one.
But I think there is no way to select only those classes which are useful to grab all other classes
Thanks
A Website im working on for several years now gets bigger and bigger.. CSS-Files are not very clear right now..
How am i able to find out which code of my huge css-file is not used on my homepage? So that im able to delete this?
I recently found this:
Removing unused CSS from website code
The Problem is, my page got of course multiple pages. I should know which css code is not used in all of the pages.
Can you check the method given here on using uncss. This parses your site and produces a css with only the used styles.
If you are familiar with node js you can also use "find unused css": https://www.npmjs.com/package/find-unused-css
This scans your html files and find out the unused css selectors. Currently it only supports class and id selectors.
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