Handling the proprietary CSS filter attribute in dotless

I’m a big fan of the LESS CSS library – a fantastic way of simplifying the process of writing CSS by offering a number of basic programming capabilities such as variables, functions and mixins.

There are a number of implementations available for different platforms, and the purpose of this blog post is to highlight a feature in dotless – the .NET implementation – which I’ve had to call on occasionally but often forget about in the interim, so I’m hoping this will stop me from forgetting 🙂

From time to time (when needs absolutely must) it’s necessary to use the proprietary filter attribute to accommodate IE (much better if you can use something like CSS3 PIE but like I say, sometimes needs must). For example:

.some-class {
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=0, Color='#000');
}

However, because of the abnormal syntax this involves, it causes parsing issues with dotless. I’ve read about a number of ways of working around this, but the only one I’ve found to be properly reliable (e.g. including the ability to use variables within the filter) is the use of dotless’ formatString function (which appears to be undocumented).

This has a similar signature to String.Format i.e. it takes as its first argument a string containing placeholders where values need inserting ({0}, {1} etc) followed by an argument for each value to be substituted. So using the above example, your CSS would look something like this:

.some-class {
    filter: formatString("progid:DXImageTransform.Microsoft.Shadow(Strength={0}, Direction={1}, Color={2})", @strength, @direction, @color);
}

Or perhaps more usefully, making use of a mixin:

.some-class(@strength = 15, @direction = 0, @color = '#000') {
    filter: formatString("progid:DXImageTransform.Microsoft.Shadow(Strength={0}, Direction={1}, Color={2})", @strength, @direction, @color);
}

Obviously formatString can be used for much more than this particular scenario, it’s usefulness isn’t restricted to working around annoying proprietary CSS attributes that really are way past their sell by date…