條件註釋的兩種形式——下層隱藏與下層顯示

條件註釋 (conditional comment) 是於HTML源碼中被 Microsoft Internet Explorer 有條件解釋的語句。條件註釋可被用來向 Internet Explorer 提供及隱藏代碼。
條件註釋最初於微軟的 Internet Explorer 5瀏覽器中出現，並且直至 Internet Explorer 9 均支持。微軟已宣佈於 Internet Explorer 10 中以標準模式處理頁面 - 如 HTML5 - 時停止支持，但是舊版網頁使用這種技術（於相容性視圖）將繼續有效。

在處理相容問題時，條件註釋是非常常見的手段

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->

上述示例為Bootstrap官方的相容性寫法，if lt IE 9 意為if less than IE 9，也就是說當瀏覽器版本小於IE9時，執行下列語句，當然小於也就是說不包括IE9，如果是小於等於則是lte（less than or equal to）,大於（gt）和大於等於（gte）同理可得，普通條件註釋的寫法可以說很清晰了，所以這篇記錄的重點也不是這裡，而是針對IE以外的瀏覽器如何使用條件註釋。

最初我是這樣寫的：

<!--[if !IE]>
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/jquery-2.1.4.min.js")  %>"></script>
<![endif]-->

<!--[if lt IE 9]>
    <script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/jquery-1.12.4.min.js")%>"></script>
<![endif]-->

想當然地認為 !IE 可以被其他瀏覽器識別從而達到載入不同版本jQuery的目的，但實際上條件註釋正常只有IE5-IE9支持，這是一個IE獨有的用法，所以在相容性的處理上就存在問題，還是看上面的例子，如果去掉2.1.4版本的條件註釋，在大部分情況下都可以正常使用，但是在IE9以下的環境中就會載入兩個版本的jQuery，並且還有可能因為不支持高版本jQuery的一些寫法而報錯，那麼有沒有更好的解決辦法呢？還是有的，答案就在條件註釋的不同寫法中，這兩種寫法分別叫做下層隱藏與下層顯示。

下層隱藏（downlevel-hidden）

下層隱藏就是我們上面用的那種寫法，很好理解，也比較常用，但是非IE瀏覽器都會把它當做普通註釋完全忽略裡面的內容。

<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->

下層顯示（downlevel-revealed）

而想要寫出針對其他瀏覽器生效的條件註釋就需要下層顯示的寫法。首先看一個不太規範的下層顯示寫法

<![if !IE]>
<link href="non-ie.css" rel="stylesheet">
<![endif]>

這個示例展示了應該僅對非 IE 瀏覽器暴露的內容，由於該條件對 IE 為假（並且因此該內容被忽略），而這些標簽自身在非 IE 瀏覽器中是無法識別的（並因此被忽略）。這不是有效的 HTML 或 XHTML。微軟承認這種句法不是標準化的標記，意圖是這些標記被其它瀏覽器忽視並暴露其中的內容。

那如果想要符合W3C標準要如何寫呢？答案如下：

<!--[if !IE]>-->
<link href="non-ie.css" rel="stylesheet">
<!--<![endif]-->

這幾種寫法咋看之下都沒什麼區別，但是看粗看語法著色就能發現區別，下層顯示狀態下條件註釋中的語句是有著色的，代表其已經被識別到，而下層隱藏反之，原因在於下層顯示的寫法其實是把條件註釋的語句註釋了，我們前面說到IE以外的瀏覽器會把條件註釋內的所有內容都當做普通註釋忽略，那麼當我們把條件註釋也註釋掉的時候，IE以外的瀏覽器就可以識別到中間的語句了，所以一個比較合理的相容性寫法可以這樣：

<!--[if !IE]>-->
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/jquery-2.1.4.min.js")  %>"></script>
<!--<![endif]-->

<!--[if lt IE 9]>
    <script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/jquery-1.12.4.min.js")%>"></script>
<![endif]-->

當使用IE5-IE9時，正常識別條件註釋，跳過 !IE 的部分，讀取 lt IE 9 裡面的內容，當使用其他版本時忽略條件註釋，讀取2.1.4版本jQuery