Conditional Comments [if IE] : ie 專用 (ie only) 條件式 html 註解的語法

  • 說明： ie 專用語法 (ie only) 。運用 html 註解形式 <!-- -->，在註解間加入特殊的語法，可使 ie 將該註解內容反視為有效語法，甚至可自動區分不同版本 ie 來解讀。而非 ie 瀏覽器 (firefox, opera, safari, google chrome …) 一律視其為註解，所以同時也有了區隔不同瀏覽器的功能，有點像是 html hacks。 ie5 就已開始支援。
  • 適合：有設計網頁及撰寫 html 語法經驗者。
  • 難度：等級3
  • 更新：
<!--[if IE]>內容<![endif]-->
內容只有 ie 會顯現。
<!--[if IE 6]>內容<![endif]-->
內容只有 ie6 會顯現。
<!--[if lt IE 7]>內容<![endif]-->
內容只在比 ie7 更舊的版本會顯現。 [參考說明]
<!--[if gte IE 8]>內容<![endif]-->
內容只有 ie8 及其較新版本會顯現。 [參考說明]
<!--[if !IE]>-->內容<!--<![endif]-->
內容除 ie 以外都會顯現。 [參考說明]
<!--[if !(IE 6)]>內容<![endif]-->
內容除 ie6 以外的 ie 都會顯現。 [參考說明]
<!--[if (gte IE 6)&(lt IE 8)]>內容<![endif]-->
內容只從 ie6 以後及 ie8 之前版本會顯現。 [參考說明]
<!--[if (IE 7)|(IE 6)]>內容<![endif]-->
內容只有 ie7 及 ie6 會顯現。 [參考說明]
<!--[if gte IE 7]><!-->內容<!--<![endif]-->
內容在 ie7 及其較新版本，以及 ie 以外都會顯現。 [參考說明]

藍色部分 <!-- 或 --> 為標準 html 註解的起始或結尾；除此之外，紅色部分即為 ie 能辨識的特殊語法。所以，只有 ie 會依據紅字所表示的條件來判斷呈現與否，而其它瀏覽器依標準一律當成是註解。

語法中空格不能任意省去，尤其注意 IE 之後，版本編號前的空格。除 IE 必須大寫，其餘英文字母都是小寫。註解的結尾語法都是 <![endif]--> 。

思考 - 條件式註解的應用

運用不同條件可在不同版本呈現的原理，我們可以做出提供使用者，類似瀏覽器版本線上偵測的範例 ：

xhtml 語法
<!--[if IE]>
 <p>您正在使用的瀏覽器為 ie 。</p>
<![endif]-->
<!--[if IE 6]>
 <p>您正在使用的瀏覽器為 ie6 。</p>
<![endif]-->
<!--[if IE 7]>
 <p>您正在使用的瀏覽器為 ie7 。</p>
<![endif]-->
<!--[if lt IE 7]>
 <p>您正在使用的瀏覽器為比 ie7 較舊的版本。</p>
<![endif]-->
<!--[if gte IE 8]>
 <p>您正在使用的瀏覽器為 ie8 或比 ie8 更新的版本。</p>
<![endif]-->
<!--[if !IE]>-->
 <p>您正在使用的瀏覽器不是 ie 。</p>
<!--<![endif]-->
<!--[if !(IE 6)]>
 <p>您正在使用的瀏覽器為 ie ，但不是 ie6 。</p>
<![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]>
 <p>您正在使用的瀏覽器為 ie5.5 或 ie6 。</p>
<![endif]-->
<!--[if (IE 7)|(IE 6)]>
 <p>您正在使用的瀏覽器為 ie7 或 ie6 。</p>
<![endif]-->
<!--[if gte IE 7]><!-->
 <p>您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。</p>
<!--<![endif]-->
上面的語法實際呈現如下，請使用不同瀏覽器測試。

您正在使用的瀏覽器不是 ie 。

您正在使用的瀏覽器為 ie7 或比 ie7 更新的版本，或不是使用 ie 。

ie Conditional Comments 幾乎可以包圍任何 html 內容，包括整個元素 (elements) 或單獨的標籤 (tags) ；這屬於 html 語法，只適用在 html 語法內，出現在其它如 css 語法裡或 javascript 程式裡是會錯誤的。有時候我們因某些狀況不得不使用 ie 自創專有的語法，又必須符合 w3c 標準語法規範，或是需要避開 ie 的錯誤，又為了避免與其它瀏覽器發生衝突，條件式註解就成了有用的技巧。

條件註解當作 css hacks

僅供 ie6 及其較舊版套用的樣式清單檔
<!--[if lte IE 6]>
 <link href="style_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

條件註解讓 javascript 在指定的瀏覽器執行

僅供 ie 執行的 javascript 程式檔
<!--[if IE]>
 <script src="script_ie.js" type="text/javascript"></script>
<![endif]-->

註解裡的運算子 (operators) : lt, lte, gt, gte…

語法中除了 if, IE 比較容易體會含意外，其餘看似難懂的符號，列出來解釋一下就容易了。

  • lt : lower than ，比某一版本更舊的版本，如 [if lt IE 7] 。
  • lte : lower than or equal to ，某一版本及其更舊的版本，如 [if lte IE 6] 。
  • gt : greater than ，比某一版本更新的版本，如 [if gt IE 6]。
  • gte : greater than or equal to ，某一版本及其更新的版本，如 [if gte IE 8] 。
  • ! : 「非」、「排除」、「反向」的意思，可加在版本、運算子、或子運算式 ( ) 前，如 [if !IE] ，指定 ie 以外有效。
  • ( ) : 可將基本的條件加入子運算式 (subexpression) 處理更複雜的條件，如 [if !(IE 6)] ，指定除 ie6 以外的 ie 有效。。
  • & : 符合由 & 連接的全部子運算式的條件，如 [if (gt IE 5.0)&(lt IE 7)] ，指定 ie5 之後， ie7 之前有效。
  • | : 符合由 | 連接的任一個子運算式的條件，如 [if (IE 5.5)|(IE 6)] ，指定 ie5.5 或是 ie6 有效。

所以， [if lte IE 6] 和 [if lt IE 7] 同樣指的都是 ie6 及其更舊版本，而 [if gt IE 6]與 [if gte IE 7] 同指 ie7 及其較新版本。

實際上，常用的運算子應該只有前面五項，所以沒有特別需求的話，不需要浪費太多時間鑽研每一項的用法囉！

稍作變化才能正確用在 ie 以外瀏覽器

在前面語法中，關於 ie 以外瀏覽器顯現的作法，加了一點東西，這是將 ie 專用註解語法 (紅色部分) ，再加註解標記，變成前後兩部分 html 標準註解 (注意藍色部分) ，才可以讓內容不再是註解；而 ie 仍舊以原來特殊語法判斷，不會理會另外加的符號，如此既能區分瀏覽器，又不會違反 w3c 標準語法。另外需要注意的是，如果同時也要讓某些 ie 顯現 (如最後一項) ，就必須動點手腳，如 [if gte IE 7]><!--> 中多加了 <! (綠色) ，只是為了避免 ie 會把接下去的 --> 顯示出來。

類似運用註解的方法在許多應用軟體也常見到，例如 Adobe Dreamweaver 裡的範本 (templates) 標籤、圖庫 (library) 標籤，也都是運用註解標註的方式讓特定的應用軟體來辨識，所以瀏覽器只會把它們當成註解而已，多留意看看就會發現其中的奧妙了。

參考資源
散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。
文章標籤
ie conditional comments 註解 條件 endif gte lt lte gt

不老師 發表在 痞客邦 留言(1) 人氣()