GitHub - csstools/oldie: Compile CSS compatible with old Internet Explorer (original) (raw)

Oldie

Oldie tranforms CSS to be compatible with old Internet Explorer.

If you’re like me, you stopped supporting IE8 years ago. Yet, here you are, satisfying another client that somehow managed to get this requirement past you.

Flatten Media Queries

Resolve media queries for a desktop experience.

/* before */

body { font-size: 12px; }

@media screen and (max-width: 767px) { body { font-size: 16px; } }

@media screen and (min-width: 768px) { body { color: #444; } }

/* after */

body { font-size: 12px; }

body { color: #444; }

Replace :root

Swap :root selectors with html selectors.

/* before */

:root { background-color: black; color: white; }

/* after */

html { background-color: black; color: white; }

Reduce calc()

Reduce calc() references whenever possible.

/* before */

.banner { font-size: calc(16px * 3); }

/* after */

.banner { font-size: 48px; }

Resolve rem

Resolve rem values as standard pixels.

/* before */

.container { margin-top: 2.5rem; }

/* after */

.container { margin-top: 40px; }

Uphold opacity

Swap opacity properties with IE8 compatible filter properties.

/* before */

.figure { opacity: .5; }

/* after */

.figure { filter: alpha(opacity=50); }

Patch pseudo-elements

Swap :: selectors with IE8 compatible : selectors.

/* before */

a::after { content: " (" attr(href) ")"; }

/* after */

a:after { content: " (" attr(href) ")"; }

Retain rgba colors

Swap rgba values with IE8 compatible hex values and filter properties.

/* before */

.hero { background-color: rgba(153, 221, 153, .8); border: solid 1px rgba(100, 102, 103, .3); }

/* after */

.hero { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#8099dd99',endColorstr='#8099dd99'); border: solid 1px #646667; }

Forget :not

Remove :not() selectors while preserving the other selectors in a rule.

/* before */

.a, .b:not(.c), d { color: red; }

/* after */

.a, .d { color: red; }

Salvage :nth-child

Swap :nth-child selectors with :first-child.

/* before */

.container > p:nth-child(4).specific > span { font-weight: bold; }

/* after */

.container > :first-child + * + * + p.specific > span { font-weight: bold; }

Plugins

Oldie is powered by the following plugins:

• PostCSS Calc
• PostCSS UnMQ
• PostCSS UnRoot
• PostCSS UnNth
• PostCSS UnNot
• PostCSS UnOpacity
• PostCSS UnRGBA
• PostCSS Pixrem
• PostCSS Pseudo Elements

Some of these plugins have more features than are described here. Visit their project pages to learn more about them individually.

Usage

Follow these steps to use Oldie.

Add Oldie to your build tool:

npm install oldie --save-dev

Node

require('oldie')({ /* options */ }).process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Oldie as a PostCSS plugin:

postcss([ require('oldie')({ /* options */ }) ]);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Oldie within your Gulpfile:

var postcss = require('gulp-postcss');

gulp.task('css', function () { return gulp.src('./css/src/.css').pipe( postcss([ require('oldie')({ / options */ }) ]) ).pipe( gulp.dest('./css') ); });

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Oldie within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({ postcss: { options: { processors: [ require('oldie')({ /* options / }) ] }, dist: { src: 'css/.css' } } });

Options

Each plugin’s options may be configured by targeting the plugin’s namespace. Any plugins may be disabled by giving them a disable property.

Example:

require('oldie')({ rgba: { filter: true }, rem: { replace: false }, unmq: { disable: true } })