CSS リセットの追加

このプロジェクトのセットアップには、PostCSS Normalizeを使用して CSS リセットを追加します。

使用を開始するには、CSS ファイルの任意の場所に @import-normalize; を追加します。一度だけ含める必要があり、重複するインポートは自動的に削除されます。一度しか含める必要がないので、 index.css または App.css に追加するのが適しています。

index.css

@import-normalize; /* bring in normalize.css styles */

/* rest of app styles */

ヒント: VSCodeに「Unknown at rule @import-normalize css(unknownAtRules)」という警告が表示された場合、css.lint.unknownAtRulesの設定をignoreに変更します。

プロジェクトのbrowserslistを使用して、使用するnormalize.cssのどの部分かを制御できます。

browserslistが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;
}

browserslistがlast 2 versionsの場合の結果

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

img {
  border-style: none;
}

ブラウザのサポート

ブラウザのサポートはnormalize.cssがサポートする内容によって決まります。この執筆時点では、以下が含まれます。

• Chrome（最後の 3 つ）
• Edge（最後の 3 つ）
• Firefox（最後の 3 つ）
• Firefox ESR
• Opera（最後の 3 つ）
• Safari（最後の 3 つ）
• iOS Safari（最後の 2 つ）
• Internet Explorer 9+