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).
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.
When I design a page I will create a CSS file so all of my selectors will store in this file, for first page, inner pages and all another pages which I have in my website.
But in this mode, when I trying to check my site in GTMetrics.com or webpagetest.org or another websites, they inform me I have many selectors in my css file which I didn't use in page so they asked me to optimize my css file ! but I use that selectors in another pages.
Now my question is, what is the best way to store css selectors ? should I have a separate css file for each page and load with link in each page or should I have separate css file and load with #import in css file or store all selectors in one file (like now) ?
First of all, those sites are just tools to help you optimizing your site. They don't know everything, that's why they say you use a lot of unused selector.
I don't know how much the styles are changed and on what pages. But if your styles are somewhat equal with minor differences, you should keep those in one file.
If, for instance, the homepage is completely different from the other pages, or if some pages have big differences, you should use one global stylesheet and multiple page specific stylesheets.
Read more about this topic in this great article by CSS guru Chris Coyier: "One, Two or Three"
one css file is the best way
if you make separate file for every page
on every page a unique file loads
so the time increases and performance decrease
one css file caches itself and dont load everytime
so you done right
ignore the warnings
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?)
That's it. I've been hearing about CSS files a lot.
What are the main advantages of having a CSS file instead of writing the styles in the HTML code directly?
Assuming your site has 10 pages
You don't have to repeat yourself 10 times.
If your style changes, you don't have to do the change in 10 files
Your HTML files are smaller
Your CSS files can be cached
You can reuse the style sheet on other sites you make
I'd add to JohnP's excellent answer by saying:
you can separate out your caching
on your page (where content may
change regularly) to your CSS (where
it may not) - sites are more likely
to cache CSS for longer than they
would the content of a page,
separating it out will allow you to
do this
you can deliver your CSS
from a content delivery network,
potentially improving site
performance
you can 'minify' your
CSS as part of a build process so
that what you're developing on is
readable/verbose, and what you
deliver is small/terse, again as a
means of improving performance
once the content and presentation
are separated out, your users will
benefit from all of the above and
you will get a faster page load.
Please read this artical on Advantage of using external css.
There are a few advantages;
1) You can re-use the CSS in different pages across your site.
2) The download is separate for CSS when it is in a separate file, this is quicker.
3) The separate CSS file will be treated as static content and likely cached locally. Again quicker.
I personally find CSS easier to read and edit when it is in its own file.
Some good answers by JohnP. However, the most important reason for me would be the separation of presentation and content.
Versioning becomes far easier as you have a central point to apply changes.
The loading time of your site advances because you only deliver the stylecode ONCE and not with every html page you deliver.
Furthermore you save up loading time as the css can be cached locally and so the site loads faster after first load, if there was no changes. This can also cause problems, see solution for those problems in point 2.
you can also use different styles for different platforms or different tasks (such as braille or print)
see available types here:
Media types
There are severe cache problems regarding Internet Explorer, you can give version numbers to keep the cached css out of order, if there were changes applied, so there is NO disadvantage of using css files but a HUGE advantage in administering the site.
Example of versioning:
<link rel="stylesheet" href="[path_to_css]/style.css?v=[date]" type="text/css">
So there are only huge advantages and no disadvantages of using css, so it is best practice.
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.