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?
4 Answers
Answers 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.
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>Answers 2
I'm not sure if this might help, but try it. If you're using Chrome, try this:
- Inspect (to open Developer tools) > Audits (tab) > Select "Audit Present Stage" > Click "Run"
- Chrome will display all unused CSS rules.
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
Answers 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
Answers 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); 
0 comments:
Post a Comment