Retrieve the 'computed' CSS for the entire webpage

Question

Retrieve the 'computed' CSS for the entire webpage

We operate multiple websites, each referencing 3-5 CSS files. Some of these files are shared across sites while others are specific to certain pages.

Our aim is to streamline the CSS structure by consolidating into fewer files without altering the end result visually on any page.

We want to avoid manually checking margins and sizes in different browsers for every web page.

Is there a method to verify if the CSS rules have changed post-merge?

I am seeking a tool that can generate the effective CSS rules for HTML elements, similar to the functionality in Google Chrome's dev tools.

If we could automatically produce "computed CSS rules" for every element on a page, we could compare the before.css and after.css files for any variations. However, this would result in large files being generated.

Any suggestions on how to achieve this?

css code-generation

Answer 1

Answer №1

This script will log the CSS styles applied to each element on the website console.

const elements = document.getElementsByTagName("*");

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

Please note that this will include all default styles as well, which may result in a large amount of unnecessary information that needs to be filtered out.

Check out the JSFiddle demonstration here

Answer 2

This script will log the CSS styles applied to each element on the website console.

const elements = document.getElementsByTagName("*");

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

Please note that this will include all default styles as well, which may result in a large amount of unnecessary information that needs to be filtered out.

Check out the JSFiddle demonstration here

Retrieve the 'computed' CSS for the entire webpage

Answer №1

Similar questions

Unfinished card or cut-off content within a bootstrap accordion

Tips for aligning a cluster of floating buttons at the center in Vuetify:

Tips for altering the appearance of a dropped item using JQueryUI sortable

Change all instances of the asterisk character to a red color on every page using CSS styling

What is the solution for aligning <grid> containers to match the height of the tallest container in the row?

Align Image According to Dimensions of the Browser

Anime.js: Grid layout causing issues with displaying simple text animations

The rounded corners feature of PIE.htc does not seem to be functioning properly on Internet Explorer

Tips on creating a repeating background image with CSS for a sprite

Unable to insert image into div element

Unable to center align a .swf file vertically

Ensuring the Angular Material bottom sheet (popover) stays attached to the button

Replacing CSS conditional statements with jQuery

Is there a way to display the background when the popover is visible and hide it when the popover is hidden?

Dynamic stacking of buttons in response to user navigation choices

The Material UI dialog box popped up against an unexpected gray backdrop

Creating a chic look for your conditional statement: If Else Styling

How can I delay the loading of a link until the pop-up is closed?

Adjust the badge color on the zabuto calendar

Maintain consistent width of a page across different mobile devices