新增 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 中看到「未知的規則 @import-normalize css(unknownAtRules)」警告,請將
css.lint.unknownAtRules
設定變更為忽略
。
您可以透過專案的 browserslist 控制要使用 normalize.css 的哪些部分。
當 browserslist 為 最後 3 個版本
時的結果
/**
* 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 為 最後 2 個版本
時的結果
/**
* 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 以上