What is postcss-normalize?
The postcss-normalize package integrates the normalize.css library with PostCSS, allowing developers to include normalize.css in their projects as a PostCSS plugin. This package helps in ensuring that browsers render all elements more consistently and in line with modern standards. It automatically imports the parts of normalize.css that you need, based on your project's browserlist configuration.
What are postcss-normalize's main functionalities?
Browser normalization
Automatically includes the relevant parts of normalize.css based on the browsers specified in your project's browserlist. This feature ensures that your CSS behaves more consistently across different browsers.
postcss([ require('postcss-normalize')() ])
Customizable through browserlist
Allows customization of which parts of normalize.css to include by specifying browser versions in the browserlist. This helps in tailoring the normalization to only the necessary browsers, potentially reducing the CSS size.
postcss([ require('postcss-normalize')({ browsers: 'last 2 versions' }) ])
Other packages similar to postcss-normalize
sanitize.css
Similar to postcss-normalize, sanitize.css is a CSS library that provides consistent, cross-browser default styling for HTML elements. However, unlike postcss-normalize, it does not automatically adjust based on browserlist and must be included manually in your CSS.
modern-normalize
modern-normalize is another CSS reset library that normalizes styles for a wide range of elements. It is similar to postcss-normalize but does not integrate directly with PostCSS as a plugin and must be included separately in your project.
PostCSS Normalize
PostCSS Normalize lets you use the parts of normalize.css you need, based
on your project’s browserlist.
Example:
audio,
video {
display: inline-block;
}
img {
border-style: none;
}
img {
border-style: none;
}
PostCSS Normalize will put itself at the beginning of your CSS file, unless
you dictate where it should be included:
@import-normalize;
Duplicate @import-normalize
rules will be removed for your convenience. Only
the first instance will be replaced.
PostCSS Normalize uses the non-opinionated version of normalize.css.
Usage
Add PostCSS Normalize to your build tool:
npm install postcss-normalize --save-dev
Add a browserlist entry in your package.json:
{
"browserslist": "last 2 versions"
}
Node
Use PostCSS Normalize to process your CSS:
require('postcss-normalize').process(YOUR_CSS, { });
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use PostCSS Normalize as a plugin:
postcss([
require('postcss-normalize')({ })
]).process(YOUR_CSS, );
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use PostCSS Normalize in your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('postcss-normalize')({ })
])
).pipe(
gulp.dest('.')
);
});
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use PostCSS Normalize in your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('postcss-normalize')({ })
]
},
dist: {
src: '*.css'
}
}
});