laggard

laggard

Automagical CSS fallbacks for legacy browsers, built on PostCSS.

Laggard is a pack of community PostCSS plugins that insert common CSS property fallbacks for legacy browsers (<IE8). For a full list of plugins and attributions, have a look at CONTRIBUTORS.md.

Laggard does not transpile future CSS syntax. For that use cssnext, which also includes most of these legacy fallbacks. Use Laggard if you just want to easily improve legacy support with current CSS code.

--

Install

$ npm install --save laggard

Usage

Build tools

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

var postcss = require('postcss'),
    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 ms-filter 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;
}

Rem unit fallbacks

html {
  font-size: 16px;
}

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

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

PseudoElement 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.

Feature toggles:

• rgba
• opacity
• pseudo
• vmin
• pixrem
• willchange

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

--

License

MIT © Sean King