CSS Discovery of the Day: Inline inheritance

This has has very little applicability to anything… but it made me smile.

A link in the footer of a site I’m working on was obnoxiously showing up in bright red. This is the color all non-navigation links are set to. But footers are meta-information, they’re not supposed to be highlighted like that!

(Obviously I didn’t write the main CSS for this site.)

So the color needs to be overriden. Problem: I happen to know the design on the site is slated to change, so if I override the global link color with another color to match the gray of the rest of the footer text, it may just drive some future web-dev person batty. (Likewise, I probably shouldn’t make sweeping changes to the global link markup in the CSS file, since it’s used on a lot of things.)

“Inherit” isn’t a value a lot of web-developers use… it’s used primarily to ’switch off’ a CSS attribute value that has already been set by overriding the setting of another rule with a more specific value telling it to “inherit the value of this attribute from your parent.”
So if all the <a>’s have colors set, you can override that color setting and say “in this circumstance, inherit the color setting from <div id="body">.”
It’s absurdly useful, especially when re-skinning a site– I just reset CSS values back to default/null/inherit until I remove the offending rule instead of trying to override them one at a time… all without touching the original CSS.

CSS operates on 4 levels of “authority”; general rule, rule with explicit identifier, !important rule, inline.

I set the link’s color to inherit using inline code… and was delighted to see it properly inherit the color set by the general rule.
<a href="http://domain.com" style="color:inherit;">domain.com</a>

Inline style code is all about overriding rule-based style definitions. But I was able to use an inline override to tell this element to adhere to a rule-based style definition with lower authority than the original rule-based definition!
It makes perfect sense, but it also makes my eyes cross at how non-instinctive the idea is, so I has a reasonable expectation that it would not work. “I’m setting a local variable to override a global variable… that’s an alias for a global variable’s value.”

Works perfectly in Firefox, Chrome, Safari, Opera and I.E.

Awesome.