CODEWITHSUNDEEP
htmlcssinternet-explorer-8lessmixins
Lorraine Bernard
Lorraine Bernard

Reputation: 13400

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

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?

Upvotes: 3

Views: 860

Answers (2)

Mo.
Mo.

Reputation: 27465

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)"));
}

Upvotes: -1

feeela
feeela

Reputation: 29932

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 );
}

Upvotes: 5

Related Questions