CSS万象：兼容各端的优雅之道

2023-09-25 00:23:17

在网页设计的过程中，除了网站的布局、UI，HTML页面上的元素往往需要自定义样式的修饰，以便网站能够以设计师和开发者的预期样式呈现给用户。而CSS，作为网络界“时尚掌门人”，起到了至关重要的作用。但不同的浏览器、不同版本之间的差异，如何让一个网站拥有良好的兼容性，这就需要用一个合适的工具给浏览器发指令，让其统一按指令行事，而这个工具就是CSS黑客技术。

CSS黑客技术的由来

1998年，浏览器大战愈演愈烈，在彼时群雄割据的浏览器市场中，微软浏览器Internet Explorer独占鳌头，占据70%以上的市场份额。与此同时，微软内部IE开发团队的傲慢与轻视，使得IE的浏览器核心严重落后于当时的Netscape Navigator浏览器。

2001年，微软发布了被戏称为“地雷”的IE6版本，其市场份额一度达到惊人的96%。对于广大网页开发者而言，编写一个网站，支持IE浏览器无疑是第一要务。Netscape、Opera等其它浏览器厂商为了挤占IE的市场份额，纷纷建立了自己的浏览器内核。因此，如何让网站在不同的浏览器上正常展现，这就成为了迫在眉睫的一个问题。而作为浏览器开发厂商与广大网页开发者之间的“中间人”，CSS黑客技术应运而生。

CSS黑客技术的表现形式

1. CSS属性黑客

这是CSS黑客技术中最常见也最直接的一种方式，就是利用不同浏览器识别处理CSS属性值时，存在差异而产生的机制。这种差异在浏览器内部已经形成固定的格式，网页开发者利用这些差异对CSS属性值进行取值，以此达到浏览器的兼容。

举个例子，针对a标签的属性hover，不同浏览器支持的属性值不同：

IE支持：filter、background、cursor；
Firefox支持：color、background、text-decoration；
Opera支持：color、background、text-decoration；
Chrome支持：color、background、text-decoration；

此时，如果开发者需要设置标签a在悬浮状态下字体为红色，就可以使用如下CSS代码：

a:hover {
    color: red; /* 标准浏览器 */
    filter: glow(color=red); /* IE浏览器 */
}

2. CSS选择符黑客

CSS选择符黑客就是利用不同浏览器识别CSS选择符的优先级不同，从而产生样式差异。在写法上，主要有两种方式：

添加浏览器前缀，例如IE6中添加_；
伪类选择符，例如link:visited(IE7及更早版本不支持)。

例如，现在网页中有一个选择器，其定义为“#demo{color:red;}”，在IE中，当元素满足选择器#demo时，将被赋予color:red的样式，而如果在IE选择器前加上_，其定义改成“_#demo{color:blue;}”时，只要元素满足选择器#demo，将被赋予color:blue的样式。此时，对于其它浏览器来说，是没有_这个前缀的，它们读取到的只是#demo的选择器定义，因此呈现的样式是color:red。

3. IE条件注释黑客

这种方法只针对IE浏览器。微软官方允许浏览器在处理不同的XHTML或HTML代码时，可以使用条件注释功能进行样式区分。条件注释的写法为：

<!--[if 条件判断语句]>
    针对条件样式代码
<![endif]-->

比如对于IE浏览器，就可以用if ie 7这样的条件判断语句，针对IE7浏览器的选择器进行样式控制，如下：

<!--[if IE 7]>
<style>
    #demo{color:red;}
</style>
<![endif]-->

结语

面对纷繁复杂的浏览器，良好的兼容性无疑是衡量一个网站是否合格的首要标准。而CSS黑客技术，利用了不同浏览器或不同版本浏览器解析样式的差异，针对不同的浏览器版本做特定的样式控制，从而保证了网页在不同浏览器上的一致性。伴随着Web技术的进步，CSS黑客技术早已退出历史舞台，但它作为浏览器兼容技术史上的一个里程碑，仍然值得我们铭记。