Posted on August 10 2011
in CSS
This is just a proof-of-concept and quite is fragile and hacky. For this reason, I won't be explaining any of the techniques or even providing the code snippets for you. You can always fork the fiddle to play with it.
Some of the awful things I've done:
- I'm using psuedo elements (:before, :after) on the containing div to hide the inner-element border-radius overflow...this is bad. Feel free to fix it. :-p
- The "slider" UI component should probably be a psuedo element so it can sit on-top of (z-index) the ON/OFF labels. Either the "ON" or "OFF" component would then be represented by the span element itself. You'll have to tweak the positioning quite a bit to get this to work.
- The CSS is an absolute mess and has only been tested in Chrome.
This was inspired by Damian Nicholson's blog post on the same topic.
Posted on May 13 2011
in CSS
My GoogleFu turned up nothing today when searching for IE9 only CSS hacks. After a couple hours of searching, and combining the hacks found in Paul Irish's excellent post about Browser CSS Hacks I gave up. I just moved on. I settled for that 1px difference between every other browser and IE9.
Apparently my subconscience was still working on the problem for me. Suddenly had an idea, well, a question, actually:
"Whats new in IE9?"
I'll tell you whats new, media query expressions. Specifically, the and (min-width:value) part.
Update (18 May 2011): Mathias Bynens (twitter) posted a comment explaining that the :root selector is new in IE9! The @media all and (min-width:0) part as been removed in favor of this method. Thanks Mathias!
Update (13 June 2011): This hack is a bit mysterious as doesn't work on all properties (like background, for instance) and isn't considered "safe" (yet). Checkout Mathias' post on safe css hacks.
Ta-freaking-Da:
#element {
color:orange;
}
#element {
*color: white; /* IE6 + 7, doesn't work in IE8/9 as IE7 */
}
#element {
_color: red; /* IE6 */
}
#element {
color: green\0/IE8+9; /* IE8 + 9 + IE10pp4 */
}
:root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */
Demo:
Note that this hack also works in IE10pp4.
p.s. CSS hacks are usually bad. You should probably do this instead.
Posted on April 18 2011
in CSS
This is just a preview of what is to come. The following is a REAL screenshot of FF4 demonstrating the technique from my last post about appling gaussian blur on HTML elements with CSS.
I'll update this post as soon as I have something more complete to demonstrate.