2022-07-05|閱讀時間 ‧ 約 4 分鐘

Reset CSS 與 Normalize.css

每個HTML元素都會有預設的CSS設定,但由於各家瀏覽器預設值沒有統一,就可能導致同樣的程式碼在不同瀏覽器呈現結果不同,比如在Chrome排版看起來正常,但到Safari看起來卻跑版了。因此,Reset CSS與Normalize.css都是為了解決上述問題衍生出來的方法。

Reset CSS
Reset CSS的原理是把樣式重置,比如把html/body/p/h1~h6的margin, padding, border都歸0,因為預設樣式都不見了,就需要針對每個標籤重新設定,在使用上比較沒彈性,因此就衍生出Normalize.css的解法。
  • 如下圖,是Eric A. Meyer大師寫的Reset CSS片段截圖:

Normalize.css
normalize.css 的原理是保留有價值的預設值,當一個HTML元素在各個瀏覽器的css預設值不同時,normalize.css會盡可能的針對不同瀏覽器進行微調。
由於預設樣式還在,因此在使用上比較方便,就不須將使用到的每個元素都重新設定樣式了。另外,每個樣式調整都有清楚的註解,是為了解決什麼問題才會有這段。
  • normalize.css片段截圖:
normalize.css除了保留預設樣式與微調解決不一致問題以外,還修正了瀏覽器的bug,亦提供了CDN的引用方式,因此被許多知名的framework使用,比如bootstrap即是使用normalize.css來做CSS Reset。

Vue.js使用Normalize.css
  • 在App.vue中的style內import:
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css";
  • 在App.vue中的style通常不會設scoped,因此css會影響全局。

本筆記參考:
  1. https://www.796t.com/article.php?id=91417
  2. http://www.flycan.com/article/css/reset-css-562.html
  3. https://andy6804tw.github.io/2021/05/23/css-reset/
  4. https://israynotarray.com/css/20210807/3641451940/
  5. https://rollerblade.tw/css-reset-css-normalize/
  6. https://www.796t.com/p/640744.html
  7. https://ithelp.ithome.com.tw/articles/10196528
  8. https://stackoverflow.com/questions/51314997/how-to-add-cdn-css-file-to-vue-cli-3-project
  9. https://necolas.github.io/normalize.css/
  10. https://meyerweb.com/eric/tools/css/reset/

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.