顯示具有 HTML 標籤的文章。 顯示所有文章
顯示具有 HTML 標籤的文章。 顯示所有文章

11.23.2015

MSIE專屬的HTML註解條件式語法....

每一種程式語言,都有專屬的註解語法,方便讓程序設計師們在開發的過程中,除了程式碼之外,還能夠留下一些文字描述。例如:

C, C++, JavaScript, jQuery中,若只要註解某行,在該行的開頭加上"//" (雙斜線);若是要註解掉一大段則是用"/* .... */"。

GNU MakeShell Script中,是在該行前面加上'#' (井字號);微軟的Visual Basic則是加上''' (單引號)

而在HTML語法當中,則是<!-- .... //--> (註1)。但這一篇要記錄的是早期限定於MSIE專屬的註解語法─能夠在註解語法中,加上條件式判斷。只有IE看得懂,其它的瀏灠器如Mozilla FireFox, Google Chrome, Opera, Apple Safari等則是無效 (註2)。先來一段比較簡單的程式碼語法範例 (註3)
<!DOCUMENT HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.prg/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML Comments for MS-IE</title>
<style type="text/css" media="screen"></style>
<script language="JavaScript" type="text/javascript"></script>
</head>
<body>
<!--[if IE]><p>0. Hello!! World!! </p></br><![endif]-->
<!--[if IE]><p>1. Hello!! World!! </p></br><![endif]//-->
<![if IE]><p>2. Hello!! World!! </p></br><![endif]>
</body>
</html>
測試環境如下:
1. Windows 7 (Service Pack 1) (32-bit) IE 11.0.9600.18097
2. Windows XP (Service Pack 3) (32-bit) IE 6.0.2900.5512
3. Windows 8.1 (64-bit) IE 11.0.9600.17905

以上述的程式碼而言,共有三種表達方式,但其中的條件判斷式都一樣:[if IE],「假如是MSIE的瀏灠器,就可以解讀後面的HTML標籤」;所以,照理說我的三個測試環境,都應該可以看的到0~2的文字。

但事實上,只有IE 6.0可以看得到這三行;IE 11.0只能看到最后一行。由此可見,微軟在後來比較新的瀏灠器,已不再支援前2種的語法了;瀏灠器遇到"<!-- .... //-->"或是"<!-- .... -->"會把它們解譯為HTML的註解。

再回到範例:<![if ....]> .... <![endif]>,除了[if IE]之外,還有那些條件判斷??

1. [if IE]:假如是MSIE瀏灠器;就執行後面的HTML語法 (爾后省略)

2. [if IE 8]:假如是MSIE 8.0;

3. [if lt IE 7]:假如小於 (less than)IE 7.0;

4. [if lte IE 7]:假如小於等於 (less than equal)IE 7.0;

5. [if gt IE 8]:假如大於 (greater than)IE 8.0;

6. [if gte IE 8]:假如大於等於 (less than equal)IE 8.0;

7. [if !(IE 10)]:假如不是IE 10.0的Browser;

8. [if (gt IE 8) & (lt IE 10)]:假如大於IE 8.0,且小於IE 10.0;

9. [if (IE 11) | (lte IE 7)]:假如是IE 11.0,或小於等於IE 7.0;

10. [if true], [if false]:假如為真,假如為否。

PS:
1. 除了"<!-- .... //-->"可以當作HTML的註解語法之外,還有另外一種表示方法:"<!-- .... -->"也一樣可以行得通!! 兩者都可以當作註解。

2. 雖然號稱這種表示法是為了MSIE來設計,但自己用FireFox, Chrome, Opera等其它的Browser一樣只看的到第三行。

3. 這種專為MSIE所設計的語法,似乎還是有點問題,當我寫[if !(IE 11)]時,我的MSIE 11.0居然還是看的到!!....@@

1.07.2015

CSS在HTML中的優先順序

好久沒有寫關於工作上的東西了!! 其實BLOG對工程師而言,就像是一個很簡單的隨手筆記。工作上遇到的專業瓶頸,如果可以Google的到,那當然是最好;假如Google到了,卻看不懂別人在寫什麼,那就麻煩了。如果所有的Knowledge,只要看看別人的BLOG就能夠理解,我想所有的書店應該都可以關門了。想要瞭解某個領域的專業知識,還是去書店買本書比較踏實。

這一次在工作上遇到的問題是:CSS (Cascading Style Sheets)在HTML中的優先順序。

第一順位的是:將CSS語法寫在標籤之中,如:
<table style="display:none"></table>
第二順位的是:將CSS語法寫在同一份*.html檔案之中,如:
<style type="text/css">

</style>
CSS的用途,就是網頁中每個元素的樣式表,如果同樣的樣式要呈現在每個元素中,在每個元素標籤中都要寫同樣的語法,這種做法並不是很經濟....所以,我們也可以把CSS樣式表另外寫成一個*.css檔,然後再*.html檔案中執行匯入,如:
@IMPORT url(./style.css);
還有另外一種匯入方式,也是最後一個順序:
<link rel="stylesheet" type="text/css" href="./style.css"/>