CSS濾器

这是一篇关于层叠样式表(CSS) hacking 技术的文章。不要和私有的微软特定 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" 是因为它经常被用来处理 Internet Explorer 盒模型错误，这个方法对 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 and below have a few quirks related to the !important declaration, which is supposed to give a value higher importance than normal.^[3] IE7 and earlier accept virtually any string in place of important and process the value normally, while other browsers will ignore it. This can be used to specify values exclusively for these browsers.

<

/* Make text blue in IE7 and below, black in all other browsers */
body {
  color: black;
  color: blue !ie;
}

Similarly, IE7 and earlier accept non-alphanumeric characters after an !important declaration, while other browsers will ignore it.

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

Both of these hacks use invalid CSS. Internet Explorer 6 and below also have a problem with !important declarations when the same property of the same element has another value specified within the same code block, without another !important declaration. This should result in the second value being overridden by the first, but IE6 and lower do not honor this.

/* Make text blue in IE6 and lower */
body {
  color: black !important;
  color: blue;
}

This hack uses valid CSS.

动态属性

Between versions 5 and 7, Internet Explorer has supported a proprietary syntax for applying CSS properties which change dynamically, sometimes referred to as CSS expressions.^[9] Dynamic properties are typically combined with other hacks to compensate for unsupported properties in older versions of Internet Explorer.

div {
  min-height: 300px;

  /* simulates min-height in IE6 */
  _height: expression(document.body.clientHeight < 300 ? "300px" : "auto");
}

条件注释

Conditional comments are conditional statements interpreted by Microsoft Internet Explorer in HTML source code.

<head>
  <title>Test</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>

批评

Hiding code using hacks often leads to pages being incorrectly displayed when browsers are updated. Many hacks that used to hide CSS from Internet Explorer 6 and lower no longer work in version 7 due to its improved support for CSS standards. The Microsoft Internet Explorer development team have asked that people use conditional comments instead of hacks.^[10]

参见

Notes

^ QuirksMode - CSS Hacks
^ Box Model Hack.
^ ^3.0 ^3.1 ^3.2 ^3.3 ^3.4 ^3.5 ^3.6 WebDevout - CSS Hacks. WebDevout.
^ IEBlog. Improving the CSS 2.1 strict parser for IE 7. Microsoft.
^ The IEBlog
^ Sitepoint CSS Reference. SitePoint. [2009-01-07].
^ MSDN. CSS Compatibility and Internet Explorer. [19 March 2011].
^ Simple selectors. World Wide Web Consortium. [2011-07-04].
^ About Dynamic Properties
^ IEBlog – Call to action: The demise of CSS hacks and broken pages

外部链接

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

[2] Box Model Hack.

[webdevoutcsshacks-3] 3.0 ^3.1 ^3.2 ^3.3 ^3.4 ^3.5 ^3.6 WebDevout - CSS Hacks. WebDevout.

[ieblogparserforie7-4] IEBlog. Improving the CSS 2.1 strict parser for IE 7. Microsoft.

[ieBlog-5] The IEBlog

[6] Sitepoint CSS Reference. SitePoint. [2009-01-07].

[7] MSDN. CSS Compatibility and Internet Explorer. [19 March 2011].

[8] Simple selectors. World Wide Web Consortium. [2011-07-04].

[9] About Dynamic Properties

[10] IEBlog – Call to action: The demise of CSS hacks and broken pages

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

前缀 滤镜