Laggard

Laggard automatically generates safe CSS fallbacks for legacy (<IE9) browsers. It's built on PostCSS.

Laggard does not transpile future CSS syntax. For that use cssnext. Laggard also doesn't do destructive transforms that would require you to use a separate stylesheet for legacy browsers. If that's what you're after use Oldie.

Use Laggard if you just want to easily improve legacy support with your current CSS code.

Contents

• Install
• Usage
• Features
  • Opacity fallbacks
  • Rem unit fallbacks
  • Pseudo element conversions
  • RGBA Hex fallbacks
  • IE vmin to vm fallbacks
  • 3D transform hack for will-change
• Options

Install

Laggard is available on NPM as laggard, install it with NPM or Yarn

$ yarn add laggard --dev

$ npm i laggard --save-dev

Usage

Build tools

Use Laggard as a PostCSS plugin in your build tool of choice.

const postcss = require('postcss');
const laggard = require('laggard');

postcss([ laggard ])

See PostCSS docs for examples for your particular environment.

CLI

Process CSS directly on the command line

$ laggard src/style.css style.css [options]

Stylus

Laggard can be used directly as a Stylus plugin with PostStylus

stylus(css).use(poststylus('laggard'))

See the PostStylus Docs for more examples for your environment.

Features

Opacity fallbacks

/* Before */
.foo {
  opacity: .5;
}

/* After */
.foo {
  opacity: .5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

Rem unit fallbacks

html {
  font-size: 16px;
}

/* Before */
.foo {
  font-size: 2rem;
}

/* After */
.foo {
  font-size: 32px;
  font-size: 2rem;
}

Pseudo element conversions

/* Before */
.foo::before {
  display: block;
}

/* After */
.foo:before {
  display: block;
}

RGBA Hex fallbacks

/* Before */
.foo {
  background: rgba(153, 221, 153, 0.8);
}

/* After */
.foo {
  background: #99DD99;
  background: rgba(153, 221, 153, 0.8);
}

IE vmin to vm fallbacks

/* Before */
.foo {
  width: 50vmin;
}

/* After */
.foo {
  width: 50vm;
  width: 50vmin;
}

3D transform hack for will-change

/* Before */
.foo {
  will-change: transform;
}

/* After */
.foo {
  backface-visibility: hidden;
  will-change: transform;
}

Options

All features in Laggard can be toggled on or off by passing options on initialization. By default all features are set to true.

Option | Type | Default | Description
------------------- | ------- | ------- | -----------
rgba | Boolean | true | Whether to enable RGBA fallbacks opacity | Boolean | true | Whether to enable opacity fallbacks pseudo | Boolean | true | Whether to enable pseudo element conversion vmin | Boolean | true | Whether to enable to enable vmin fallbacks pixrem | Boolean | true | Whether to enable whether to enable rem fallbacks willchange | Boolean | true | Whether to enable native will-change fallbacks reporter | Boolean | false | Whether to log errors from plugins

// Set in build tool, etc.
.laggard({
  // options
})

MIT © Sean King