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.
Related
I hope all is well.
So, currently I am using a self-made template from dreamweaver (which includes a header and a footer) and I use this template to create new pages from it.
Many tutorials style the body and/or html tags inside the stylesheet, which would be fine if you were only creating one page, however I have multiple pages attached to one stylesheet.
So, by following any of the tutorials mentioned above It would completely change the layout on my other pages since they are all linked to the same stylesheet, is there any way around this?
I hope this makes some sort of sense,
Thanks in advance, Mark.
Assuming I understood your question correctly, you can link the same style sheet to multiple HTML pages. You'd just have to write your CSS accordingly.
Example:
.PG1-BOX,
.PG2-BOX{
}
Furthermore, keeping all your external CSS in one style sheet is better for maintainability and reduces loading times. If you had multiple style sheets, the user has to request them all and then download them all whereas maintaining just one stylesheet would reduce this process.
I’m building a site as part of my research using Word Press. I’m trying to display samples on the homepage in a neat way, something similar to this one http://www.maitrechoux.com/menu/index.html?categ_id=all .
I have removed all of the home function using remove_action. How can I add the table and then how can I add the pictures inside each cell? Is it only matter of CSS or do I need to add HTML code for this? I recently joined word press community and this is the only thing remained to complete my website. Really appreciate any help!
NO, don't use tables. I think what you actually want is just to display something that looks like table.
You need to code both html and css for that.
You can use any of popular css frameworks to help you out, or you can code it yourself using, flex, floats, or grid...
When you are done then with wp functions you need to render that data in your wp theme.
Your question is to broad and big to be answered via code snippets or examples, sorry.
I recently wanted to change the template of my WordPress website and use React tables.
But this would cause my site to drop in Google rankings, and in terms of SEO, this would not be a good thing.
That's why I decided to use my template pre-built tables and change the files to my liking in the settings section by editing css files.
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 have a problem with getting the CSS framwork 960.gs to work with Meteor. I've put the reset.css in a lib/ folder so it loads first. After that, 960.css and *960_12_col.css* is loaded from the css/ folder. However, when I copy the example (only the things from inside of body-tags) from http://960.gs/demo_24_col.html into my Meteor application, it simply doesn't work. I don't expect colors and other styling to follow but the grid system should be working. I've checked so everything is loaded in the right order but can't find any more way to finding a solution to this.
This might sound sad, but have you tried loading all the css as they do that demo page? Ordering from top down in your html is the way to load css with notions of specificity.
Just a silly mistake. The demo uses the 24 column grid. I've used the 12 column grid file. Once I used the 24 column, everything was solved.
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?)