CSS濾器

層疊樣式表

CSS 濾器是一個編程技術，指根據瀏覽器的版本、功能來隱藏或顯示CSS 標記語言。各瀏覽器對層疊樣式表行為的解釋以及W3C 標準的支持不同。有時 CSS 濾鏡也用來在多個渲染效果不同的瀏覽器中取得一致的表現。

前綴濾鏡

此濾鏡使用瀏覽器前綴樣式代碼，而這些代碼會被其它瀏覽器忽略。所以 -moz-color:red; 定義將在所有 Gecko 瀏覽器中顯示紅色，而其它瀏覽器則為默認顏色。^{[來源請求]}

p {
  color: #000;         /* 段落在忽略下面所有规则的浏览器中显示为黑色 */
  -moz-color: #F00;    /* 段落在 Gecko 浏览器中显示为红色 */
  -webkit-color: #00F; /* 段落在 Webkit 浏览器中显示为蓝色 */
  -khtml-color: #0F0;  /* 段落在 KHTML 浏览器中显示为绿色 */
  -xv-color: #FF0;     /* 段落在 Presto 浏览器中显示为黄色 */
}

特定瀏覽器的樣式只能定義在忽略它的瀏覽器的樣式定義之後，或者使用!important標記和無前綴無!important的樣式同時使用。這樣有前綴的樣式會覆蓋無前綴的樣式，達到特定瀏覽器想要的效果。

反斜線注釋

這個 hack 利用了 Internet Explorer for Mac 的一個和注釋解析相關的錯誤。一段以 \*/ 結束的注釋在 IE Mac 下不能被正常關閉，由此哪些需要被 IE Mac 忽略的樣式可以置於此注釋中。樣式之後需要另一段注釋代碼來關閉 IE Mac 下的注釋。^[1]

/* IE Mac 下忽略下一条样式 \*/
selector { ...styles... }
/* IE Mac 下停止忽略 */

盒模型 hack

稱為 "盒模型 hack" 是因為它經常被用來處理 IE盒模型缺陷，這個方法對 Internet Explorer 使用了一個與其它瀏覽器不同的屬性集。IE 在版本6 已經修正了這個盒模型錯誤，通過在文檔中引入一個文件類型描述『HTML 規範中必需的』。

#elem {
  width: [IE 宽度];
  voice-family: "\"}\"";
  voice-family: inherit;
  width: [其它浏览器宽度];
}
html>body #elem {
  width: [其它浏览器宽度];
}

第一段 voice-family 語句設為字符串 "}" ，但是 IE 一個解析錯誤會阻斷它為一個單反斜線跟著一個閉合括號，作為樣式指令的結尾。選擇 voice-family 是因為它不會影響屏幕樣式表上的表現。第二個使用了html>body hack 的規則是為了像 Opera 5 那樣的也有這個解析錯誤但沒有盒模型錯誤（同時，支持子選擇器）的瀏覽器。^[2]

下劃線 hack

Internet Explorer 版本 6 以下承認有此前綴的屬性（會丟掉此前綴）。所有其它瀏覽器都會忽略這樣的無效屬性。因此，有一個下劃線或連字符前綴的屬性是僅僅應用到 Internet Explorer 6 以及以下版本。

#elem {
  width: [W3C 模型宽度];
  _width: [BorderBox 模型];
}

此 hack 使用了無效的 CSS^[3] 和一個正常的 CSS 指令來達到相似的結果。因此有些人不推薦使用它。另一方面此 hack 因不改變選擇器而使維護和擴展 CSS 文件變容易。

星號 hack

Internet Explorer 版本 7 以及以下承認非字母數字（除了下劃線或連字符）前綴的屬性（會丟掉此前綴）。這樣的屬性對所有其它瀏覽器都是無效的。因此，一個非字母數字（除了下劃線或連字符）前綴的屬性，例如一個星號,是僅僅應用到Internet Explorer 7 以及以下版本。

#elem {
  width: [W3C 模型宽度];
  *width: [BorderBox 模型];
}

此 hack 使用了無效的 CSS^[3] 和一個正常的 CSS 指令來達到相似的結果。因此有些人不推薦使用它。另一方面此 hack 因不改變選擇器而使維護和擴展 CSS 文件變容易。

星號 HTML hack

