リセット用CSSはもういらない、ブラウザのバージョンに適したスタイルを適用して標準化 -PostCSS Normalize

ブラウザごとに異なるデフォルトのスタイルを整える時、リセット用CSSやノーマライズCSSを使用して、すべてのブラウザに共通のスタイルシートを適用している人が多いと思います。

定義したブラウザのリストに基づいて、normalize.cssの必要なスタイルのみを使用できるPostCSS Normalizeを紹介します。

サイトのキャプチャ

PostCSS Normalize -GitHub

normalize.cssについては、下記を参考に。

PostCSS Normalizeは、browserl.istに基づいて必要なnormalize.cssの必要なスタイルのみを使用できます。

例えば、各ブラウザの最新から3つまでのバージョン、IEだと9, 10, 11をサポートする場合は、下記のようになります。

最新から2つまでのバージョン、IEだと10, 11をサポートする場合は、下記のようになります。IE9用のスタイルは適用されません。

「last 3 versions」「last 2 versions」はbrowserl.istの書式です。

PostCSS Normalizeは、どこにインクルードするかを指定しない限り、CSSファイルの先頭に配置されます。

PostCSS Normalizeの使い方

PostCSS Normalize

ビルドツールにPostCSS Normalizeを追加します。

package.jsonにブラウザのリストを追加します。

PostCSSのプラグインとして使用

PostCSSのプラグインとして追加します。

Gulpfileとして使用

Gulpfileとして追加します。

Gruntfileとして使用

Gruntfileとして追加します。

sponsors

top of page

©2018 coliss