Skip to content
Automatically generate CSS fallbacks for legacy browsers, built on PostCSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
test
.eslintrc
.gitignore
.travis.yml
CHANGELOG.md
CONTRIBUTORS.md
README.md
index.js
package.json
yarn.lock

README.md

Laggard

NPM version Downloads Build Status

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

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

$ yarn add laggard --dev
$ npm i laggard --save-dev

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;
}

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.

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

You can’t perform that action at this time.