html 元素是 W3C 標準 DOM 的根元素，但是 Internet Explorer versions 4 到 6 有一個神秘的父級元素。^[4] 完全兼容的瀏覽器會忽略 * html 選擇器，而 IE4-6 則正常處理它。這樣就提供了一個對這些瀏覽器適用而其它瀏覽器會忽略的規則。例如，下面的規則指定了 Internet Explorer 4-6 的文字大小，而不會影響其它瀏覽器。

  * html p {font-size: 5em; }

此 hack 使用了完全有效的 CSS。^[3]

星號加號 hack

儘管 Internet Explorer 7 不再認識經典的星號 HTML hack^[5] ，它卻引入了一個相似的新的選擇器 hack：

  *:first-child+html p { font-size: 5em; }

或…

  *+html p { font-size: 5em; }

這段代碼將會應用到 Internet Explorer 7 ，而不會應用到其它任意瀏覽器中。注意此 hack 只在 IE7 標準模式下起作用；它在詭異模式下不起作用。此 hack 也支持 Internet Explorer 8 的兼容性視圖（IE7 標準模式），但不支持 IE8 標準模式。和星號 HTML hack 一樣，此 hack 使用了有效的 CSS。^[3]

子選擇器 hack

Internet Explorer 版本 6 以及以下不支持『子選擇器』（ > ），則樣式只應用到所有其它瀏覽器上。例如下面的規則會使文字顏色在 Firefox 中為藍色，而不會影響 IE 7 之前的版本。^[3]

  html > body p { color: blue; }

儘管 IE7 添加了子選擇器支持，還是發現了一個變異的 hack 可以將 Internet Explorer 7 也排除在外。當一個空注釋跟著子選擇器時， IE7 會丟掉後面的規則，就像之前版本的 IE 一樣。

  html >/**/ body p { color: blue; }

反選偽類 hack

Internet Explorer 8 以及以下不支持 CSS3 :not() negation pseudo-class （頁面存檔備份，存於網際網路檔案館）.^[6] Internet Explorer 9 添加了 CSS3 偽類支持，包括反選偽類。^[7]

.yourSelector {
  color: black;
} /* 给 IE 的值 */

html:not([dummy]) .yourSelector {
  color: red;
} /* Safari, Opera, Firefox, and IE9+ 的值 */

反選偽類接受任意選擇器：類型選擇器，通用選擇器，屬性選擇器，類選擇器，ID 選擇器，或者偽類選擇器。（不包括偽元素和反選偽類自身）。 ^[8] 設置反選偽類後，所有不匹配的元素都會應用相應樣式。

一個變異 hack ，使用 :root 偽類，也不會被 Internet Explorer 8 以及以下版本解析。

body:empty hack

CSS3 引入了 :empty 偽類，支持選擇沒有內容的元素。不過， Gecko 1.8.1 以及以下版本（ Firefox 2.0.x 及以下使用）處理 body:empty 不正確，有內容時（通常都會有內容）也被選中。這就可以給 Firefox 2.0.x 及以下版本指定不同的樣式規則，而不同於其它使用同樣引擎的瀏覽器。^[3]

/* 使 p 元素在 Firefox 2.0.x 及以下版本隐 */

body:empty p {
  display: none;
}

此 hack 使用了有效的 CSS。

!important 妙用

Internet Explorer 7 及以下版本有一些與設置優先值的 !important 相關的古怪行為。^[3] IE7 和之前版本實際上在 important 位置接受任意字符串且能正常處理，而其它瀏覽器則會忽略它。這就可以僅僅給這些瀏覽器指定屬性值。

/* 使文字颜色在 IE7 以及以下版本为蓝色，所有其它浏览器中为黑色 */
body {
  color: black;
  color: blue !ie;
}

相似的， IE7 以及之前版本的 !important 聲明後也接受非字母數字的字符，而其它瀏覽器會忽略它。

body {
  color: black;
  color: blue !important!;
}

上面的 hacks 都使用了無效的 CSS。 Internet Explorer 6 及以下也有一個 !important 相關的問題，在同一個代碼塊中，當同一個元素的同一個屬性，一個有而另一個沒有 !important 聲明的值時，第一個值應該覆蓋第二個值，但 IE6 及以下版本不會。

/* 使文字在IE6 及以下为蓝色 */
body {
  color: black !important;
  color: blue;
}

這個 hack 使用了有效的 CSS。

動態屬性

