Re: [問題] 不同瀏覽器的問題

[liaosankai (低溫烘焙)]

※ 引述《d5123 (dd)》之銘言：
:  我現在要把只支援IE的網頁，改成可支援IE. FireFox. Chrome，
:  目前毫無頭緒...請問有啥相關書籍或資料可供參考?
:  謝謝。

以下只是建議(^_^)，僅供參考，若有誤之處，
還煩請各路高手口下留情，感謝大家
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如果要讓一個網站同時可以在IE、Firefox、Chrome、等其它瀏覽器
可以正常瀏覽，個人通常的作法是

1. 先以驗證工具較多的firefox為基礎，開發初版的CSS檔

   @ HTML驗證附加元件
     https://addons.mozilla.org/zh-TW/firefox/addon/249
   @ CSS驗證附加元件
     https://addons.mozilla.org/zh-TW/firefox/addon/2289

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
2. 先載入reset.css(統一瀏覽器的初始值)再進行CSS的設計

   @ reset.css參考
     http://developer.yahoo.com/yui/reset/

   或是可以考慮使用CSS freamwork之類來輔助開發
   CSS freamwork就煩請有興趣者自行研究一下，在此略過

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
3. 設計一個符合W3C並且合用的CSS，存檔為style_ff.css
   你也可以用資料夾來做分類，例如 firefox/style.css

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
4. 再將此CSS複製一份，並重新命名style_ie8.css、style_chrome.css版本等
   或是一樣資料夾ie8/style.css、chrome/style.css的方法

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
5. 以程式判斷使用者目前使用的瀏覽器去決定載入哪個CSS檔

   若以PHP為範例，你可能需要去剖析$_SERVER['HTTP_USER_AGENT']的資料
   或是使用別人已寫好的函式庫去

   @ 捕捉剖析瀏覽器參考：
     http://phpsniff.sourceforge.net/

   若你使用了PHP的Kohana的freamwork

   @ 請參考此網頁的最後面
     http://docs.kohanaphp.com/core/kohana

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
6. 開啟各別瀏覽器，檢視並對各版本的CSS進行微調設計
   需微調的幅度可能要依初版設計CSS的功力決定

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
7. 提醒以市場佔的瀏覽器為開發優先：IE→FF→Safari→Chrome

   @ 瀏覽器市場率參考：
     http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1

   另外Chrome據消息是和Safari同樣核心，或許在CSS上的設計可以通用
   不過尚未證實，請自行進行實驗

   @ 關於Chrome使用的核心
     http://www.macgrass.com/permalink/2273

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

好處是

1. 要設計一個同時可以符合所有瀏覽器的CSS，必需有一定的CSS功力
   需要有大量經驗累積才有辦法設計出一個通用的CSS，若前無此人材
   或是研究時間，分別載入可減少CSS設計上調整的限制

壞處是

1. 若要修改CSS設計，那麼必需同時去微調所有版本的CSS
2. 必需透過程式去決定載入正確版本的CSS


上部分僅討論CSS部分，關於JS相容性的問題，可以用JS的freamwork開發
來解決這問題。目前JS的freamwork相當多，個人比較建議的使用的有

   @ jQuery：直覺易用擁有相當多plugin、建議想快速達成特定效果的人使用
     http://jquery.com/

   @ 模擬物件方式較為完整，且較好維護的Mootool，建議習慣OO的人使用
     http://mootools.net/

   @ 常使用jQuery的開發者，也可以看看此篇文章，多一些不同角度的看法
     http://jqueryvsmootools.com/index_cn.html


結論：我們都是瀏覽器大戰的受害者T_T

--
歡迎來我的網誌看看
@ http://liaosankai.pixnet.net/blog

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 123.240.37.83
推 fotofolio:哇...動用到php判斷是什麼複雜的css..XD
→ liaosankai:改用JS去判斷也是可以滴，不然就是全部都載入XD
→ liaosankai:PHP判斷只是瀏覽器，不是CSS啦，哈…
推 flamerecca:一般這裡習慣上用JS吧 減少server負擔
→ flamerecca:不過這就是個人偏好 反正做的出來就好XD
→ arrack:也有人偏好純CSS的解決方案
推 chph:裝Web Developer就可以了, 1.的那兩個元件有點多餘
推 kyork:不管裝哪個都是要連到W3C...XD