星期五, 11月 23, 2007

消彌瀏覽器之間的樣式差異:YUI Reset 和 Font

消彌瀏覽器之間的樣式差異:YUI Reset 和 Font

分類:YUI
2006/11/08 18:48

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

後來 Netscape 逐漸被 IE 打敗,銷聲匿跡了一陣子,感覺像是天下統一了,網頁設計師可以鬆一口氣。但最近火狐狸(FireFox)又以姿態浴火重生的姿態出現,再加上 Mac 的平價和普及,Safari 的使用者也愈來愈多,還有老字號的 Opera 也想捲土重來。所謂合久必分,瀏覽器又即將出現群雄亂舞的場面。

說了這麼多廢話,到底有沒有什麼方法能夠克服這樣的難題呢?武林寶典 YUI 的 CSS Tool:Reset 和 Font 就此孕育而生。

用法

Reset 和 Font 都是單純的 CSS 檔案,只要先下載 YUI,解壓縮後將裡面的 reset.cssfont.css 兩個檔案複製到自己的網站中,然後在網頁裡面用下列的語法將它們載入就可以使用了(記得要自行更改檔案路徑):

<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="font.css">

Reset 和 Font 並沒有定義任何新的樣式,其實並不需要真正的去 "使用",只要照上述的方式將它們載入進來,自動就會套用效果了。

Reset

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

reset.css 作用的效果有下面這些:

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

Font

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

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

※ 如果你對有興趣研究,也可以開啟這兩個 CSS 檔案來看看裡面寫了些什麼。

以上這些對於 瀏覽器支援表 中標示為 A-grade 的瀏覽器版本都有作用,可以有效的消除這些瀏覽器(和版本)之間的差異性。如果你有使用 CSS 在編排網頁內容的話,強烈建議你每一頁都使用這兩個 css 檔案哦!至於 Yahoo! 部落格呢... 當然早就已經偷偷在用啦!



張貼留言