Lesscss Method with Ie Filter Alpha Opacity CSS

LESSCSS method with IE FIlter Alpha Opacity CSS

In dotless, do this. (I would NOT recommend script tags - they are ugly, language specific and not supported by dotless).

.opacity (@opacity) {
    @opacityPercentage: @opacity * 100;
    opacity: @opacity;
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{opacityPercentage}))"; 
    filter: ~"alpha(opacity = (@{opacityPercentage}))";
}

in dotless 1.2.3 (when it is released in a couple of weeks, or github head, you should be able to do this...

.opacity (@opacity) {
    @opacityPercentage: @opacity * 100;
    opacity: @opacity;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(@opacityPercentage)); 
    filter: alpha(opacity = (@opacityPercentage));
}

and re: the comment from Mathletics, dotless is not "the worst compiler".. It matches less.js up to 1.1.5, soon to be 1.2.2 and many of the 600 bugs against less.js are fixed in dotless. You may have used dotless over 8 months ago, but things change and bugs are fixed... dotless also has better support for comments and variable scoping.

IE8 opacity/filter css style not working

As you've mentioned in the comments, your site is build for quirks mode. I assume the elements in question don't have layout.

To get opacity and filter (and many others) to work, your site needs to render in standards mode.

Check out Spudley's comment about switching to standards mode:

Switching from quirks mode to standards mode: easier than you'd think. Try adding * {box-sizing:border-box;} to the top of your CSS and <!DOCTYPE html> to the top of your HTML. Voila: standards mode, but with quirks mode layout. – Spudley

LESSCSS escaping filter

Try this:

filter: ~"url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale')";

IE7 not always rendering control invisible when using filter: alpha(opacity:0)

I came, I conquered. I ended up wrapping the fileupload control in it's own div and setting the opacity to 0 on the div rather than the control it's self. This took care of the interment failure of the opacity to render on the control. Thanks for the suggestions guys.

    .realuploadcontainer
    {
        position: absolute;
        top: 0;
        width: 370px;
        right: 0; /* start of transparency styles */
        /* Good browsers */
        opacity: 0.0;
        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        /* IE 5-7 */
        filter: alpha(opacity=10);
        /* Safari 1.x */
        -khtml-opacity: 0.0;
        /* Netscape */
        -moz-opacity: 0.0;
        /* end of transparency styles */
    }
    #realupload
    {
        position: absolute;
        top: 0;
        width: 270px;
        right: 0; /* start of transparency styles */
        z-index: 2; /* bring the real upload interactivity up front */
    } 

    <div class="upload">
        <div class="fakeupload">
           <input type="text" name="fakeupload" id="fakeupload" onkeydown="return (event.keyCode==9);"
                  onchange="javascript: checkFile(); return false;" />
        </div>
        <div class=realuploadcontainer>
            <asp:FileUpload ID="realupload" runat="server" Width="100%" AutoPostback="false" 
OnChange="this.form.fakeupload.value = this.value; javascript: checkFile(); return false;" 
onkeydown="return (event.keyCode==9);" onpaste="return false;" 
ToolTip="Click to browse your computer to select the file you would like to import" />
        </div>
    </div>

IE8 opacity/filter css style not working

As you've mentioned in the comments, your site is build for quirks mode. I assume the elements in question don't have layout.

To get opacity and filter (and many others) to work, your site needs to render in standards mode.

Check out Spudley's comment about switching to standards mode:

Switching from quirks mode to standards mode: easier than you'd think. Try adding * {box-sizing:border-box;} to the top of your CSS and <!DOCTYPE html> to the top of your HTML. Voila: standards mode, but with quirks mode layout. – Spudley

Modify alpha opacity of LESS variable

The site documentation gives the answer:

background: fade(@blue, 20%);

The function name is fade not alpha according to that document.

CSS Less -ms-filter mixin

Updated the function with the following:

.transparency (@colour, @alpha) {
    @alphaColour: hsla(hue(@colour), saturation(@colour), lightness(@colour), @alpha);
    @ieAlphaColour: argb(@alphaColour);

    background-color: @colour; // Fallback for older browsers
    background-color: @alphaColour; 

    // IE hacks
    zoom: 1; // hasLayout
    background-color: transparent\9;
    -ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 8+
        filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 6 & 7
}

Where can I find a cross browser, CSS modifier?

One idea might be looking into the LESS framework. It's a object oriented way of doing CSS. So to set opacity, you'd do something like this:

.opacity (@opacity) {
    opacity: @opacity;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@opacity*100)";
    filter: alpha(opacity=@opacity*100);
}

Then to use it, you'd just "call it" like a function.

.style {
    .opacity(0.7);
}

And the output would be like your second code snippet

Sass mixin for background transparency back to IE8

@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  background-color: transparent;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
  zoom: 1;
}

NOTE: The ie-hex-str is only available in recent versions, not sure when it was introduced though

Lesscss Method with Ie Filter Alpha Opacity CSS