IE Specific Transforms...

[stevenharman]

I'm trying to use the following mixin to generate gradients:

.gradient(@from:#fff, @to:#fff) {
  background: @from; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@from', endColorstr='@to');
  background: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)) no-repeat scroll 0 0 transparent; /* for webkit browsers */
  background: -moz-linear-gradient(top,  @from, @to) no-repeat scroll 0 0 transparent; /* for firefox 3.6+ */
}

however the IE specific filter-hack is causing less.js to fail with an unspecified syntax error. Is there a way to escape such a one-off rule? I've tried a few variations of kicking back to JS via ` and doing string concat, but that also fails.

Any ideas?

Also, I know that a similar issue was opened on LESS 1.x, but i'm unsure what ever happened there: https://less.tenderapp.com/discussions/problems/6-ie-specific-transformations-fail-with-less-css

[vicb]

You should look for e() and %()
i.e. filter: e(%('alpha(opacity=%d)', @alpha * 100));
I think your specific question might already have been answered in a previous issue.

[cneuharth]

Anyone able to get this to work for gradients? What I am trying to do is pass in the two gradient variables into this:

.gradient (@startcolor: #ffffff, @endcolor: #EDEDED){
background: -webkit-gradient(linear, left top, left bottom, from(@startcolor), to(@endcolor));
background: -moz-linear-gradient(top, @startcolor, @endcolor);
filter: %("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#EDEDED')"); /* IE6 & IE7 /
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#EDEDED')"); / IE8 */
}

[cneuharth]

Here is my updated code:

.gradient (@startcolor: #ffffff, @endcolor: #EDEDED){
background: ((@startcolor + @endcolor) / 2); /* Non CSS3 browsers /
background: -webkit-gradient(linear, left top, left bottom, from(@startcolor), to(@endcolor));
background: -moz-linear-gradient(top, @startcolor, @endcolor);
filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @startcolor, @endcolor); / IE6 & 7 /
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @startcolor, @endcolor); / IE8 */
}

[neonailol]

@newbrew
Ur filter not work
filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @startcolor, @endcolor);
will make
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFFFF, endColorstr=#00000000)";
witch is not working in ie6/7. working form of this must be like this
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#00000000');
to achieve this i change the '%' function to return (tree.Anonymus)(str) instead of quotes
and my code is
@iefilter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @startcolor, @endcolor)
filter: @iefilter; /* IE6/7 /
-ms-filter: e('"'+this.iefilter.toJS()+'"'); / IE8 */