oldie
v1.3.0
Published
Transform CSS into something compatible with older Internet Explorer
Downloads
2,461
Readme
Oldie
Oldie tranforms CSS to be compatible with old Internet Explorer.
<!--[if gt IE 8]><!--><link href="style.css" rel="stylesheet"><!--<![endif]-->
<!--[if lte IE 8]><link href="style.oldie.css" rel="stylesheet"><![endif]-->
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
}
})