This post will take less than a minute to read.
Using inherit to save repetition
I’ve been using the inherit value a lot more recently; it can easily reduce the amount of repetition in your style sheet. Here’s a basic example of what I am talking about. As you can see, when changing the values on the .foo
element, the pseudo-element also changes accordingly. Here is another example.
Bonus transition trick
At the moment, only Firefox supports transitions on pseudo-elements, but by making full use of inherit, we can trick other browsers into doing the same. Here is a demonstration of how this works, and here is a more practicle example.
Really cool use of inherit value!
Thanks, Claudio!
Funny detail: Firefox doesn’t understand this trick.
Ha! Strange.
These short and sweet ones are my favorites! Nice trick :)
Yeah son! Good stuff.
A lot of people forget about the existence of ‘inherit’.
Great examples.
Pseudo class animation trick you used is absolutely amazing dude, I was literally gobsmacked!
Just worth to mention that it’s really a ‘hacky’ fix and not well supported, etc.
Cheers for sharing this man!
Cheers, guys!
Interesting examples, especially that inherit is usually an overlooked property. But… wouldn’t it be easier to use: .wrapper, .wrapper { } or am I missing a point here that makes this case different?
I’m not sure I understand exactly what you mean, Jakub?
I was thinking about this kind of a solution: http://jsfiddle.net/jakub_c/gvHBy/1/
Right, I follow you now. Yes, in that particular case you could just as easily use the option you have presented. I don’t think that invalidates the use of inherit however.
I don’t think so either, I just think it makes biggest sense to target single values with inherit. Otherwise I would use the approach I presented, instead of inheriting all the values, I would just specify the properties that would be different between parent and children, couple of lines of code saved… But still, big up for making me think, actually I find most of your posts quite relevant and that’s much appreciated.
Yeah, I agree with you. And thanks!
Very good point, thanks for sharing. Kind of a “duh” moment for me right now..
No worries, Vadim!
Killer find Josh! I’ve been wracking my brain for awhile now to get a solution for transitioning pseudo-elements. This is brilliant!
Thanks, Mike :)
nice!