How Do I Identify the CSS or JS Conflicts on a Webpage? Developer Tools?

[bernard]

A css/javascript issue.

I have a conflict with css or javascript. I have a wordpress theme with a shortcode that does numbered headings with a circle. Then I install Table of Contents Plus plugin and it breaks these numbered headings. The circle with a number stays in place, but the header now moves straight down vertically, not horizontally.

I can't figure out what goes on, no css overlap as far as I can tell, could it be javascript? How would I go about debugging this? I was thinking just going on Fiverr to get someone to fix it, but would like to learn how to do it.

 

[Ryuzaki]

You'd want to use your browser's developer tools to view the CSS being applied to the elements. For instance, I'd turn on the ToC plugin and let my header be vertically oriented. Then I'd open the developer console and see exactly the CSS being applied to that element and look for the piece that's making it go vertical. When you find it, you can see under which CSS rule it's being applied and determine if that's coming from the ToC plugin or not.

Here's a visual example, where the CSS rules are on the left, with the top ones being the ones with the most priority and then descending down to more general rules:

The fix would be to either load a 2nd CSS file last in the header after the wp_head() hook, so that the CSS fix overrides the plugin's CSS file. Or you could inline the CSS fix in your header itself.

 

[bernard]

Yeah, I tried that, but I couldn't figure it out, all very confusing to be honest with Wordpress themes, so much css everywhere. I ended up making a fix where I made new circles in css, div/span/h2, which I suppose I could just make into a shortcode myself. Looked better in the end. Still annoys me I can't figure out this stuff. Can't spend an hour here an hour there on minute things like this.

 

[turbin3]

With so many WP themes and plugins, it's pretty typical for CSS to be setup to overwrite lots of things. What I mean by that is, you'll have a lot of default styles, and things will usually be setup to load the CSS files in a certain order. So your custom CSS loads last and....hopefully...overwrites default stuff.

This is why it's so easy to break styles by inadvertently tweaking things to the point certain files load out of order. That or various performance plugins that concatenate resource files.

I normally start with the browser developer tools, like Ryuzaki said. What I also like to do is pick an element I'm having problems with, click that element in the HTML. Then I'll pick one of the relevant classes or ID's in the CSS window, pick one of its styles, and I'll "!important" it at the end. When in doubt, !important all the things. Usually throwing a few of those on a few elements (in the browser purely for debugging) will find the culprit pretty quick.

Where possible, I wouldn't actually use !important in your production CSS, as it can cause its own issues. It might just be a matter of tweaking your CSS with more specific class / ID paths. Another option is actually adding new classes / IDs into the HTML element (on top of the existing like class="original new") in your plugin or theme template.

@ragnar, on the Python question, not sure if this would work for what you were asking about. Have you ever used Jupyter (ipython) notebooks? That's a pretty quick and easy way to get you something more GUI-oriented, and working in the browser. That plus something like the Matplotlib library could probably get you up and running pretty quickly with some decent visuals.

 

[Future State]

Another option is actually adding new classes / IDs into the HTML element (on top of the existing like class="original new") in your plugin or theme template.

I wouldn't recommend this unless you've designed your own theme or plugin, or have set up a child theme. If you edit the templates directly and then upgrade your theme or plugin, your changes will be overwritten each time. And you definitely want to keep your plugins up to date.

To get around the problem of tools that combine and minify and screw up the order of CSS loading, you should either inline the changes in the header or define the loading of an extra CSS file (like fix.css) at the very end of the header, after wp_head, which is what plugins use to spit out extra files or changes they made.

It's not elegant and creates either inline CSS (not desirable) or an extra HTTP request (not desirable) but that's the small price you pay when you rely on themes and plugins you didn't make.

 

[turbin3]

Sometimes I forget to be specific. To clarify, I always assume child theme and was speaking from that standpoint, and I shouldn't have mentioned plugins. Obviously doesn't quite apply to plugins.