postcss-normalize

PostCSS Normalize

PostCSS Normalize lets you use the parts of normalize.css you need, based on your project’s browserlist.

Example:

/* { "browserlist": ["last 3 versions"] } */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/* { "browserlist": ["last 2 versions"] } */

/**
 * Remove the border on images inside links in IE 10-.
 */

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, { /* options */ });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Normalize as a plugin:

postcss([
	require('postcss-normalize')({ /* options */ })
]).process(YOUR_CSS, /* options */);

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')({ /* options */ })
		])
	).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')({ /* options */ })
			]
		},
		dist: {
			src: '*.css'
		}
	}
});

Similar packages

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.