Bug with escaping variables containing hex colors & several other problems

Víctor Gonzalez's Avatar

Víctor Gonzalez

12 Jan, 2011 04:14 AM

Hello to all, and first of all thanks for making my life easier with less. This is mainly a problem topic but have some suggestions too though.

I was reading this problem several other persons had while creating fallbacks for IE. I've had the same problem creating a fallback for the box-shadow prop.
Maybe this will sound like an exaggeration but I think Less is really missing math functions. Not even potencies are supported. I'm a big fan of mathematics, and when I hear things like this it makes me want to create things and use the golden ratio and such, or just use mixins for IE fallbacks. I know, everybody should upgrade their browsers and stuff but reality is here in Mexico nobody does. The university were I study recently upgraded the browsers of all the computers of the campus... to IE7, for christ sake. You'd be amazed if you looked onto my ganalytics account. I'm sure is not as pretty as yours.

Back to the fallback:
`.boxShadow (@hor: 3, @vert: 2, @blur: 5, @shadow: #757171, @dir: 34) {

-webkit-box-shadow: e(%('%spx %spx %spx', @hor, @vert, @blur)) @shadow;
-moz-box-shadow: e(%('%spx %spx %spx', @hor, @vert, @blur)) @shadow;
box-shadow: e(%('%spx %spx %spx', @hor, @vert, @blur)) @shadow;
filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%s', Direction=%s, Strength=%s)", @shadow, @dir, @blur));

}`

Now that's an ugly piece of CSS.
It would be so cool if I could calculate the fallback shadow direction using just the two other standard values (@hor, @vert). But I have to calculate it by myself using this) or this. Maybe this would be the least useful example but I imagine great applications on canvas and Less grids. It would be so cool if less could aloud me to use if statements, it would totally make a revolution in css. Dynamically creating css using rules and math. I imagine the coolest grid systems with custom fonts and layouts (which would of course have to be generated and translated into css the less app or via terminal and not with js on every load in my point of view).

Now, while I was trying to write a fallback for a linear gradient I discovered a bug in which using a variable with a hex color inside an e(%(%s), @hexvalue)) returned 'undefined'. I was able to reproduce the bug for hours (until I found out what the problem was).

Example:
// IE gradient filter requires the full, 6-character hex color, no abbreviations or rgb colors // https://less.tenderapp.com/discussions/problems/6-ie-specific-transformations-fail-with-less-css#comment_4542526 .linear_gradient (@bottom: #ffffff, @top: #000000) { filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%s, endColorstr=%s)", @top, @bottom)); }

Returns:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=undefined, endColorstr=undefined);

While the much uglier:
.linear_gradient (@bottom: ffffff, @top: 000000) { filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#%s, endColorstr=#%s)", @top, @bottom)); } // I've skipped all the css3 props as you may have noticed.

Returns:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0, endColorstr=#ffffff);

The last bug is that escaping text paradoxically produces whitespace!!!!!!!! Horrendous.
`filter: e('progid:DXImageTransform.Microsoft.Alpha(opacity=')@opacity*100e(')');

Returns:
filter: progid:DXImageTransform.Microsoft.Alpha(opacity= 20 ); //note the whitespace.`

The solution:
`.opacity (@opacity) {

filter: e(%("progid:DXImageTransform.Microsoft.Alpha(opacity=%s)", @opacity*100));

} .opacity(.2); // inside an element`

Returns:
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);

Of course using variables next to e('') produces whitespace too, because you need to use it for Less to separate @opacity e('') and not @opacitye('').

Well, thanks for your kind help, and if someone is curious about the full set of fallbacks (I appreciate any comments and suggestions). I'm still missing some of them:
`// Rounded Corners .roundedCorners (@radius: 12px) {

-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
behavior: url(border-radius.htc);

}

// Box Shadow .boxShadow (@hor: 3, @vert: 2, @blur: 5, @shadow: #757171, @dir: 145) {

}

// Transition .transition (@range: all, @time: 1s, @ease: ease-in-out) {

-moz-transition: @range @time @ease;
-webkit-transition: @range @time @ease;
transition: @range @time @ease;

}

// Opacity .opacity (@opacity) {

opacity: @opacity; /* other browsers */
filter: e(%("progid:DXImageTransform.Microsoft.Alpha(opacity=%s)", @opacity*100));
-ms-filter: e(%('"progid:DXImageTransform.Microsoft.Alpha(opacity=%s)"', @opacity*100));

}

// IE gradient filter requires the full, 6-character hex color, no abbreviations or rgb colors // https://less.tenderapp.com/discussions/problems/6-ie-specific-trans... .linear_gradient (@bottom: ffffff, @top: 000000) {

background-image: -webkit-gradient(linear, left top, left bottom, from(e(%('#%s', @top))), to(e(%('#%s', @bottom))));
background-image: -moz-linear-gradient(top, e(%('#%s', @top)), e(%('#%s', @bottom)));
filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#%s, endColorstr=#%s)", @top, @bottom));
-ms-filter: e('"')e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#%s', endColorstr='#%s')", @top, @bottom))e('"');
zoom: 1;

}`

  1. 1 Posted by Igorek on 06 Jan, 2012 12:30 AM

    Igorek's Avatar

    For background i think there is a cleaned way to do it if you don't want to change all your code to be different JUST for this one method....

    so lets say you have your style defined as
    .gradient(@top: #FFFFFF, @bottom: #000000) {

        /* Hack for IE parcing, strip out # of the beginning of the HEX color and pass it to the LESS parcer */
    @ms-top: ~`"@{top}".slice(1)`;
    @ms-bottom: ~`"@{bottom}".slice(1)`;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#%s', endColorstr='#%s')", @ms-top, @ms-bottom));
    

    }

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