Reset

這麼多瀏覽器,有他們各自的預設樣式,該怎麼辦?

實務上碰到的問題

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

親身體會一下

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

首先,先請您使用不同瀏覽器,打開我們為您提供的 HTML 標籤基礎應用頁面

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

歸零

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

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

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

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

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

小結

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

作業

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

參考連結

Last updated