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

條件註釋 (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/bootstrap@3.3.7/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/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/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