2009年1月28日

設定風格表檔案

由於不同廠商的瀏覽器展現出來的效果會有差異,因此網頁設計師發展出 CSS hacks 來解決跨瀏覽器的差異性。在此筆者用 javascript 調整 LINK 元素的 HREF 屬性;達成不同瀏覽器載入不同風格表檔案。

使用此法,首先必須建立不同瀏覽器的外部風格表檔案。這個測試的檔案內容很簡單。例如 firefox.css 的內容是:

.cls {background:black; color:red}

只此一行。其它的瀏覽器檔案有 default.css, ie6.css, google.css, safari.css。其中的差別只是將 color 改成不同顏色。

然後將下面這段指令放在 HEAD 區塊間:

<LINK id='css' href="default.css" rel="stylesheet" type="text/css">
<script type='text/javascript'>
var o=document.getElementById('css');
if( navigator.vendor != undefined )
{
  if( navigator.buildID )
    o.href='firefox.css';  // Firefox
  else 
  {
    var google=/^google/gi;
    var safari=/^apple/gi;
    if( google.test( navigator.vendor ) )
      o.href='google.css';  //Google Chrome
    else if( safari.test( navigator.vendor ) )
           o.href='safari.css';  //Apple Safari
  }
}
else
{
  var ie6=/msie 6/gi;
  if( ie6.test( navigator.appVersion ) )
    o.href='ie6.css';  //ie6
}
</script>

上面的程式,使用 navigator 物件的特徵,分辨不同的瀏覽器。下面是測試文字:

  • 程式用法:

    <div class=cls>
    此段文字在 Firefox 是紅色。Google 是綠色。Safari 是藍色。
    IE6 是黃色。
    </div>

  • 執行結果:

    此段文字在 Firefox 是紅色。Google 是綠色。Safari 是藍色。 IE6 是黃色。

此測試在個人電腦成功執行,但是部落格不能使用 LINK 載入風格表檔案,所以看不出效果。此次測試只做到 IE6;下次補充 IE7, IE8。


©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。