如何依據不同的瀏覽器及版本發佈網站公告

首先感謝 +Pan Kuan 及 +Ken Lo 回報，最近在瀏覽本站文章時可能會出現內容段落異常的情形。依照回報的使用環境分析，很可能是 Chrome 31 這個瀏覽器版本造成的不相容狀況。

而如何發佈這個異常情形的公告，除了擺放位置外，也考慮到是否所有人都需要看到這個公告。最後決定不干擾大多數讀者的閱讀版面，只在 "Chrome 31" 這個瀏覽器版本出現公告。

本文的內容便是分享這個實作心得，並延伸一些不同的應用。 以下先描述異常的現象為何，想直接瞭解語法請跳「二、在特定的瀏覽器版本才顯示公告」

一、本站的異常狀況

根據 Pan Kuan 提供的圖片，本站某些文章會出現類似以下的異常狀況──

由於圖檔很大，按下縮圖可看完整畫面，截圖來自這篇「部落格文章＋特殊文字區塊（一）安裝與使用的完整解決方案」，文章的段落錯亂地很嚴重。

由於本站的內容很大一部份是程式碼教學，因此文章內容大多會穿插程式碼。會引起段落錯亂的情形很可能是 Chrome 31 對語法的解讀不太一樣。為了測試我也下載了 Chrome 31，果真看到異常現象，以下列出有問題的測試系統環境：

1. Pan：

• iOS(蘋果移動裝置)
• Chrome 31

2. Ken：

• Win7(評價不錯)
• Chrome 31

3. Wayne：

• XP(再戰十年)
• Chrome 31 免安裝版、Opera 18

看來兇手就是 Chrome 31 了(Opera 18 其實就是 Chrome 31，一模一樣的引擎)，無論在各種作業系統都一樣。而我在其他的瀏覽器版本，例如 Chrome 28、Opera 15、FireFox、IE，文章都是沒有異狀的。

因此，有看到本篇的讀者，若使用 Chrome 31 而看到不正常的內容，建議暫時先用別的瀏覽器、或比較舊的 Chrome 來瀏覽本站了。我也會盡量找出是什麼語法導致異常，看能否用別的語法來替代。

二、在特定的瀏覽器版本才顯示公告

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. 程式碼內容

如果使用了 Chrome 31 瀏覽本站，可發現在每篇文章的文末，會顯示注意事項。這個訊息如何用語法呈現，請參考以下程式碼──


請對照以上程式碼行號：

F～G：紅色字串 chrome 可替換為其他瀏覽器代號，代表偵測到該瀏覽器才顯示公告。請特別注意字串需使用小寫──

• FireFox：使用 "firefox" 字串
• IE：使用 "msie" 字串
• Safari：使用 "safari" 字串
• Opera：舊版本使用 "opera" 字串；新版本 15 以後需使用 "opr" 字串。

H：藍色字串 31 為版本，代表偵測到瀏覽器該版本才顯示公告，可替換為其他版本數字。

I：橘色字串為公告內容的 HTML 碼。

A、I：兩個綠色字串必須一致，為公告區塊的 id。


2. 程式碼擺放位置

我擺放的位置在文章後面，放在範本中「繼續閱讀」的程式碼後面即可。可參考「Blogger 範本__(三)文章及留言區塊的程式碼」→ 三、文章區塊 → 3. 繼續閱讀。

若想放在其他位置，可參考同一篇文章，或是該系列文章來擺放。

三、應用方式

1. IE 限定

若不限版本、只限定特定瀏覽器，例如偵測到使用者的瀏覽器為 IE 時顯示公告，可參考以下程式碼：

<div id="special_announce"></div>
<script>
//<![CDATA[
(function () {
var info = window.navigator.appVersion.toLowerCase();
if (info.search("msie") > 0) {
document.getElementById("special_announce").innerHTML = "<br/><br/>!! 請注意 !!<br/> 為了得到較佳的顯示效果及閱覽體驗，建議勿使用 IE 來瀏覽網站。";
}
} )();
//]]>
</script>

或是配合偵測瀏覽器版本的程式碼，建議 IE8 以下的瀏覽器升級(原因請見「建議避免使用 IE8(含)以下瀏覽器」)。


2. 不同的瀏覽器顯示不同公告

或許有某些情境，需要依據不同的瀏覽器來顯示不同的公告，那麼「1. IE 限定」的 if 判斷句，可改為以下內容：

if (info.search("msie") > 0) {
document.getElementById("special_announce").innerHTML = "偵測到 IE 時，顯示這一段公告內容";
} else {
document.getElementById("special_announce").innerHTML = "不是 IE 瀏覽器時，顯示這一段公告內容";
}

四、裝飾公告

以上的程式碼，未對公告區塊進行裝修，版面比較不美觀。想要做出與眾不同的公告區塊，需要對 CSS 語法有基本認識，可參考「部落格文章＋特殊文字區塊（二）實作範例__公告、修訂區塊」、「Blogger 首頁公佈欄實作」這兩篇文章，來看看區塊的 CSS 如何設定。

有了概念之後，以本文的程式碼為例，在後台範本的 </head> 之前，插入以下語法，即可讓公告區塊變得美觀：

<style>
#special_announce {
在此放入所有 CSS 語法
}
</style>


更多實用工具：

• 本站使用的 Blogger hack 及工具整理