Is there a way to find all the global styles that apply to a web page?

Is there a way to find all the global styles that apply to a web page?

As a company, we use components (Angular, Vue and React) to build our applications, but we still have a good number of global styles that we inherited from our legacy app.
eg:
.active {
background: red;
}

Will apply to any element anywhere on the page that has a class of active.
Is there a way, in the browser, to generate a list of all the global (i.e. non-namespaced) style rules that apply to a page, bearing in mind that these might be present inside of third-party libraries, or other miscellaneous legacy JavaScripts?

Solutions/Answers:

Solution 1:

The only option for evaluating the current page’s CSS styles is to use document.styleSheets. It will return a list of CSSStyleSheets.

You will want to focus on document.styleSheets[n].cssRules, where n equals which stylesheet you want to evaluate. That will give you a list of all the styles applied by that stylesheet. Each stylesheet will have a cssText and a selectorText property.

Related:  Array inside a JavaScript Object?

If you just want to loop through to find which styles are ‘non-namespaced’ you should probably just use the selectorText properties.

Here is some more information on MDN about document.styleSheets.

Here is an example (press ‘Run code snippet’ to see results):

var selectors = [];

var sheets = Array.from(document.styleSheets);

sheets.forEach(function(sheet) {
  // Only Stylesheets from a same-origin domain expose `cssRules` for security reasons
  try {
    var rules = Array.from(sheet.cssRules);
    rules.forEach(function(rule) {
      selectors.push(rule.selectorText);
    });
  } catch (e) {
    // Do something with external stylesheets if you want
  }
});

console.log(selectors);
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Stylesheets</title>
  <style>
    .hello-world {
      background: url(none.gif);
    }
  </style>
  <!-- Won't work as it is not a same-original stylesheet -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <style>
    .foo {
      background: url(none.gif)
    }
    
    .bar {
      background: url(none.gif);
    }
  </style>
</body>

</html>

Solution 2:

I’m not sure if this might help, but try it. If you’re using Chrome, try this:

  1. Inspect (to open Developer tools) > Audits (tab) > Select “Audit Present Stage” > Click “Run”

enter image description here

  1. Chrome will display all unused CSS rules.
Related:  Getting access to a jquery element that was just appended to the DOM

enter image description here

EDIT:

Also worth trying: Inspect (to open Developers tools) > click on the 3 vertical dots next to “Console” tab > Coverage.

It will show list of CSS/JS files loaded, and it will highlight which lines are used (green) and not used (red). Read More

enter image description here

Solution 3:

Try this script to get all the selectors form stylesheets internal and external

for(var i=0; i<document.styleSheets.length; i++) {
   var s = document.styleSheets[i];
   for(var j=0; s.cssRules && j<s.cssRules.length; j++) {
      var c = s.cssRules[j];
      console.log(c.selectorText);
   }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.test{color:red;}
</style>

To get final applied CSS properties of Element try something like this with Javascript

By using getComputedStyle() you can get exact computed final style applied on the element.

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

The returned style is a live CSSStyleDeclaration object, which updates itself automatically when the element’s style is changed.

var elem = document.getElementsByClassName("active")[0];
var background = window.getComputedStyle(elem, null).getPropertyValue("background-color"); 
var color = window.getComputedStyle(elem, null).getPropertyValue("color"); 
console.log(background);
console.log(color);
.active{background-color:blue;color:white;}
<div class="active">
some text
</div>

Ref : https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Related:  JavaScript custom Event Listener

Solution 4:

    var rulesArr = [];
    var styles = document.styleSheets;

    for ( i=0; i<styles.length; i++ ){
      //iterate styleSheets.

      if(styles[i].rules){
      //Must be a rule to continue.

        for ( x=0; x<styles[i].rules.length; x++ ){
        //iterate rules, an object in styleSheets.

        rulesArr.push(styles[i].rules[x].selectorText);
        //appends selectorText i.e. css class names to our variable.
        }
      }
    }
    console.log(rulesArr);

References