Tantek Celik 基于浏览器解析错误创建了一系列过滤器(http://tantek.com/css/examples/),允许使用@import规则将样式表提供给选择的浏览器。因为他们是CSS规则,所有这些过滤器可以放在一个CSS文件中,这样就可以再一个地方集中的控制过滤的文件。将招数Hack隔离到浏览器特定的CSS文件中,可以大大简化对招数Hack的管理。如果决定停止对某一浏览器(比如IE 5.0)的支持,那么只需要删除相关的样式表,而不需要再大量页面代码中进行搜索和修改。
注意: /**/ 是CSS中的注释格式。其实下面所说的所有过滤方法都是 /**/注释 和 \ 转义的混合效果。
要想将CSS文件传递给 Windows 上的IE5.5 和IE5,可以使用 Tantek 的中统过滤器:
@media tty {
i{content:”\”;/*” “*/}} @import ‘ie5x.css’; /*”;}
}
这个过滤器看起来像一堆无意义的规则,而且对于许多浏览器确实如此。只能理解CSS 1的浏览器不认识@media 规则,因此完全忽略它。能力更强的浏览器会看到@media 规则中的一个声明,其目标是寻找<i>元素。由于第二个引号前面有一个转义字符,Content 属性的值被认为是一个无意义的字符串。基本上,现代浏览器会看到下面这样的规则:
@media tty {
i { content:”Blah, blah blah”;}
}
转义字符是一个保留字符(通常是反斜线),它使解析器忽略后面的保留字符。所以所以,如果希望使用 CSS content 属性自动生成一个引号,那么必须对它进行转义,否则它就会结束前引号:
blockquote:before {content: “\”"}
tty 媒体类型指的终端和电传打印机。新运的使,当前没有设备支持这种媒体类型,所以符合标准的浏览器实际上会忽略整个规则。
但是,IE5.x/Windows 不理解转移字符的,所以会提前结束内容声明。后面的字符会结束<i> 和@media规则,这导致应用@import 规则。所有多于的字符都被注释掉,因此再 IE 5.x/Win 看来整个规则像下面这样:
@media tty {
i { content:”blah” ;
/* blah */
}
}
@import ‘ie5x.css’
/* blah */
这非常复杂,但是幸运的是,你不需要知道这些过滤器是则怎么工作的,只需要知道怎么使用他们就可以了。
为了向IE 5.x/Win 的特定版本提供CSS文件,创建了中通过滤器的两个变体,他们利用了这些特定浏览器中各种Bug。这些过滤器称为IE 5/Windows 带通过滤器:
@media tty {
i {content:”\”;/*” “*/}}; @import ‘ie50win.css’; {;}/*”;}
}/* */
和IE 5.5/Windows 带通过滤器}
@media tty{
i {content:”\”;/*” */}}@m; @import ‘ie55win.css’; /*;}
}
另一种可能希望明确指定的浏览器是Mac 上的IE 5.2。为此,可以使用Tantek的IE5/Mac带通过滤器,它利用了另一个转义Bug,这一次是在注释中:
/*\*//*/
@import “ie5mac.css”;
/**/
IE 5/Mac 错误地对第二个星号进行转义,导致应用@import 规则。因此, IE5/mac 会看到下面这样的规则:
/* blah */
@import “ie5mac.css”;
/**/
而其他所有浏览器都会正确的忽略转义的元素,因为它放在一个注释中,@import 规则被注释掉了。其他所有浏览器都会看到下面这样的规则(实际上就是没有规则)
/* blah *//*
blah
*/
与其他带通过滤器一样,不需要理解这个过滤器的工作原理,直接使用即可。这些过滤器的出色之处在于,他们巧妙的利用了老式浏览器中的Bug。因此,应该可以放心的使用他们,他们应该不会在新式的浏览器中造成问题。
PS:也许你过两天也发现了你独特的过滤器哦~~ :)