Menu
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?
209
On Chrome's Developer Tools tab (CTRL + SHIFT + I), go to Resources (you may have to enable Resource tracking on that page), and click on the sub-tab Stylesheets. That will show all css files loaded by that page.
In Chrome, if you right click on an element and "inspect," then view the styles in the "Computed" tab then you should see what styles are affecting the element.
What are Global Styles? Global styles is a system and an interface created to help users change the overall style across their entire site without having to edit individual blocks or pages. Users can select a body background color or change the line-height of all their heading blocks from one place.
What are global styles? When people talk about the global nature of CSS, they can mean one of a few different things. They may be referring to rules on the :root or <body> elements that are inherited globally (with just a few exceptions).
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.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
