{"id":614,"date":"2012-09-01T12:06:24","date_gmt":"2012-09-01T11:06:24","guid":{"rendered":"https:\/\/www.kolja-engelmann.de\/blog\/?p=614"},"modified":"2012-09-01T12:06:24","modified_gmt":"2012-09-01T11:06:24","slug":"less-gradient-mixin-fur-den-ie","status":"publish","type":"post","link":"https:\/\/www.kolja-engelmann.de\/blog\/2012\/09\/less-gradient-mixin-fur-den-ie\/","title":{"rendered":"Less &#8211; Gradient Mixin f\u00fcr den IE"},"content":{"rendered":"<p>Der Internet Explorer, dieses kleine, miese, dreckige HRMPF! Da bastel ich an einem Design und finde, dass es echt gut aussieht &#8211; jedenfalls bis ich die Seite mit dem IE aufrufe.<\/p>\n\n\t\t<style>\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 50%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-1' class='gallery galleryid-614 gallery-columns-2 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/gradient_error_ie.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/gradient_error_ie-150x150.png\" class=\"attachment-thumbnail size-thumbnail no-lazy\" alt=\"\" aria-describedby=\"gallery-1-615\" srcset=\"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/gradient_error_ie-150x150.png 150w, https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/gradient_error_ie-160x160.png 160w, https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/gradient_error_ie-120x120.png 120w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-615'>\n\t\t\t\tSo zeigt es der IE\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/gradient_error_firefox.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/gradient_error_firefox-150x150.png\" class=\"attachment-thumbnail size-thumbnail no-lazy\" alt=\"\" aria-describedby=\"gallery-1-616\" srcset=\"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/gradient_error_firefox-150x150.png 150w, https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/gradient_error_firefox-160x160.png 160w, https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/08\/gradient_error_firefox-120x120.png 120w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-616'>\n\t\t\t\tSo sollte es aussehen\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p>[clearboth]Der Fehler lag an einem fehlerhaften Less CSS Mixin. In diesem schrieb ich die folgende Less Anweisung und \u00fcbergab meine Farben, z.B. <code>#C0C0C0<\/code> und <code>#FEFEFE<\/code><\/p>\n<pre class=\"lang:default decode:true\">.gradient(@startColor, @endColor, @start:0%, @end:100%) {\r\n    [...]\r\n    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@startColor', endColorstr='@endColor',GradientType=0 );\r\n    [...]\r\n}<\/pre>\n<p>Sch\u00f6n bl\u00f6d, denn nicht nur dass der IE mit dieser uns\u00e4glichen filter: irgendeinPropriet\u00e4rerMicrosoftCssErsatz.Kr\u00fcckstock() Syntax mir den letzten Nerv raubt &#8211; 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\u00fcck sehr einfach ist.<\/p>\n<pre>.gradient(@startColor, @endColor, @start:0%, @end:100%) {\r\n\t@startColorIE : @startColor + rgba(0, 0, 0, 1);\r\n\t@endColorIE   : @endColor + rgba(0, 0, 0, 1);\r\n\r\n    background: @start;\r\n    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColorIE}', endColorstr='@{endColorIE}',GradientType=0 );\r\n    [...]\r\n}<\/pre>\n<p>Damit kommt man zwar der L\u00f6sung einen Schritt n\u00e4her, 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.<\/p>\n<pre class=\"lang:css mark:6 decode:true\">.gradient(@startColor, @endColor, @start:0%, @end:100%) {\r\n\t@startColorIE : @startColor + rgba(0, 0, 0, 1);\r\n\t@endColorIE   : @endColor + rgba(0, 0, 0, 1);\r\n\r\n    background: @start;\r\n    filter: ~\"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{startColorIE}', endColorstr='@{endColorIE}',GradientType=0 )\";\r\n    background: -webkit-gradient(linear, left top, left bottom, color-stop(@startColor,@start), color-stop(@endColor,@end)); \r\n\r\n    background: -webkit-linear-gradient(top,  @startColor @start, @endColor @end); \r\n    background:    -moz-linear-gradient(top,  @startColor @start, @endColor @end);\r\n    background:     -ms-linear-gradient(top,  @startColor @start, @endColor @end); \r\n    background:      -o-linear-gradient(top,  @startColor @start, @endColor @end); \r\n    background:         linear-gradient(top,  @startColor @start, @endColor @end);    \r\n}<\/pre>\n<p>Done;<\/p>","protected":false},"excerpt":{"rendered":"<p>Der Internet Explorer, dieses kleine, miese, dreckige HRMPF! Da bastel ich an einem Design und finde, dass es echt gut aussieht &#8211; jedenfalls bis ich die Seite mit dem IE aufrufe. [clearboth]Der Fehler lag an&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":618,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[38],"tags":[69,52],"class_list":["post-614","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codeschnippsel","tag-css","tag-css3"],"jetpack_featured_media_url":"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2012\/09\/less_logo.png","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/comments?post=614"}],"version-history":[{"count":0,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/614\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media\/618"}],"wp:attachment":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media?parent=614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/categories?post=614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/tags?post=614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}