Less – Gradient Mixin für den IE

Der Internet Explorer, dieses kleine, miese, dreckige HRMPF! Da bastel ich an einem Design und finde, dass es echt gut aussieht – jedenfalls bis ich die Seite mit dem IE aufrufe.

[clearboth]Der Fehler lag an einem fehlerhaften Less CSS Mixin. In diesem schrieb ich die folgende Less Anweisung und übergab meine Farben, z.B. #C0C0C0 und #FEFEFE

.gradient(@startColor, @endColor, @start:0%, @end:100%) {
    [...]
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@startColor', endColorstr='@endColor',GradientType=0 );
    [...]
}

Schön blöd, denn nicht nur dass der IE mit dieser unsäglichen filter: irgendeinProprietärerMicrosoftCssErsatz.Krückstock() Syntax mir den letzten Nerv raubt – nein, er erwartet auch noch eine Farbangabe mit Alphakanal. Also passte ich den Ausdruck an und erzeugte Farben mit Alphakanal, was mit den Farbfunktionen von Less zum Glück sehr einfach ist.

.gradient(@startColor, @endColor, @start:0%, @end:100%) {
	@startColorIE : @startColor + rgba(0, 0, 0, 1);
	@endColorIE   : @endColor + rgba(0, 0, 0, 1);

    background: @start;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColorIE}', endColorstr='@{endColorIE}',GradientType=0 );
    [...]
}

Damit kommt man zwar der Lösung einen Schritt näher, landet jedoch in einem Less Bug, wenn man den selben Mixin mehrfach in seinem Code aufruft (z.B. um in diesem Fall mehrere verschiedene Gradienten zu erzeugen.) Machen wir es kurz, hier ist der komplette, funktionierende Mixin, der auch im IE seinen Dienst verrichtet.

.gradient(@startColor, @endColor, @start:0%, @end:100%) {
	@startColorIE : @startColor + rgba(0, 0, 0, 1);
	@endColorIE   : @endColor + rgba(0, 0, 0, 1);

    background: @start;
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColorIE}', endColorstr='@{endColorIE}',GradientType=0 )";
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@startColor,@start), color-stop(@endColor,@end)); 

    background: -webkit-linear-gradient(top,  @startColor @start, @endColor @end); 
    background:    -moz-linear-gradient(top,  @startColor @start, @endColor @end);
    background:     -ms-linear-gradient(top,  @startColor @start, @endColor @end); 
    background:      -o-linear-gradient(top,  @startColor @start, @endColor @end); 
    background:         linear-gradient(top,  @startColor @start, @endColor @end);    
}

Done;