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
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 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?)
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
When viewing a webpage, I would like to copy a selection of text with its html formatting in one piece.
Meaning if some text is in bold and blue, I want the tool to create a style or class in the html which makes the text blue. Everything is contained in the produced html.
I have downloaded a similar plugin but the classes definitions are still external which means I have to get them separately. A non technical user would be at a loss here. I want the user to be able to copy and paste to a new webpage and that page just just works properly because the html copied contains everything.
This doesn't have to be a FF plugin. It could be IE or a Windows app.
I think you may be able to accomplish this by using the Firebug for Firefox extension. I often use it to export the content of a web page for use rebuilding a similar object. Is this still too technical? Firebug is a powerful, viable option that it is worth learning, I think.
I think the copy operation does this already. If I copy this page and paste it in a WYSIWYG editor such as TinyMCE (included in Wordpress), I get the formatting. For example the text of this page is (as pasted):
<h2>Firefox plugin to copy text with its formatting Intelligently?</h2>
The HTML markup is copied, but not external CSS. I suspect creating a piece of CSS that would apply to your standalone snippet of code the style it had within the DOM hierarchy would be horribly difficult if at all possible.
Try SnappySnippet, it's a Chrome extension that allows to copy html and all the related css style of an element. It integrates itself into the Chrome console. I hope this helps
This seems to be what you're looking for:
Web Design Pirate:
https://addons.mozilla.org/en-CA/firefox/addon/web-design-pirate-for-devtools/
It creates a new "Pirate" tab in the developer tools that lets you grab the elements you want, including all associated CSS.