MSIE filter styles in Less

The filter style property is not only MS specific, but also does not validate. That does not only pose problems if you want to create a valid CSS file, but also when writing Less code. That’s because Less throws an exception every time you write invalid code. Now that’s what I call an effective validator.

But since we live in the real world we really need filter styling. At least for now anyway. And yes, Less can handle MSIE filters although you may have to dig a bit deeper. The following mixin works in .Less (Less for ASP.NET):

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

Happy programming!