Wednesday, July 25, 2012

Minify now supports conditionals

CSS can be a real pain since each browser seems to have it's own flavor of the W3C Standard.  For instance, if you want to rotate your text you would have to do something like the following:
.w_rotate_up {
    /*firefox*/
    -moz-transform: rotate(270deg);
    -moz-transform-origin: bottom left;
    /*safari*/
    -webkit-transform: rotate(270deg);
    /*opera*/
    -o-transform: rotate(270deg);
    /*msie*/
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
}

Having to have separate tags in your CSS means that much of the CSS you are pushing just gets ignored by the browser anyway.  To solve this I have added CSS Conditionals into minify_css.php.  The supported conditional operators are: lt, gt, lte, gte, eq, not.  The supported browsers are firefix,msie,chrome,safari,opera.  To make a CSS line conditional simply put brackets around the contidion at the beginning of the css line.  For instance:
  • not msie: [not msie]
  •  to only show for msie: [msie]
  • to only show for msie 6 [msie eq 6]
  • to only show for msie greater than 6 [msie gt 6]
  • to ony show for msie less than or equal to 6 [msie lte 6]
Here is how the above code would look before it was processed by a Firefox browser:
.w_rotate_up {
    /*firefox*/
    [firefox]-moz-transform: rotate(270deg);
    [firefox]-moz-transform-origin: bottom left;
    /*safari*/
    [safari]-webkit-transform: rotate(270deg);
    /*opera*/
    [opera]-o-transform: rotate(270deg);
    /*msie*/
    [msie lt 8]filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    [msie gte 8]-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    }
and here is how it will look like to the Firefox browser
.w_rotate_up {
    -moz-transform: rotate(270deg);
    -moz-transform-origin: bottom left;
    }
 and in Internet Explorer:
.w_rotate_up {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    }

Hope this helps! It has helped me.


No comments:

Post a Comment