Google analytics script

Latest jQuery CDN with code tiggling.

Saturday, 30 March 2013

LESS gradient mixin with fallback for IE

As you could read in my last post (long time ago) I've rather used SCSS over LESS but when I upgraded my Visual Studio to version 2012 I decided not to install Mindscape's addin as VS already comes with support for LESS, CoffeeScript and TypeScript via Web Essentials addin. So I started writing my usual set of mixins in LESS. It seemed simple and straight forward at first until I started writing .gradient mixin that should somewhat also support older non-CSS3 browsers like outdated IE8.

Gradient mixin requirements

CSS3 gradient support is great but when creating a public facing webapp I usually want to support old(er) browsers so they'd display something in place of those nifty looking gradients. I opt for a flat background colour that is a mix between first and last gradient colour. But that's not all. Here are my gradient mixin requirements:

  1. support CSS3 gradients using background-image style property
  2. support prefixed variations i.e. -webkit
  3. graceful degradation for older non-CSS3 browsers by providing a flat colour calculated from first and last gradient definition colour as vast majority of gradients are two coloured
  4. provide mixin parameters in the same way as we provide them for actual CSS so without resorting to escaped ~"..." LESS notation
  5. all fallbacks for flat colours have to be automatically calculated by the mixin instead of providing it manually