CSS濾器

CSS 濾器是一個程式設計技術，指根據瀏覽器的版本、功能來隱藏或顯示CSS 標記語言。各瀏覽器對層疊樣式錶行為的解釋以及W3C標準 的支援不同。有時 CSS 濾鏡也用來在多個渲染效果不同的瀏覽器中取得一致的表現。字首 濾鏡.此濾鏡使用瀏覽器字首樣式程式碼，而這些程式碼會被其它瀏覽器忽略。所以 codice_1 定義將在所有 Gecko 瀏覽器中顯示紅色，而其它瀏覽器則為預設顏色。p {color: #000; /* 段落在忽略下面所有規則的瀏覽器中顯示為黑色 */-moz-color: #F00; /* 段落在 Gecko 瀏覽器中顯示為紅色 */-webkit-color: #00F; /* 段落在 Webkit 瀏覽器中顯示為藍色 */-khtml-color: #0F0; /* 段落在 KHTML 瀏覽器中顯示為綠色 */-xv-color: #FF0; /* 段落在 Presto 瀏覽器中顯示為黃色 */特定瀏覽器的樣式只能定義在忽略它的瀏覽器的樣式定義之後，或者使用codice_2標記和無字首無codice_2的樣式同時使用。這樣有字首的樣式會覆蓋無字首的樣式，達到特定瀏覽器想要的效果。反斜線註釋.這個 hack 利用了 Internet Explorer for Mac 的一個和註釋解析相關的錯誤。一段以 codice_4 結束的註釋在 IE Mac 下不能被正常關閉，由此哪些需要被 IE Mac 忽略的樣式可以置於此註釋中。樣式之後需要另一段註釋程式碼來關閉 IE Mac 下的註釋。/* IE Mac 下忽略下一條樣式 \*//* IE Mac 下停止忽略 */盒模型 hack.稱為 "盒模型 hack" 是因為它經常被用來處理 IE盒模型缺陷，這個方法對 Internet Explorer 使用了一個與其它瀏覽器不同的屬性集。IE 在版本6 已經修正了這個盒模型錯誤，透過在文件中引入一個 檔案型別描述『HTML 規範中必需的』。width: [IE 寬度];voice-family: "\"}\"";voice-family: inherit;width: [其它瀏覽器寬度];html&gt;body #elem {width: [其它瀏覽器寬度];第一段 codice_5 語句設為字串 codice_6 ，但是 IE 一個解析錯誤會阻斷它為一個單 反斜線 跟著一個閉合 括號，作為樣式指令的結尾。選擇 codice_5 是因為它不會影響螢幕 樣式表 上的表現。第二個使用了codice_8 hack 的規則是為了像 Opera 5 那樣的也有這個解析錯誤但沒有盒模型錯誤的瀏覽器。下劃線 hack.Internet Explorer 版本 6 以下承認有此字首的屬性。所有其它瀏覽器都會忽略這樣的無效屬性。因此，有一個 下劃線 或 連字元 字首的屬性是僅僅應用到 Internet Explorer 6 以及以下版本。width: [W3C 模型寬度];_width: [BorderBox 模型];此 hack 使用了無效的 CSS 和一個正常的 CSS 指令來達到相似的結果。因此有些人不推薦使用它。另一方面此 hack 因不改變選擇器而使維護和擴充套件 CSS 檔案變容易。星號 hack.Internet Explorer 版本 7 以及以下承認非字母數字字首的屬性，例如一個 星號,是僅僅應用到Internet Explorer 7 以及以下版本。width: [W3C 模型寬度];*width: [BorderBox 模型];此 hack 使用了無效的 CSS 和一個正常的 CSS 指令來達到相似的結果。因此有些人不推薦使用它。另一方面此 hack 因不改變選擇器而使維護和擴充套件 CSS 檔案變容易。星號 HTML hack.codice_9 元素是 W3C 標準 DOM 的根元素，但是 Internet Explorer versions 4 到 6 有一個神秘的父級元素。 完全相容的瀏覽器會忽略 codice_10 選擇器，而 IE4-6 則正常處理它。這樣就提供了一個對這些瀏覽器適用而其它瀏覽器會忽略的規則。例如，下面的規則指定了 Internet Explorer 4-6 的文字大小，而不會影響其它瀏覽器。此 hack 使用了完全有效的 CSS。星號 加號 hack.儘管 Internet Explorer 7 不再認識經典的星號 HTML hack ，它卻引入了一個相似的新的選擇器 hack：或…這段程式碼將會應用到 Internet Explorer 7 ，而不會應用到其它任意瀏覽器中。注意此 hack 只在 IE7 標準模式下起作用；它在詭異模式下不起作用。此 hack 也支援 Internet Explorer 8 的相容性檢視，但不支援 IE8 標準模式。和星號 HTML hack 一樣，此 hack 使用了有效的 CSS。子選擇器 hack.Internet Explorer 版本 6 以及以下不支援 『子選擇器』，則樣式只應用到所有其它瀏覽器上。例如下面的規則會使文字顏色在 Firefox 中為藍色，而不會影響 IE 7 之前的版本。儘管 IE7 添加了子選擇器支援，還是發現了一個變異的 hack 可以將 Internet Explorer 7 也排除在外。當一個空註釋跟著子選擇器時， IE7 會丟掉後面的規則，就像之前版本的 IE 一樣。反選偽類 hack.Internet Explorer 8 以及以下不支援 CSS3 codice_12 negation pseudo-class .Internet Explorer 9 添加了 CSS3 偽類支援，包括反選偽類。.yourSelector {color: black;} /* 給 IE 的值 */html:not([dummy]) .yourSelector {color: red;} /* Safari, Opera, Firefox, and IE9+ 的值 */反選偽類接受任意選擇器：型別選擇器，通用選擇器，屬性選擇器，類選擇器，ID 選擇器，或者偽類選擇器。。設定反選偽類後，所有不匹配的元素都會應用相應樣式。一個變異 hack ，使用 codice_13 偽類，也不會被 Internet Explorer 8 以及以下版本解析。body:empty hack.CSS3 引入了 :empty 偽類，支援選擇沒有內容的元素。不過， Gecko 1.8.1 以及以下版本也被選中。這就可以給 Firefox 2.0.x 及以下版本指定不同的樣式規則，而不同於其它使用同樣引擎的瀏覽器。/* 使 p 元素在 Firefox 2.0.x 及以下版本隱 */body:empty p {display: none;此 hack 使用了有效的 CSS。!important 妙用.Internet Explorer 7 及以下版本有一些與設定優先值的 !important 相關的古怪行為。 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 表示式。 動態屬性通常和其它 hack 一起使用以填補一些 Internet Explorer 老版本不支援的屬性。div {min-height: 300px;/* 在 IE6 中模擬 min-height */_height: expression(document.body.clientHeight &lt; 300 ? "300px" : "auto");條件註釋.條件註釋是微軟 Internet Explorer 對 HTML 程式碼中解析的條件語句。批評.使用 hacks 隱藏程式碼經常導致頁面在瀏覽器更新後不正常顯示。很多被用來向 IE 6 及以下版本隱藏 CSS 的 hacks 都在 IE 7中失效了，因為 IE 7 支援更多的 CSS 標準。 微軟 Internet Explorer 開發團隊已經要求人們使用條件註釋來代替 hacks。