CODEWITHSUNDEEP
htmlcss
Rookie Programmer Aravind
Rookie Programmer Aravind

Reputation: 12154

HTML-CSS: Is it really necessary to use "inherit" value for the style properties in HTML design?

My question is straight: why there is "inherit" value for (almost) all the properties in HTML-CSS .. even-though all browsers support inheritance for all (as per my observation, yes, all) the properties ..

When I asked google about it .. I could come up with a statement saying

"Even though certain characteristics are inherited automatically in CSS, there may be situations in which you want to increase the weight of the inherited property. Specifying a value of inherit for any CSS property that’s applied to an element will cause the element to gain its parent’s computed value for the property in question. By specifying in the author style sheet that a property should inherit its value, you can increase its weight."

Now this was yet more confusing .. what is this "increasing the weight"?

is it something like .. trying to stay secure .. (so as to not to trust the browser's inbuilt capability of inheritance ) or to have more understandable code?      I am not clarified ..

Also some people mention that

"Internet Explorer 7 and earlier versions don’t support the value inherit for any properties other than direction and visibility."

if it is true .. then it drives the reason(??) for using "inherit" value yet more weak ..

Upvotes: 4

Views: 1891

Answers (2)

o.k.w
o.k.w

Reputation: 25790

Refer to the W3C's specification for 'inherit' value.

Excerpt:

The 'inherit' value can be used to strengthen inherited values, and it can also be used on properties that are not normally inherited.

To me, this is a better phrasing rather than "increase the weight of the inherited property".

As for the IE7 inherit question, check this SO post on IE7 CSS inherit problem

UPDATE:
Using K Prime's sample code, here's the test I did on IE7 vs IE8/FF3.5

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p { color: #666; }
p a { color: blue; text-decoration: underline; }
p a.inactive { color: inherit; text-decoration: none; }
</style>
</head>
<body>
<a href="#">should be default</a>
<p>
<a href="#" class="inactive">should be grey</a>
<a href="#">should be blue</a>
</p>
</body>
</html>

IE7 output:
IE7

IE8/FF3.5 output:
IE8/FF3.5

So well, IE7 failed the 'inherit' test for this one.

Upvotes: 2

K Prime
K Prime

Reputation: 5849

This is used to override a previously set custom style, or undo a customisation. To clarify: 

p { color: #666; }
p a { color: blue; text-decoration: underline; }

p a.inactive { color: inherit; text-decoration: none; }

All links (a) inside a paragraph will be blue, but this will set those with inactive to inherit from parent (the p), which will make them gray in this case.

Upvotes: 2

Related Questions