Inheriting Link Colour
Ever do something so glaringly obvious you wondered why you've never done it before? I feel like this is one of things that everybody does because it is so obvious. Here is the scenario: you want your link colour to match the content around it but you have different colours for things like body, navigation and footer. Traditionally, I've set up styles for each area independantly like so:
#nav { color: #9C0; }
#nav a { color:#9C0; }
#content { color:#333; }
#content a { color:#333; }Then the lightning struck. Why not just tell all links to inherit their colour?
a { color:inherit; }
#nav { color: #9C0; }
#content { color:#333; }Now the links will match in colour to the text around it. Too easy.
Update: Seems I spoke too soon. Neither IE6 or IE7 (Beta Preview 2 MIX06) support this. *sigh*
Conversation
some observations:
If your text and link needs to be styled with the same colour, you could achieve this too by using the * selector?
#nav * { color: #9C0; }
#content * { color:#333; }
Normally links should be distinct from any text by making them bold, underlined, a different color or other.
I am pretty sure the inherit CSS rule is widely underused. So in the end I am glad it is promoted as such.
Damn, and I was going getting excited too just reading it through bloglines...then I saw the update.
Too bad.
Johan, the universal selector is going to screw up a lot of other things - the point i think the point snook is making is that he just wants links to inherit color...not "everything"
@ Dustin I see your point. All in technicolor.
I was all 'w00t' and then I was all 'doh!'...
Yes, "inherit" is a very useful value. When broadly implemented.
Truly brilliant, how come noone have thought of this before (atleast I haven't seen it elsewhere).
IEs lack of support is sad, but I will probably use this anyway. I don't care if IE-users get a distorted layout (actually I think designs should stop with the constant workarounds for IE (except maybe for major things) this - more then anything - would force IE to adapt the standards. The websites are supposed to degrade, if people are using old browsers they get the content, but layout etc. may be distorted).
Sweet, I had never thought about that. What a way to save some time. Too bad IE seems to be out of the loop again. Well back to more hacks and/or long hand coding.
Ditto on the *sigh* .
I've been using this on my latest redesign, but only in one spot on my admittedly messy CSS. I wanted a way to toggle tags on and off for del.icio.us posts, and I also wanted the toggle link to change with the status. The toggled text was set to display:none; and color:inherit; and used the same class as the toggled tags. Saved me some code.
Kind of difficult to explain, but it works well in civil browsers.
I was all ready to go clean up my css files, till I read the update. I don't really care about IE, but I have like 40% of my readers using IE, so I guess I will have to wait for IE to catch up before I make any changes.
but, as a halfway measure, you can still have multiple comma-separated selectors, which is what i normally tend to do
#nav, #nav a { color: #9c0; }
I remember when I first became obsessed with web standards and I read everything I could find about css and I tried inherit on links for the same functionality. I used IE at the time so I figured it didn't work at all. It's interesting to know that the rest of the pack does support it...
Yup, we had a design problem come up recently at work and I suggested using inherit, but then someone else pointed out that IE doesn't grok it.
Feh.
The problem in IE can be fixed with a little expression:
a { color: expression(this.parentNode.currentStyle.color); }
What do you think?
Stepan: brilliant!
That's more than brilliant stepan thank you so much :)
Great idea Stepan. I was just getting very frustrated with IE's lack of support for 'inherit', and you've shown a general way that it can be used (and it works for any attribute!).