CSS Reset vs Normalize

big boy can code

背景

很久以前沒有針對Browser規定, 所以各自就DIY

user agent stylesheet

讓每一個Browser行為同一，就有Reset / Normalize 需求

Reset

Eric Meyer Reset CSS - 連結🔗

HTML5 Reset Stylesheet - 連結🔗

做法所有的Browser，不一致的地方強制歸零

沒有彈性，不好debug

CSS normalize

框架都有用 - Bootstrap, Foundation, Tailwind

Normalize.css- 連結🔗

為廣泛的HTML提供一般化的樣式

該選那一個？

我的DEMO

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

我的DEMO

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 16px; 
  color: #000;

  @media only screen and (max-width: 720px) {
    font-size: 14px;
  }
}

資源

小事之 CSS Reset 與 CSS normalize  - 連結🔗

Normalize CSS or CSS Reset?! - 連結🔗

[CSS] 跨瀏覽器的樣式重置 reset.css & normalize.css - 連結🔗

Big Boy 訂閱

Big Boy Youtube - 連結🔗

Big Boy Facebook- 連結🔗

Big Boy Website- 連結🔗

CSS Reset VS Normalize

By Danny Huang

Made with Slides.com

CSS Reset VS Normalize

  • 463

More from Danny Huang