This is a question about bug tracing. I have a WP site in which I am experiencing a plugin conflict. One of the plugins is applying "display;none" to some elements in a slider. What I am wondering is whether there is a good method for knowing what code is setting that css?
You can find it usually with firefox + firebug, firefox' own inspect element, chromes developer tools etc, when you inspect an element it tells you which .css file is being used.
Alternatively, if you turn off all your plugins and enable them one by one you can tell where the conflict is and check that plugins folder. If you have access to the plugins folder on your server you can see if there is a .css file in there - or open the main .php file as some plugin devs put their css straight into there.
But using a developer tool should give you an idea as to where the css is being generated. Even if it is dynamic, combining developer tools with simple plugin troubleshooting will narrow the information down enough to give you the jist of where it is.
Related
I'm trying to customize a theme for a Magento 2 website (it was purchased), and for the most part I know where most of the .css calls are coming from. However, there is one sub-menu, I cannot find the source css file for the life of me.
Normally I use Chrome's inspection window to identify the css that is generating the colors/details that I'm looking for, and then search the source files for the same .css reference, and then make the modification as needed.
However, as mentioned I'm struggling to find a specific piece of css code, and I'm wondering if there might be a better way to find what I'm looking for?
http://bricss.net/post/33788072565/using-sass-source-maps-in-webkit-inspector - Try this one!
https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3 - this is how you set up your css source mapping by using default developer tools :)
I am building my own template in OpenCart by making a copy of the default one and then making my own.
When I edit the CSS in Chrome code inspector and copy it to my stylesheet. Is it "correct" (from a web standards/web developer view) to leave the old commented code in place or should it be completely removed.
I sometimes find that unticking features in code inspector and then copying over the block of code from the Chrome stylesheet is the quickest and easiest way of doing things.
Or maybe there are better "Live CSS" tools and extensions out there?
When you deploy for production you should remove comments, and also minify your CSS. You can add a minification tool to your build process which would remove the comments and whitespace for you.
The reason is that it makes a smaller file for the end user to download. Smaller file means less bandwidth use and a faster transfer. This is especially important for mobile device users.
It should ideally be removed (and then minified et cetera as mentioned by another answer). Best practice would be to use some version control software such as Git to keep track of what is removed and added and so forth.
So chrome auto updates the changes made to the C:\Users\*\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css. It's great because I can choose my favorite editor and free me from any browser-integrated tools for css manipulation.
But it only works for that specific file. I know it can't be used directly to edit server-side css even when I'm working on a localhost server. But is there any other way I can use this sweet mechanism, perhaps manually telling chrome to look for a specific css file and use that as an alternate Custom.css?
EDIT: Importing doesn't work either i think.. none of these rule seem to have any effect
#import "stylish.1misc.css"; //in the same dir as Custom.css
#import url("stylish.1misc.css");
#import url("http://localhost/.my/stylish.2img.css");
#import url("file:///D:/.localhost/.my/stylish.1misc.css");
related
You can use Chrome Developer Tools to do just that and several other things. Like Also editing and hot swapping Javascript.
There is a plethora of examples you can find by doing a quick search on google or youtube.
Here is an example of hot swapping some CSS on a popular site, making the font-size much larger.
The changes can be saved locally (to the cache folder I suppose) or you can choose to save them somewhere else.
The Changes aren't persistent however, refreshing the page will cause all the changes to be lost, but if you want to make the changes permanent for sites you don't own, you can paste those changes to the Chrome User Stylesheet; or you your own projects you can save your changes locally. For this last case there are plenty of good practices and advice on the links provided above.
This question already has answers here:
How to identify unused CSS definitions from multiple CSS files in a project
(3 answers)
Closed 1 year ago.
I'm doing some development for some pages on our internal network. I want to know if there's an open source tool or FF plugin which can identify unused css within a project.
I've looked at using this, but when I try to install the Add-on Installer says "Not compatible with Firefox 3.6"
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
Please note, this is for an intranet - not a www visible website - so I can't use the online sites which offer such services.
Google Chrome (and therefore probably Safari as well) have the developer tools installed, which come with Audits. When you audit the page, the unused CSS rules is one thing it checks.
Here's what it looks like on this page.
I've been looking for a while, and the best thing I found was this:
http://unused-css.com/
They scan your site and email you the result css.
I am aware you are working on a localsite, however if you find no alternative, you can upload your site somewhere and use this
Alternatively
You could install a previous version of firefox that is compatible with dust-me selectors and run it along side your current installation of firefox.
I have CSS Usage installed in FF. But barely used it once. It searches for un-used CSS on the current page, not the whole project though.
dust-me-selectors Firefox addon is now compatible with Firefox 16...
Is it possible to combine all of your HTML pages together into one single page, for example using:
type *.htm > all-pages.htm
Then you could run Firefox/CSS Usage on this single, 'super' page?
There is a new program at sourceforge called CSS Scanner, it scans for used and unused css classes and stylesheets in html, aspx, php, javascript and jquery code.
It's .net code so you'll need Windows:
http://sourceforge.net/projects/cssscanner/
Chrome addon, which generate stylesheet of css rules effectively used in a page, can be tried for the quick results..here is the link
https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh
It also gives summary about the rules, which are not been used.
And this one involves grunt and related plugins to find unused code
http://addyosmani.com/blog/removing-unused-css/
If you are familiar with node js you can also use "find unused css": https://www.npmjs.com/package/find-unused-css
My project has collected CSS entropy (unused classes) during its course of development.
Now in order to keep the CSS file small, I want to remove all unused CSS references. But doing that manually involves searching for each class in the entire project. That takes time.
Do you know of any way/tool which I can adopt to find out which CSS classes are no longer used in my project, and remove it?
I am programming on ASP.NET. Visual Studio.
In the Chrome Browser, press F12, go to the Audit tab, choose the "Reload page and audit on Load" option, and refresh the page. Chrome will list all the unused CSS rules.
For an online solution, go to unused-css.com.
You might find this Firefox extension useful: http://www.sitepoint.com/dustmeselectors/
I wrote a tool which allows you to find all class and CssClass attributes in your aspx source code.
See my blog entry for info and download.