Get the "calculated" CSS of the entire web page
We have several sites, each with links to approximately 3-5 CSS files. Some of the CSS files are shared by multiple websites, some of them are specific to one page only.
We need to rebuild the CSS structure in fewer files. Our goal is to do this in such a way that effective CSS rules remain consistent across all web pages. In other words, the web pages should look the same after the CSS merge.
However, we don't want to check all margins and sizes on all these web pages in all browsers.
Is there a way to check if effective CSS rules have changed while merging CSS files?
I am looking for a tool that would generate efficient CSS rules for every HTML element on a website. This will be the same logic as Google Chrome in dev tools:
If there was an automatic way to create these "computed CSS rules" for every HTML element on the page, we could generate the files before.css
and after.css
then compare them. Any change to the current rules will be reflected in these files. Of course, these generated files will be huge.
Any hints?
source to share
This code will print the computed CSS of each 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 default style) that you have to filter out.
source to share