Created
May 17, 2013 08:45
-
-
Save robfletcher/5597817 to your computer and use it in GitHub Desktop.
SASS mixin that uses modernizr to output fallback color property for browsers that don't support RGBA.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Outputs a color property with an opaque fallback for browsers that do not support RGBA. | |
*/ | |
@mixin safe-rgba($property, $color, $fallback-color: opacify($color, 1)) { | |
@if opacity($color) == 1 { | |
#{$property}: $color; | |
} @else { | |
#{$property}: $fallback-color; | |
.rgba & { | |
#{$property}: $color; | |
} | |
} | |
} |
That's great, much more thorough than my version. I don't think modernizr does have a detect for the on IE filters, no.
Glad to help!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey! I did a similar thing a short while ago, which lets you specify the colour of the backdrop behind your transparent foreground colour - ideally with a variable - so that Sass can use its
mix
function to get fake transparency. It looks identical to real transparency (for solid-on-solid colour). IE8 can usefilter
to get real background transparency, but if you use this you can also get "transparency" on border-color, font color, and everything else. It defaults to the most legitimate transparency available.Doesn't depend on Modernizr, but it does expect some kind of similar 'IE8' class in the
<html>
element, like H5BP's. Can Modernizr detect the old MS filters? Would be preferable to an IE8 class, but I don't think it can.Might be helpful.
I took the filter idea taken from StackOverflow user "seutje" http://stackoverflow.com/a/8009864/1129420
http://caniuse.com/css3-colors