IE Specific transformations fail with less css

Chris's Avatar

Chris

30 Apr, 2010 01:11 PM

Any chance of getting a fix for this? Not a huge problem but stops me fully supporting IE with less.

Try this:

.gradient(@from: #FFF, @to: #000) { background: @from; background: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); background: -moz-linear-gradient(top, @from, @to); background: filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='@from', EndColorStr='@to'); }

Get this:

! Syntax Error: on line 6: expected one of , ; } got ' after:

.gradient(@from: #FFF, @to: #000) { background: @from; background: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); background: -moz-linear-gradient(top, @from, @to); background: filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=

  1. 1 Posted by ryan on 30 Apr, 2010 05:42 PM

    ryan's Avatar

    Yes, please add support for filter

  2. Support Staff 2 Posted by dmitry on 04 May, 2010 10:16 PM

    dmitry's Avatar

    Good find thanks.

    Cloudhead has CSS escaping implemented in current dev version -- will be released soon. You'll be able to say which bits of CSS to leave alone so can use non-standard CSS and hacks.

  3. 3 Posted by joey on 05 May, 2010 03:25 PM

    joey's Avatar

    Any word on this? I've been needing to use DXImageTransform as well.

  4. 4 Posted by Marco Jardim on 07 May, 2010 08:49 AM

    Marco Jardim's Avatar

    A bit off context, but I usually advice any front-end developer to avoid the Microsoft filters because they make, what already is, a very slow browser even slower.

    After a handful of filter appliances the number of rendering problems that might emerge from using them easily outweigh any advantages in using them.

  5. 5 Posted by Steven Harman on 08 Jun, 2010 06:44 PM

    Steven Harman's Avatar

    (bump) Just curious if we can get an update on the status of the next release - CSS escaping would help us out greatly.

    Thanks,
    -steve

  6. 6 Posted by duncan on 11 Jun, 2010 05:50 PM

    duncan's Avatar

    also interested in this

  7. 7 Posted by sosborn on 17 Jun, 2010 02:37 AM

    sosborn's Avatar

    Any updates on the next release? I really need to get this going for a project.

    Thanks for your hard work.

  8. 8 Posted by gbhasha on 22 Jun, 2010 06:20 AM

    gbhasha's Avatar

    Awaiting for IE filter support

  9. 9 Posted by bactisme on 06 Aug, 2010 04:56 PM

    bactisme's Avatar

    UP !! please update !!

  10. 10 Posted by Julia Sifers on 07 Oct, 2010 07:30 PM

    Julia Sifers's Avatar

    I could also really use CSS escaping to avoid less choking on IE filters.

  11. 11 Posted by gbhasha on 08 Oct, 2010 10:04 AM

    gbhasha's Avatar

    On Fri, Aug 6, 2010 at 10:28 PM, bactisme <
    [email blocked]<tender%[email blocked]>
    > wrote:

  12. Support Staff 12 Posted by dmitry on 12 Oct, 2010 05:12 PM

    dmitry's Avatar

    Less.js now has a function to escape code that looks like this:

    e('escape this code')

    You can use it inline right inside the declaration block to escape whatever you want, and it will be inserted into CSS as it. It will also escape variables, which is a problem, but you may be able to isolate bits of code that don't compile, and leave the variables outside the escape function.

    If you use Less.app on OS X, you'll also be able to use this since it uses Less.js as the engine.

  13. 13 Posted by Nathan Peretic on 12 Oct, 2010 06:47 PM

    Nathan Peretic's Avatar

    @Dmitry

    I'm using Less.app and that syntax isn't working. Would this be correct:

    e('filter: chroma(color=pink);)'

  14. Support Staff 14 Posted by dmitry on 13 Oct, 2010 12:30 AM

    dmitry's Avatar

    My mistake, the last quote has to be inside the parentheses, so:

    e('some code here')

    in your case it would be:

    e('filter: chroma(color=pink)');

  15. dmitry closed this discussion on 13 Oct, 2010 12:30 AM.

  16. dmitry re-opened this discussion on 13 Oct, 2010 12:30 AM

  17. Support Staff 15 Posted by dmitry on 13 Oct, 2010 12:32 AM

    dmitry's Avatar

    You can use it multiple times in a declaration block as well, so something like:

    filter: e('progid:DXImageTransform.Microsoft.gradient(startColorstr=')@color1, e('endColorstr=')@color2 e(')');

    I haven't used this before in my code so I may be doing it wrong :)

  18. dmitry closed this discussion on 13 Oct, 2010 12:32 AM.

  19. dmitry re-opened this discussion on 13 Oct, 2010 11:53 PM

  20. Support Staff 16 Posted by dmitry on 13 Oct, 2010 11:53 PM

    dmitry's Avatar

    Ok, I'm doing it wrong :)

    If you'd like to add variables inside e(), you can use the format string function %s, so you'd write:

    e(%("some IE stuff here, first color %s, second color %s", @color1, @color2))

    First %s is replaced by @color1, second %s by @color2, then the whole line is escaped using e().

  21. 17 Posted by gbhasha on 29 Nov, 2010 06:01 AM

    gbhasha's Avatar

    Galeel Bhasha Satthar wants you to use Dropbox to sync and share files online and across computers.

    Get started here: http://www.dropbox.com/link/20.rLWkDhdCQ3/NjQ5MTgxNTYwNw?src=referrals_bulk

    - The Dropbox Team

    ____________________________________________________
    To stop receiving invites from Dropbox, please go to http://www.dropbox.com/bl/bef816471ced/tender%2Bd5f92714577a282679ec875ddf3949410144ccf6e%40tenderapp.com

  22. 18 Posted by Paul Young on 21 Dec, 2010 12:58 PM

    Paul Young's Avatar

    I can't get this work, using the example below to test I get a syntax error:

    e('filter: chroma(color=pink)');

  23. 19 Posted by laurent J on 24 Dec, 2010 12:33 PM

    laurent J's Avatar

    Hi
    Merry christmas to all,

    I tried to implement css3 pie, so i create

    @ie {e('behavior: url(PIE/PIE.htc)'); }

    but i've got an error, what am i doing wrong ?

    thanks

  24. 20 Posted by Paul Young on 24 Dec, 2010 01:22 PM

    Paul Young's Avatar

    This should work fine without the need to escape:
    behavior: url('PIE/PIE.htc');

    However the example above is wrong, it should be:
    filter: e('chroma(color=pink)');

    So your case would be:
    behavior: e('url(PIE/PIE.htc)');

  25. 21 Posted by laurent J on 24 Dec, 2010 01:34 PM

    laurent J's Avatar

    I've tried :

    @internet-explorer: behavior: e('url(PIE/PIE.htc)');

    but it tell me "syntax error"

  26. 22 Posted by Paul Young on 24 Dec, 2010 02:07 PM

    Paul Young's Avatar

    I'm not familiar with @internet-explorer but I imagine the syntax would be:

    @internet-explorer {

    behavior: e('url(PIE/PIE.htc)');
    

    }

  27. 23 Posted by laurent J on 25 Dec, 2010 09:04 PM

    laurent J's Avatar

    ok i didn't understand what you mean, i don't need to create @internet-explorer
    just have to add beavior where i need it

    ex:

    .background-linear-gradient(@i: #fff, @j: #000) {

    background: -webkit-gradient(linear, 0 0, 0 bottom, @i, @j);
    background: -moz-linear-gradient(@i, @j);
    background: -o-linear-gradient(@i, @j);
    background: linear-gradient(@i, @j);
    -pie-background: linear-gradient(@i, @j);
    behavior: url(/PIE.htc);
    }
    

    https://less.tenderapp.com/discussions/problems/34-webkit-gradient-...

    thanks paul

    merry christmas

  28. 24 Posted by Elyse on 03 Jan, 2011 08:46 PM

    Elyse's Avatar

    We're using LESS at my company (a slightly modified version) but fades and microsoft filters work fine.

    /* IE gradient filter requires the full, 6-character hex color, no abbreviations or rgb colors. */ .less_box_fade (@bottom: @color1, @top: @color2) {background-image: -webkit-gradient(linear, left top, left bottom, from(@top), to(@bottom)); background-image: -moz-linear-gradient(top, @top, @bottom); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@top, endColorstr=@bottom); zoom: 1;}

    but note the important part: IE gradient filter requires the full, 6-character hex color, no abbreviations or rgb colors it would choke and die unless we used full 6-char hex colors only.

  29. 25 Posted by mkoistinen on 18 Jan, 2011 11:05 PM

    mkoistinen's Avatar

    All, I've been able to make it work as follows:

    // NOTE: At this time, one can ONLY use 6-digit HEX notation
    // As the IE filters fail on anything else.  At some point
    // LESS should support color-coercion and this issue should
    // go away.  In the meantime, beware of rgb(), rgba(), hsl(), 
    // hsla() or named colors.
    .gradient (@startcolor: #FFFFFF, @endcolor: #EDEDED) {
        /* CSS3 Gradient */
        background: -webkit-gradient(linear, left top, left bottom, from(@startcolor), to(@endcolor));
        background: -moz-linear-gradient(top,  @startcolor,  @endcolor);
        // IE6 & 7
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d,endColorstr=%d)", @startcolor, @endcolor));
        // IE8
        -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d, endColorstr=%d)", @startcolor, @endcolor);
    }
    

    This converts to:

    /* CSS3 Gradient */
    
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EDEDED));
    background: -moz-linear-gradient(top, #FFFFFF, #EDEDED);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF,endColorstr=#EDEDED);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#EDEDED)";
    

    I can confirm that this works in IE6+. The trick is to embed the %() inside the e(). This allows the substitution, but in a manner which eliminates and quotes that had to be introduced.

  30. 26 Posted by Marco Jardim on 18 Jan, 2011 11:07 PM

    Marco Jardim's Avatar

    --
    Marco Jardim

    Skype: jard.im
    AIM: marcojardim84

  31. 27 Posted by Mark on 04 Mar, 2011 08:57 PM

    Mark's Avatar

    Thanks mkoistinen! your solution worked for me.

  32. 28 Posted by Manuel Vio on 09 Jun, 2011 09:05 PM

    Manuel Vio's Avatar

    Thank you mkoistinen!

  33. 29 Posted by pedromagnus on 28 Jun, 2011 01:11 AM

    pedromagnus's Avatar

    From the docs (http://lesscss.org/#-escaping):

    To output such value, we place it inside a string prefixed with ~, for example:

    .class { filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"; } This is called an “escaped value”, which will result in:
    .class { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png'); }

  34. 30 Posted by odle on 05 Jul, 2011 09:23 PM

    odle's Avatar

    So did anyone get the correct version of how to include PIE.htc ?

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac