How to Detect CSS Inheritance Source

How to detect CSS inheritance source?

You can do this job very easily by using Firebug in Firefox or Chrome's Developer Tools.

Chrome Developer Tools

Like image shows below.

Sample Image

For more information check Chrome Developer Tools: Element Styles Here

In Firebug

Like image shows below.

Sample Image

For more information check CSS Development Here

You can install Fire Bug From Here

Update 1:

You can find it by just clicking Show Inherited check box on Chrome's computed style panel likes below.

Sample Image

Update 2:

In Firebug, you just click inherited element what I showed below image.Then It will guide you to the relevant Inherited element's location.

P.S. - Same can do by using chrome Tool.

Sample Image

How can I tell if a particular CSS property is inherited with jQuery?

To actually determine whether a css style was inherited or set on the element itself, you would have to implement the exact rules that the browsers apply to determine the used value for a particular style on an element.

You would have to implement this spec that specifies how the computed and used values are calculated.

CSS selectors may not always follow a parent-child relationship which could have simplified matters. Consider this CSS.

body {
color: red;
}

div + div {
color: red;
}

and the following HTML:

<body>
<div>first</div>
<div>second</div>
</body>

Both first and second wil show up in red, however, the first div is red because it inherits it from the parent. The second div is red because the div + div CSS rule applies to it, which is more specific. Looking at the parent, we would see it has the same color, but that's not where the second div is getting it from.

Browsers don't expose any of the internal calculations, except the getComputedStyle interface.

A simple, but flawed solution would be to run through each selector from the stylesheets, and check if a given element satisfies the selector. If yes, then assume that style was applied directly on the element. Say you wanted to go through each style in the first stylesheet,

var myElement = $('..');
var rules = document.styleSheets[0].cssRules;
for(var i = 0; i < rules.length; i++) {
if (myElement.is(rules[i].selectorText)) {
console.log('style was directly applied to the element');
}
}

Get element from which CSS rule is being inherited

Walk up the parentElement chain checking the css() value of each element. The first element with a parent().css() value that's different is (probably) the element being targeted by the CSS rule selector.

See this fiddle for an example: http://jsfiddle.net/broofa/VPWV9/2/ (See the console.log output)

(Note: there are almost surely complex cases where this won't work as expected but for the case as described, it works.)

Is there any tool that can show how a CSS property is computed, if it's not inherited or set directly on the element?

There is no easy way to narrow down which element is causing a parent element to change its height. Depending on the situation, it could be a direct style applied to the parent element, it could be one child, or many of the children combined. Most browsers have tools built-in or available via an Add-on that can help make the task of tracking down the problematic style easier, but not quite "easy."

  • Firefox
  • Use Firebug, Hit F12, make sure you're on the Inspector tab and click on the arrow with a box to the left of the Inspector tab and select the element. Styles will be displayed on the right, and broken down into categories such as directly applied styles, and inherited styles from a parent element.
  • Internet Explorer
  • Hit F12, click on the cursor icon and select the element. It will render a treeview of the directly applied styles and the inherited ones.
  • Google Chrome
  • Hit F12, the display of the styles will be similar to that of Firebug.

Note that in Firebug, when you have the selection tool enabled, it will outline the element under your cursor showing you on the page the how large the element is (as if you applied a border: 2px solid blue style to it. It will also highlight the respective element in the HTML inspector so you know exactly which element you're dealing with. While this isn't going to magically say "oh hey, this particular element and style is the one giving you problems" it will help you get a clearer visual on the problem.

Which CSS properties are inherited?

Here is the list of all inheritable properies.
I'm working with W3C's information, so I'd guess it should be correct. But knowing web browsers (IE specifically), some of these might not be inheritable by all browsers:

  1. azimuth
  2. border-collapse
  3. border-spacing
  4. caption-side
  5. color
  6. cursor
  7. direction
  8. elevation
  9. empty-cells
  10. font-family
  11. font-size
  12. font-style
  13. font-variant
  14. font-weight
  15. font
  16. letter-spacing
  17. line-height
  18. list-style-image
  19. list-style-position
  20. list-style-type
  21. list-style
  22. orphans
  23. pitch-range
  24. pitch
  25. quotes
  26. richness
  27. speak-header
  28. speak-numeral
  29. speak-punctuation
  30. speak
  31. speech-rate
  32. stress
  33. text-align
  34. text-indent
  35. text-transform
  36. visibility
  37. voice-family
  38. volume
  39. white-space
  40. widows
  41. word-spacing

How to get the inherited values of element from JavaScript

You can simply implement a pixel-to-rem converter and use that:

function convertPixelsToRem(pixels) {
return ((pixels.replace("px", "") / getComputedStyle(document.documentElement).fontSize.replace("px", "")) + "rem");
}

console.log(convertPixelsToRem(window.getDefaultComputedStyle(document.getElementById("new").querySelector(".h1"))["font-size"]));
<style>
#new {
font-size: 2rem;
}
</style>
<div id="new">
<h1 class="h1">This is a heading</h1>
<!–– Here h1 is inheriting font-size from div ––>
</div>


Related Topics



Leave a reply



Submit