CODEWITHSUNDEEP
csscode-generation
Jonas Sourlier
Jonas Sourlier

Reputation: 14435

Get 'calculated' CSS of whole web page

We have some websites which each have references to about 3-5 CSS files. Some of the CSS files are shared by several websites, some of them are specific to one page.

We need to re-organize the CSS structure into fewer files. Our goal is to do that in a way so that the effective CSS rules stay the same on all web pages. In other words, the web pages should look the same after the CSS merge.

However, we don't want to check each and every margins and sizes on all of those web pages in all browsers.

Is there a way to check if the effective CSS rules have changed during the CSS file merge?

I'm looking for a tool that would generate the effective CSS rules for each HTML element on the web site. This would be the same logic that Google Chrome uses in the dev tools:

enter image description here

If there was an automatic way to generate these "computed CSS rules" for each HTML element on the page, we could generate the before.css and after.css files and then compare them. Any change in the effective rules would show up in those files. Of course, those generated files would be huge.

Any hints?

Upvotes: 3

Views: 330

Answers (1)

quw
quw

Reputation: 2854

This code will print the computed CSS of every element on the page to the console

var elms = document.getElementsByTagName("*");

for (var i = 0; i < elms.length; i++) {
     console.log(elms[i].tagName, window.getComputedStyle(elms[i]).cssText)
}

Be warned that there is a lot of useless CSS (every single default style) that you would have to filter out.

JSFiddle Demo

Upvotes: 3

Related Questions