蔡逸竹

瀏覽器大戰是從上個世紀末就已經開始的事情了，當時的 IE 和 Netscape 為了互別苗頭，各自發展了許多獨家的功能，而且並沒有玩全遵循 W3C 的標準，使得相同的網頁在不同的瀏覽器之中看起來總是不太一樣。如果是設計複雜的網頁，那差異更是大了，在一個瀏覽器中看起來正常，用另一個瀏覽器來看可能就整個亂掉了，或許你也做過這樣的蠢事，為  IE 和 Netscape 分別製作不同版本的頁面，維護更新的功夫也就變成兩倍。

後來 Netscape 逐漸被 IE 打敗，銷聲匿跡了一陣子，感覺像是天下統一了，網頁設計師可以鬆一口氣。但最近火狐狸（FireFox）又以姿態浴火重生的姿態出現，再加上 Mac 的平價和普及，Safari 的使用者也愈來愈多，還有老字號的 Opera 也想捲土重來。所謂合久必分，瀏覽器又即將出現群雄亂舞的場面。
說了這麼多廢話，到底有沒有什麼方法能夠克服這樣的難題呢？武林寶典 YUI 的 CSS Tool：Reset 和 Font 就此孕育而生。

用法
Reset 和 Font 都是單純的 CSS 檔案，只要先訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。，解壓縮後將裡面的 reset.css 和 font.css 兩個檔案複製到自己的網站中，然後在網頁裡面用下列的語法將它們載入就可以使用了（記得要自行更改檔案路徑）：
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="font.css">
Reset 和 Font 並沒有定義任何新的樣式，其實並不需要真正的去 "使用"，只要照上述的方式將它們載入進來，自動就會套用效果了。

Resetreset.css 的用途是統一各家瀏覽器在顯示 HTML 元素時的差異性，讓你的網頁在不同瀏覽器之中看起來幾乎都一樣，還有將某些預設的樣式消除，像是粗體、斜體、項目符號... 等等，方便你使用自己定義的樣式來編排網頁內容，而不會受到不同瀏覽器各自的預設樣式影響。尤是對於使用 "語意化" (LSM) 方式來撰寫的 HTML 更是有幫助（日後有機會再介紹什麼是 LSM）。
reset.css 作用的效果有下面這些：

• 統一標題字（h1. h2... h6）的字體大小。
• 統一或移除了某些 HTML 元素的邊界、內距和邊框，包括標題字、表單和清單... 等。
• 統一了某些 HTML 元素的字體樣式和粗體，包括 strong, em, cite... 等。
• 移除 fieldset 和 img 的邊框。
• 移除清單項目的樣式。
• 移除瀏覽器對 q 自動產生的引號。
• 將 caption 和 th 內容靠左對齊。

Fontfont.css 主要是針對字體樣式方面來統一瀏覽器之間的差異性。作用的效果有下面這些：

• 提供了一致的字體大小和行高。
• 提供了不同作業系統之間相同的字型家族。
• 支援使用者自行調整瀏覽器字體大小的功能。在調整之後，不同的瀏覽器仍然有一致的字體大小。
• Quirks 模式和 Standards 模式下都能發揮效果。
• 統一 em 單位，有助於彈性縮放版面的網頁開發。

※ 如果你對有興趣研究，也可以開啟這兩個 CSS 檔案來看看裡面寫了些什麼。
以上這些對於 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。 中標示為 A-grade 的瀏覽器版本都有作用，可以有效的消除這些瀏覽器（和版本）之間的差異性。如果你有使用 CSS 在編排網頁內容的話，強烈建議你每一頁都使用這兩個 css 檔案哦！至於 Yahoo! 部落格呢... 當然早就已經偷偷在用啦！