Most elegant way to make RGBa Browser Support for IE8 by using LESS

Question

I am using less in order to make a div with a background colour transparent.

Here is my code which does not work for IE8:

background-color: fade(@mycolor, @transparency);

My question is:
what is the best way, since I am using less, to get the same effect on IE8?

feeela · Accepted Answer · 2012-10-17T17:52:55.753

5

I don't know about LESS, but you can achieve alpha transparency in IE 7+8 by using a MS gradient filter and set the same color as start and end. The alpha channel is the first two hex digits, RGB following:

/* ARGB backgrounds for IE 7+8 (white background with nearly 90% transparancy) */
section {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );
}

edited Oct 17 '12 at 17:52

answered Oct 17 '12 at 17:47

feeela

29,399
7
59
71

1

thanks it works..Anyway for less I need to escape the value in this way: `~"filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#E5FFFFFF, endColorstr=#E5FFFFFF );"` – Lorraine Bernard Oct 18 '12 at 08:16

score -1 · Answer 2 · answered Nov 25 '14 at 15:16

You can make a mixin for the filter function

// Reset mixin filters for IE

.horizontal(@startColor: #555, @endColor: #333) {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
}
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
  background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
}
.horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}

.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.reset-filter() {
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
}

Most elegant way to make RGBa Browser Support for IE8 by using LESS

2 Answers2