Internet Explorer 版本 5 到 7 中支持一種私有的能動態改變 CSS 屬性的語法，有時也稱為一個 CSS 表達式。^[9] 動態屬性通常和其它 hack 一起使用以填補一些 Internet Explorer 老版本不支持的屬性。

div {
  min-height: 300px;

  /* 在 IE6 中模拟 min-height */
  _height: expression(document.body.clientHeight < 300 ? "300px" : "auto");
}

條件注釋

條件注釋是微軟 Internet Explorer 對 HTML 代碼中解析的條件語句。

<head>
  <title>测试</title>
  <link href="all_browsers.css" rel="stylesheet" type="text/css" />
  <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
  <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
  <!--[if !lt IE 7]> <![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
   <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>

批評

使用 hacks 隱藏代碼經常導致頁面在瀏覽器更新後不正常顯示。很多被用來向 IE 6 及以下版本隱藏 CSS 的 hacks 都在 IE 7中失效了，因為 IE 7 支持更多的 CSS 標準。微軟 Internet Explorer 開發團隊已經要求人們使用條件注釋來代替 hacks。^[10]

參見

參考來源

^ QuirksMode - CSS Hacks. [2011-07-18]. （原始內容存檔於2011-07-18）.
^ Box Model Hack. [2011-07-18]. （原始內容存檔於2011-07-16）.
^ ^3.0 ^3.1 ^3.2 ^3.3 ^3.4 ^3.5 ^3.6 WebDevout - CSS Hacks. WebDevout. [2011-07-18]. （原始內容存檔於2011-07-17）.
^ IEBlog. Improving the CSS 2.1 strict parser for IE 7. Microsoft. [2011-07-18]. （原始內容存檔於2010-01-24）.
^ The IEBlog. [2011-07-18]. （原始內容存檔於2010-03-11）.
^ Sitepoint CSS Reference. SitePoint. [2009-01-07]. （原始內容存檔於2008-12-19）.
^ MSDN. CSS Compatibility and Internet Explorer. [19 March 2011]. （原始內容存檔於2010-12-29）.
^ Simple selectors. World Wide Web Consortium. [2011-07-04]. （原始內容存檔於2018-01-28）.
^ About Dynamic Properties. [2011-07-18]. （原始內容存檔於2017-10-14）.
^ IEBlog – Call to action: The demise of CSS hacks and broken pages. [2011-07-18]. （原始內容存檔於2010-03-11）.

外部連結

CSS Filters – A fairly complete table of CSS hacks which show and hide rules from specific browsers.
CSS Filters – CSS-only Filters Summary – More CSS filters.
Filters and Cross-Over – CSS filters. Parsing errors marked red.
- CSS Browser Selector（頁面存檔備份，存於網際網路檔案館） - Allows to combine browser specific CSS in single stylesheet (using JavaScript).
- #IEroot - Targeting IE with a single stylesheet containing all CSS (without using JavaScript, but using conditional comments to assign browser-specific tag to arbitrary content root [div])

[QuirksModeCSSHacks-1] QuirksMode - CSS Hacks. [2011-07-18]. （原始內容存檔於2011-07-18）.

[2] Box Model Hack. [2011-07-18]. （原始內容存檔於2011-07-16）.

[webdevoutcsshacks-3] 3.0 ^3.1 ^3.2 ^3.3 ^3.4 ^3.5 ^3.6 WebDevout - CSS Hacks. WebDevout. [2011-07-18]. （原始內容存檔於2011-07-17）.

[ieblogparserforie7-4] IEBlog. Improving the CSS 2.1 strict parser for IE 7. Microsoft. [2011-07-18]. （原始內容存檔於2010-01-24）.

[ieBlog-5] The IEBlog. [2011-07-18]. （原始內容存檔於2010-03-11）.

[6] Sitepoint CSS Reference. SitePoint. [2009-01-07]. （原始內容存檔於2008-12-19）.

[7] MSDN. CSS Compatibility and Internet Explorer. [19 March 2011]. （原始內容存檔於2010-12-29）.

[8] Simple selectors. World Wide Web Consortium. [2011-07-04]. （原始內容存檔於2018-01-28）.

[9] About Dynamic Properties. [2011-07-18]. （原始內容存檔於2017-10-14）.

[10] IEBlog – Call to action: The demise of CSS hacks and broken pages. [2011-07-18]. （原始內容存檔於2010-03-11）.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

前綴 濾鏡