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…

This entry was posted in Tips and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. Posted March 13, 2014 at 10:21 am | Permalink

    Hi there! I just wanted to ask if you ever have any issues with hackers?
    My last blog (wordpress) was hacked and I ended up losing months of hard work
    due to no data backup. Do you have any solutions to prevent hackers?

  2. Posted April 13, 2014 at 11:46 pm | Permalink

    Nice respond in return of this query with genuine arguments and explaining all about that.

    Take a look at my blog … things to do to help get pregnant (Jerrell)

6 Trackbacks

Leave a Reply