Last active
August 29, 2015 14:04
-
-
Save marcelosomers/c812160cebe8b998bb0c to your computer and use it in GitHub Desktop.
Supporting Alpha Channels in old versions of IE without CSS bloat
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
/** | |
* The goal here is to simplify implementing alpha channels when requiring support of | |
* old versions of IE that do not support rgba values. For modern browsers, it'll only output | |
* the rgba value of a color, but for <IE9, it'll first output the solid version of the color | |
* with no opacity. | |
*/ | |
/** | |
* Mixin to conditionally show content if the stylesheet is for old versions of IE. You'd have a | |
* separate IE8-only stylesheet that gets loaded conditionally. | |
* Following this pattern: http://jakearchibald.github.io/sass-ie/ | |
*/ | |
@mixin old-ie { | |
@if $old-ie { | |
@content; | |
} | |
} | |
/** | |
* Mixin that takes a property, color, and opacity value | |
* For modern browsers, it'll only output the rgba value, but for the IE8.css file, | |
* it'll load the zero opacity color first, which IE8 will use. | |
*/ | |
@mixin alpha-element($property, $color, $opacity) { | |
@include old-ie { | |
#{$property}: $color; | |
} | |
#{$element}: rgba($color, $opacity); | |
} | |
/** | |
* Actually implementing | |
*/ | |
.element { | |
@include alpha-element("background-color", #000, 0.5); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment