跳转到内容

CSS濾器

维基百科，自由的百科全书

这是本页的一个历史版本，由Zhengwenbing119​（留言 | 贡献）在2011年7月19日 (二) 13:05 （→盒模型 hack）编辑。这可能和当前版本存在着巨大的差异。

这是一篇关于层叠样式表(CSS) hacking 技术的文章。不要和私有的微软特定 CSS 属性相混淆。

CSS 过滤器 是一个 编程 技术，指根据 浏览器 的版本、功能来隐藏或显示 CSS 标记语言。 各浏览器对层叠样式表行为的解释以及W3C 标准 的支持不同。 有时 CSS filters 也用来在多个渲染效果不同的浏览器中取得一致的表现。

前缀 过滤器

此过滤器使用浏览器前缀样式代码，而这些代码会被其它浏览器忽略。所以 -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

Versions 6 and below of Internet Explorer recognize properties with this prefix (after discarding the prefix). All other browsers ignore such properties as invalid. Therefore, a property that is preceded by an underscore or a hyphen is applied exclusively in Internet Explorer 6 and below. 

#elem {
  width: [W3C Model Width];
  _width: [BorderBox Model];
}

This hack uses invalid CSS[3] and there are valid CSS directives to accomplish a similar result. Thus some people do not recommend using it. On the other hand this hack does not change the specificity of a selector making maintenance and extension of a CSS file easier.

星号 hack

Versions 7 and below of Internet Explorer recognize properties which are preceded by non-alphanumeric characters except an underscore or a hyphen (after discarding the prefix). All other browsers ignore such properties as invalid. Therefore, a property that is preceded by an non-alphanumeric character other than an underscore or a hyphen, such as an asterisk, is applied exclusively in Internet Explorer 7 and below. 

#elem {
  width: [W3C Model Width];
  *width: [BorderBox Model];
}

This hack uses invalid CSS[3] and there are valid CSS directives to accomplish a similar result. Thus some people do not recommend using it. On the other hand this hack doesn't change the specificity of a selector making maintenance and extension of a CSS file easier.

星号 HTML hack

The html element is the root element of the W3C standard DOM, but Internet Explorer versions 4 through 6 include a mysterious parent element.[4] Fully-compliant browsers will ignore the * html selector, while IE4-6 will process it normally. This enables rules to be specified for these versions of Internet Explorer which will be ignored by all other browsers. For example, this rule specifies text size in Internet Explorer 4-6, but not in any other browsers. 

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

This hack uses fully valid CSS.[3]

星号 加号 hack

Although Internet Explorer 7 no longer recognizes the classic star HTML hack[5], it has introduced a similar hack using selectors new to IE7: 

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

Or... 

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

This code will be applied in Internet Explorer 7, but not in any other browser. Note that this hack only works in IE7 standards mode; it does not work in quirks mode. This hack is also supported by Internet Explorer 8's compatibility view (IE7 standards mode), but not in IE8 standards mode. Like the star HTML hack, this uses valid CSS.[3]

子选择器 hack

Internet Explorer 6 and earlier do not support the "child selector" (>), allowing rules to be specified for all other browsers. For example, this rule will turn paragraph text blue in Firefox, but not in IE before version 7.[3] 

html > body p { color: blue; }

Although IE7 added support for the child selector, a variation of the hack has been discovered which allows Internet Explorer 7 to be excluded as well. When an empty comment occurs immediately after the child selector, IE7 will drop the rule that follows, as will earlier versions of IE. 

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

反选伪类 hack

Internet Explorer 8 and below do not support the CSS3 :not() negation pseudo-class.[6] Internet Explorer 9 added support for CSS3 pseudo-classes including the negation pseudo-class.[7] 

.yourSelector {
  color: black;
} /* values for IE */

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

The negation pseudo-class accepts any simple selector : A type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class. (excluding pseudo-elements and the negation pseudo-class itself). [8] It then applies the following properties to all elements which do not match this argument.

A variation of this hack uses the :root pseudo-class, which is also unrecognized by Internet Explorer 8 and below.

body:empty hack

The :empty pseudo-class, introduced in CSS3, is supposed to select only elements which do not contain any content. However, Gecko 1.8.1 and below (used in Firefox 2.0.x and below) incorrectly selects body:empty even when the body element contains content (which it usually should). This can be taken advantage of to feed exclusive CSS rules to Firefox 2.0.x and below, along with other browsers using the same rendering engine.[3] 

/* Make p elements disappear in Firefox 2.0.x and below */
body:empty p {
  display: none;
}

This hack uses valid 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 comment

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

  1. ^ QuirksMode - CSS Hacks
  2. ^ Box Model Hack. 
  3. ^ 3.0 3.1 3.2 3.3 3.4 3.5 3.6 WebDevout - CSS Hacks. WebDevout. 
  4. ^ IEBlog. Improving the CSS 2.1 strict parser for IE 7. Microsoft. 
  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

外部链接

  • 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])
检索自“https://zh.wikipedia.org/w/index.php?title=CSS濾器&oldid=17143866”