# Reset

### 實務上碰到的問題

我們很常碰到的情況是，當我在 Chrome 設定了某個樣式，但在其他瀏覽器觀看時，該樣式卻是不同的，這是因為每個瀏覽器都會有自己預設的樣式，而這種情況讓設計師與工程師非常懊惱。那既然會有不一樣的情況，那就會有人想辦法設定標準。

### 親身體會一下

在說明方法之前，我們要先親身經歷才會有所體悟。

首先，先請您使用不同瀏覽器，[打開我們為您提供的 HTML 標籤基礎應用頁面](https://codepen.io/neillin1023/pen/RwZyrZj)。

<figure><img src="https://3433349642-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfNa3cQXA0JgS2aeBbzYg%2Fuploads%2Fh6ilmzOS8eK0RnjaD6hq%2F%E6%88%AA%E5%9C%96%202022-11-17%20%E4%B8%8B%E5%8D%882.20.32.png?alt=media&#x26;token=76665d0d-73e0-49f0-937b-46f3e0525022" alt=""><figcaption><p>Chrome</p></figcaption></figure>

<figure><img src="https://3433349642-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfNa3cQXA0JgS2aeBbzYg%2Fuploads%2FezaUkze4cFJxnunCdmF3%2F%E6%88%AA%E5%9C%96%202022-11-17%20%E4%B8%8B%E5%8D%882.20.23.png?alt=media&#x26;token=93877ee3-195e-4927-a91f-1c0584543c14" alt=""><figcaption><p>Safari</p></figcaption></figure>

{% embed url="<https://codepen.io/neillin1023/pen/RwZyrZj>" %}
瀏覽器預設樣式
{% endembed %}

可以開始想像，您如果要在每個瀏覽器都統一設計，可能要寫很多 CSS 去覆蓋原始樣式。

### 歸零

與其要一直寫 CSS 覆蓋，那倒不如在一開始就把所有的瀏覽器預設樣式都清空（其實原理也是覆蓋，但主要是先把樣式都改成最單純簡潔，之後才有利於管理與發展）。

{% hint style="danger" %}
reset 一定是 CSS 的最開頭，再把你想要設定的樣式寫在 reset 後面，這是因為 CSS 有權重、繼承特性，如果 reset 內容不是寫在最開始的地方，將會導致災難性的破版。
{% endhint %}

我們借用一下網路上人家寫好的 reset 檔案應用如下，您可以再次使用不同瀏覽器觀看。

{% embed url="<https://codepen.io/neillin1023/pen/WNyZzdz>" %}
瀏覽器樣式被 reset 過後
{% endembed %}

除了一些比較特殊元件，例如播放器、下拉式選單彈出的視窗是不能更改的，其他都會變得單純，此舉也消除了不同瀏覽器間的差異。

{% hint style="info" %}
網路上有各式各樣的 reset 範本，建議您必須親自觀看完裡面的 CSS 內容，以及考量團隊使用習慣、目的，再決定是否使用或改良。
{% endhint %}

### 小結

reset 是一定要做的，請務必好好的理解，避免之後一直碰到瀏覽器間樣式不統一的問題。

### 作業

尋找網路上各式 reset 做法，並分享優缺點。

### 參考連結

* <https://github.com/nicolas-cusan/destyle.css>
