Use the opacity property in older Internet Explorer
npm install postcss-unopacity[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Licensing][lic-img]][lic-url]
[![Changelog][log-img]][log-url]
[![Gitter Chat][git-img]][git-url]
[UnOpacity] lets you use the opacity property in older Internet Explorer.
``css
/ before /
.figure {
opacity: .5;
}
/ after /
.figure {
filter: alpha(opacity=50);
}
`
Add [UnOpacity] to your build tool:
`bash`
npm install postcss-unopacity --save-dev
#### Node
Use [UnOpacity] to process your CSS:
`js`
require('postcss-unopacity').process(YOUR_CSS, { / options / });
#### PostCSS
Add [PostCSS] to your build tool:
`bash`
npm install postcss --save-dev
Use [UnOpacity] as a plugin:
`js`
postcss([
require('postcss-unopacity')({ / options / })
]).process(YOUR_CSS, / options /);
#### Gulp
Add [Gulp PostCSS] to your build tool:
`bash`
npm install gulp-postcss --save-dev
Use [UnOpacity] in your Gulpfile:
`js
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-unopacity')({ / options / })
])
).pipe(
gulp.dest('.')
);
});
`
#### Grunt
Add [Grunt PostCSS] to your build tool:
`bash`
npm install grunt-postcss --save-dev
Use [UnOpacity] in your Gruntfile:
`js
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-unopacity')({ / options / })
]
},
dist: {
src: '*.css'
}
}
});
`
#### browsers
Type: String | Array null
Default:
A list of browsers you want to target in your project. If no older Internet Explorer browsers are specified, this plugin will not make any changes to your CSS.
`js`
require('postcss-unopacity')({
browsers: ["> 1%", "last 2 versions", "Firefox ESR"]
})
This may also be defined in package.json.
`json`
{
"browserslist": ["> 1%", "last 2 versions", "Firefox ESR"]
}
#### method
Type: String 'replace'
Default:
##### replace
Replace any opacity property with a fallback.
`css
/ before /
.figure {
opacity: .5;
}
/ after /
.figure {
filter: alpha(opacity=50);
}
`
##### copy
Copy any opacity property with a fallback.
`css
/ before /
.figure {
opacity: .5;
}
/ after /
.figure {
filter: alpha(opacity=50);
opacity: .5;
}
`
##### warn
Warn when an opacity property is used.
#### prefixed
Type: Boolean false
Default:
##### true
Use an -ms-filter property as a fallback.
`css
/ before /
.figure {
opacity: .5;
}
/ after /
.figure {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
`
##### false
Use a filter property as a fallback.
`css
/ before /
.figure {
opacity: .5;
}
/ after /
.figure {
filter: alpha(opacity=50);
}
``
[npm-url]: https://www.npmjs.com/package/postcss-unopacity
[npm-img]: https://img.shields.io/npm/v/postcss-unopacity.svg
[cli-url]: https://travis-ci.org/jonathantneal/postcss-unopacity
[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-unopacity.svg
[lic-url]: LICENSE.md
[lic-img]: https://img.shields.io/npm/l/postcss-unopacity.svg
[log-url]: CHANGELOG.md
[log-img]: https://img.shields.io/badge/changelog-md-blue.svg
[git-url]: https://gitter.im/postcss/postcss
[git-img]: https://img.shields.io/badge/chat-gitter-blue.svg
[UnOpacity]: https://github.com/jonathantneal/postcss-unopacity
[PostCSS]: https://github.com/postcss/postcss
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss