關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 356393

    累積人氣

  • 24

    今日人氣

    3

    追蹤人氣

Cross-browser 跨瀏覽器議題 Why Css Reset? ——Vanilla CSS & normalize.css 的介紹

Vanilla CSS

暫時就叫它香草CSS好了。這個東西,主要就是解決前面說到,CSS Reset後,忘記或漏掉重定義特定tag的長相,導致開發一半的網頁後面需花費額外的時間再去維護。

咱們來看看Vanilla CSS的特點

  • It’s a great starting point for any website or web app
  • You know you won’t discover horrible Times New Roman on that one cite tag you threw in
  • You added your reset – now you’ve got to build it back up again

第三點恰好呼應到剛才說到的:在你RESET之後,你得開始撰寫你自己的Css code

Vanilla CSS包含了一個CSS檔及一個HTML檔,其中CSS檔案將所有HTML預設Tag分類列出,屬性值留空(等待著你去寫)

What Vanilla CSS looks like

而HTML檔案則是將這些基本的Tag全部用上,讓你在事後可以查看自己是不是有將所有的Tag外觀設置好,非常貼心。

normalize.css project

上段提到的Vanilla CSS是將所有HTML TAG列出,讓我們自己撰寫CSS Code,在那之前是必須用css reset的;而normalize.css則有點不同。它主要將各大瀏覽器互異的地方找出來,並加以重置,可以說是「重點式的css reset」。它解決了像是margin, padding 被設為 0 之後,當你只是純粹想寫一份簡單的網頁時,ul, ol, dl, p 等 tag render 時的不便。另外是,和CSS reset是不需要混用的(無意義),二者擇一即可。

該專案的位址在這裡

結語

不管是CSS Reset or normalize.css,主要目的當然皆是為了網頁開發之前,有個共同的基準。舉個例子就像是你要蓋新房子之前,得先將地鏟平,鋪好地基,CSS reset or normalize.css的作用就在於打好地基,不然各家瀏覽器針對HTML特有的定義Style會讓你往後房子蓋一半時吃足苦頭,這也是現在F2E必備技能 Cross-browser issues的一部分。

相簿設定
標籤設定
相簿狀態