[ CSS ] 什麼是 CSS Reset?

阿榮
發佈於前端
閱讀時間約 2 分鐘
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。

CSS Reset 的用途

不同的瀏覽器會有自己的預設樣式,這可能會導致我們的網頁在不同瀏覽器中長不一樣,如果針對每個瀏覽器去微調程式碼,光想就覺得很麻煩,也不好維護和管理。為了解決這個問題,就有了「CSS Reset」這個東東。它讓開發者可以從一個統一的基準開始設計網頁,確保所有元素在所有瀏覽器中都有一致的外觀,這樣可以更準確地控制頁面的排版和樣式。常見的 CSS Reset 有 Reset.css 和 Normalize.css,它們通過覆蓋瀏覽器的預設樣式來達到這個目的。


Reset 和 Normalize 比較

Reset.css

徹底清除瀏覽器的所有預設樣式。使用 CSS Reset 後,所有 HTML 元素在各個瀏覽器中會有一個完全統一的起點,可是這也代表很多基本樣式都需要開發者重新設定。

Normalize.css

旨在使瀏覽器的樣式更加一致,同時保留有用的預設值。Normalize.css 會修正瀏覽器之間的差異,同時保持了標準的 HTML 元素樣式,這使得它在不過度重設的情況下提供一個更好的基礎樣式。

聽起來就很像你要搬進一個新家,其中一個是空空的房子 (Reset.css),一個還有留基本家具 (Normalize.css),有的人喜歡從頭全部自己打造,有的人覺得有基本家具比較方便,沒有絕對的好與壞,端看自己的需求。


其他 CSS Reset

除了上述常見的兩個版本外,主流 CSS 框架也會依照框架的需求設計自己的 CSS Reset,例如:Bootstrap 的 Reboot (基於 Normalize),還有 Tailwind 的 Preflight (基於 modern-normalize ),或者我們也可以依照個人或公司的需求設計自己專屬的 CSS Reset。


參考資料

  • chatgpt
主要放程式學習筆記,分享 Creative Coding 相關內容、作品
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
什麼是Tailwind CSS?輕鬆認識Tailwind CSS本篇是Tailwind CSS系列文章的第一篇,就用輕鬆的閒聊方式來認識一下Tailwind CSS,讓你知道它的魅力所在。Tailwind CSS是一種「Utility-First」的CSS設計模式,提供非常多預先定義好的class給開發者使用,直接加在HTML上就能直接使用,協助開發者更快的開發
Thumbnail
avatar
鼻爾蓋茲
2023-10-24
【CSS 教學】position 系列語法彙整,絕對、相對定位的開發、除錯技巧不論是在基礎或是進階的版面排列,幾乎離開不了 position 系列的 CSS 語法,如果對於這些語法不熟悉,要快速完成畫面需求幾乎是不可能的,甚至會延宕整個團隊的開發速度(對,position 語法就是這麽重要)。
Thumbnail
avatar
Vivian Yeh
2021-12-05
CSS 偽元素 before/after source code: E 提供兩個範例,其實before, after就如同字面上的意思,會在前後加上內容。 範例1簡單的在前後加上文字,如下所示,需特別注意,是在div內的範例1前後加上文字。 before/after除了可以加上文字以外,還可以作為裝飾效果。如範例2,利用position調
Thumbnail
avatar
Vic Lin
2021-11-27
CSS grid 達成類似 table colspan, rowspan 排版css display grid可以達到類似table span的排版效果,但還是有些差異,table的span其實是合併,css grid比較像是要佔幾格的意思。 如下程式碼為例,colspan是要往右合併的意思,因此會少一個td。 E css grid colspan sample code:
Thumbnail
avatar
Vic Lin
2021-11-20
css overflow-y: auto not working in iPad筆記一下,原本寫成overflow-y: auto,在windows chrome瀏覽器有y scroll bar,唯獨iPad沒有scroll bar,解法如下: overflow-y: scroll; -webkit-overflow-scrolling: touch; 本筆記參考: 1. h
avatar
Vic Lin
2021-10-07
【CSS 教學】什麼時候該使用 margin 、padding?前端都該要懂的盒模型! 對於前端初學者來說,在切版時會出現很多規則、不規則的網頁區塊,這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。
Thumbnail
avatar
Vivian Yeh
2021-09-28
【CSS 教學】inline、block、inline-block 使用時機講解明明想要某個欄位的寬高為 200px,卻發現自己不知道為什麼怎麼更改都會改不動,又或者寬高更改了,卻沒有辦法與其他元素並列。 上述的狀況,通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯
Thumbnail
avatar
Vivian Yeh
2021-09-07
【自學程式】什麼是CSS選擇器? 學習如何改變網頁內容的樣式與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
avatar
Vivian Yeh
2021-06-10
CSS的大於(>)、加號(+)、取代符號(~)有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用,它們到底有甚麼功用呢?  A.大於符號(>) 大於(>)就是選取底下直接的子元素。 以大於符號(.box > p)和空格(.box p)來做比較,先看以下例子: 使用空格的情況 .box p{ font-size:20px; color
Thumbnail
avatar
哩老師
2020-05-06
CSS選擇器的優先權順序CSS提供許多選擇器類型,當使用不同的選擇器時,套用樣式的優先權也會不同。 A.元素內的(行內)樣式>頁面內的(崁入)樣式>外部載入(串連) 元素內的(行內)樣式 例子: 頁面內的樣式(崁入樣式) 例子: 外部載入(串連) 例子: B.後設定>前設定 最後設定的樣式將蓋過之前設定的樣式 例子:
Thumbnail
avatar
哩老師
2020-05-06