リセット用CSSはもういらない、ブラウザのバージョンに適したスタイルを適用して標準化 -PostCSS Normalize
Post on:2017年6月1日
sponsors
ブラウザごとに異なるデフォルトのスタイルを整える時、リセット用CSSやノーマライズCSSを使用して、すべてのブラウザに共通のスタイルシートを適用している人が多いと思います。
定義したブラウザのリストに基づいて、normalize.cssの必要なスタイルのみを使用できるPostCSS Normalizeを紹介します。
normalize.cssについては、下記を参考に。
PostCSS Normalizeは、browserl.istに基づいて必要なnormalize.cssの必要なスタイルのみを使用できます。
例えば、各ブラウザの最新から3つまでのバージョン、IEだと9, 10, 11をサポートする場合は、下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* { "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; } |
最新から2つまでのバージョン、IEだと10, 11をサポートする場合は、下記のようになります。IE9用のスタイルは適用されません。
|
1 2 3 4 5 6 7 8 9 |
/* { "browserlist": ["last 2 versions"] } */ /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } |
「last 3 versions」「last 2 versions」はbrowserl.istの書式です。
PostCSS Normalizeは、どこにインクルードするかを指定しない限り、CSSファイルの先頭に配置されます。
|
1 |
@import-normalize; |
PostCSS Normalizeの使い方
PostCSS Normalize
ビルドツールにPostCSS Normalizeを追加します。
|
1 |
npm install postcss-normalize --save-dev |
package.jsonにブラウザのリストを追加します。
|
1 2 3 |
{ "browserslist": "last 2 versions" } |
PostCSSのプラグインとして使用
PostCSSのプラグインとして追加します。
|
1 2 3 |
postcss([ require('postcss-normalize')({ /* options */ }) ]).process(YOUR_CSS, /* options */); |
Gulpfileとして使用
Gulpfileとして追加します。
|
1 2 3 4 5 6 7 8 9 10 11 |
var postcss = require('gulp-postcss'); gulp.task('css', function () { return gulp.src('./src/*.css').pipe( postcss([ require('postcss-normalize')({ /* options */ }) ]) ).pipe( gulp.dest('.') ); }); |
Gruntfileとして使用
Gruntfileとして追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ postcss: { options: { use: [ require('postcss-normalize')({ /* options */ }) ] }, dist: { src: '*.css' } } }); |
sponsors
