1

If you click F12 in a page in Google Chrome, you'll see the developer's console. The next tab that appears (right to "Styles") is "Computed". If you open that tab up, you'll see what are the proprieties of a certain element that you have selected from left pane. My question is how can I check which of these properties were inherited ("Show inherited")? I tried the following script but it failed:

var ssheets = document.styleSheets,
ssheets_length = document.styleSheets.length;

for(var k = 0; k < ssheets_length; k++){
    var rules = ssheets[2].cssRules;
    for(var i = 0; i < rules.length; i++) {
        if (catched_element.is(rules[i].selectorText)) {
        final_array.push(rules[i]);
        }
    }
}

This is what I tried to find within the rules, if the element wasn't inherited. If the rule is inherited, it would be carried into an array that's showing only the elements that appear in the computed tab if you don't check "Show Inherited". Any ideas on this one?

Zeinab Abbasimazar
  • 9,835
  • 23
  • 82
  • 131
user2981788
  • 11
  • 1
  • 1
    Check [this](http://stackoverflow.com/questions/5000108/how-can-i-tell-if-a-particular-css-property-is-inherited-with-jquery?answertab=active#tab-top). – Zeinab Abbasimazar Nov 12 '13 at 13:03

1 Answers1

0

I don't think you need to write a script for this. If you click "Show inherited" you can scroll down and you will see some CSS with a pale color and some with more bright color. The pale ones are the inherited.

Ricky Stam
  • 2,116
  • 21
  • 25
  • 1
    Maybe @user2981788 wants to do something with these properties in the code or changing them automatically; in this case, you can't offer manual approaches. – Zeinab Abbasimazar Nov 12 '13 at 08:26