打造个性色彩元素自定义IE 8分组标签颜色

　2009-04-08 09:13:24　来源：WEB开发网　　　

核心提示：微软 Internet Explorer 8 浏览器（以下简称为IE 8）新增的一大特色功能就是标签（选项卡）的颜色分组，在同一个 IE 窗口中，打造个性色彩元素自定义IE 8分组标签颜色，如果某个（或多个）标签是在另一标签中点击链接、以“在新标签中打开”的方式打开的，IE 8 就会自动将这两个（或多个）标签以相同的

微软 Internet Explorer 8 浏览器（以下简称为IE 8）新增的一大特色功能就是标签（选项卡）的颜色分组。在同一个 IE 窗口中，如果某个（或多个）标签是在另一标签中点击链接、以“在新标签中打开”的方式打开的，IE 8 就会自动将这两个（或多个）标签以相同的颜色分组标记。

在默认设置中，IE 8 的标签初始为淡蓝色(RGB = 227,238,251)，第一次分组后变化为浅绿色(RGB = 140,227,190)、第二次变化为冰蓝色(RGB = 185,205,246)、第三次变化为淡黄色(RGB = 255,251,209)、第四次变化为浅紫色(RGB = 222,160,228)。如果继续出现第五次分组，将重新由浅绿色开始重复四色循环。直到相同颜色的同组标签被关闭到只剩一个，或者用户手动撤消颜色分组，标签才会恢复为默认的淡蓝色。

笔者个人认为 IE 8 的这种设定并不算很智能。假设我正在用 IE 8 查看新浪体育，有十几条感兴趣的新闻想看。可能我第一次点开了三条新闻、三个标签，看完后逐一关闭;第二次点开了两条、看完又关闭;第三次又点开了三条... 这时 IE 8 的标签就会反复不断地变色，看起来太花哨了。其实无论我打开多少次，这个窗口的所有标签都是来自新浪体育的，并没有必要进行颜色分组。只有当我在这个窗口中打开了除新浪体育外的其它标签时，才真正需要用颜色加以区分。

假如 IE 8 不是以“在新标签中打开”的方式决定是否颜色分组、而是通过对比每一个标签对应的地址是否来自同一站点决定是否颜色分组，效果可能会好一些。笔者希望 IE 后续版本能够加以改进。

言归正传，在默认的设置中，IE 8 定义的淡蓝-浅绿-冰蓝-淡黄-浅紫的颜色顺序是固定不变的，用户无法自行修改这些颜色或调整其出现的先后顺序。对于有些用户而言可能觉得无所谓、而对于包括笔者在内的另一些用户来说，可能很希望自行设置 IE 8 的分组标签颜色。主要原因有：

1.默认的五种颜色都有些偏冷，需要红色、橙色、紫色等暖色调加以调和；

2.默认的五种颜色轮换顺序缺乏规律可循、不容易记忆，如果能够按照红-黄-绿-蓝-紫的大致的彩虹顺序轮换则比较醒目，同时也方便用户想起这是第几次分组；

3.众所周知在同一 IE 窗口中每次只能有一个标签处于前台、其余标签处于后台，在 IE 8 默认设置中只有那一个处于前台的标签拥有颜色渐变、处于后台的其它标签都是单调的纯色，应该加以修改，使后台标签也具有颜色渐变；

4.当鼠标悬停在处于后台的标签时，这个标签的颜色改变很不明显，用户不太容易根据颜色变化判断鼠标是否已悬停在后台标签上，笔者在微软新闻组中已经见到有人抱怨，难以分清悬停前后的颜色变化。

综合以上原因，笔者决定对 IE 8 的分组标签颜色进行一次彻底的修改。

IE 8 的分组标签颜色由 IE 8 程序文件 Windows\system32\IEFrame.DLL 中的 UIFILE 定义，使用 Resource Hacker 打开此文件(推荐用 Resource Hacker，eXeScope 修改 UIFILE 不如 Resource Hacker 方便)，展开 UIFILE 分支，Windows xp 用户修改 UIFILE 中的 20481、Windows Vista 用户修改 UIFILE 中的 20737。

1.后台标签的单色修改：

按照由简至难的顺序，我们首先修改单色的后台标签。在 UIFILE 中搜索字符串 rgb(227,238,251)，找到下列语句：

　　这段语句定义了后台标签初始的淡蓝色(RGB = 227,238,251)，我们可以根据自己的喜好将其修改为自定义颜色的 RGB 值。

接下来紧随着这段语句，我们可以看到：

　　这段语句即定义了当 IE 8 进行第一次分组时，将标签变化为浅绿色(RGB = 140,227,190)。

依此类推，我们可以继续找到、、，分别代表第二次、第三次、第四次的颜色变化，根据自己的喜好修改相应的 RGB 值即可。

附注：IE 8 后台标签默认颜色设置对照：

初始值：(RGB = 227,238,251)
第一组：(RGB = 140,227,190)
第二组：(RGB = 185,205,246)
第三组：(RGB = 255,251,209)
第四组：(RGB = 222,160,228)
　　2.后台标签由单色到渐变色的修改：

下面笔者介绍一下如何将后台标签由单色升级为渐变色，如果希望保持后台标签为单色，可以跳过这部分内容。

以后台标签初始的淡蓝色语句为例：

　　这段语句中的 rgb(227,238,251) 定义了这是一个淡蓝的单色(RGB = 227,238,251)，如需将其修改为渐变色，需要将 rgb(XXX,XXX,XXX) 替换为 gradient(rgb(XXX,XXX,XXX),rgb(XXX,XXX,XXX),1)。例如：

假设将

　　替换为

　　那么后台标签就可以由默认的淡蓝色(RGB = 227,238,251)升级为从(RGB = 195,221,251)到(RGB = 242,246,251)的淡蓝色渐变了。

依此类推，后面的语句也可以按此修改，从而将所有分组的后台标签全部由单色升级为渐变色。

3.鼠标悬停在后台标签时的颜色修改：

在 IE 8 的默认设置中，当鼠标悬停在后台标签时，后台标签会从单色变化为一个不明显的渐变色。例如初始的淡蓝色(RGB = 227,238,251)，悬停时会变为从(RGB = 163,201,248)到(RGB = 242,246,251)的淡蓝色渐变。虽然悬停后换成了渐变色，但却与默认的单色实在太接近了。这也是新闻组中那位仁兄抱怨看不清的原因。

笔者认为当鼠标悬停在后台标签上时，还是按照 IE 7 的方案将其改变颜色比较醒目。在 IE 7 的默认设置中，后台标签原本为银色渐变、鼠标悬停后显示为淡蓝色渐变，比 IE 8 醒目多了。

如需修改鼠标悬停在后台标签时的颜色，在 UIFILE 中搜索字符串 (rgb(163,201,248),rgb(242,246,251)，找到下列语句：

　　这段语句定义了当鼠标悬停在后台标签时初始的淡蓝色渐变，我们可以根据自己的喜好将其修改为自定义颜色的 RGB 值。

依此类推，接下来紧随着这段语句可以依次找到，不过这些语句的格式略微有所改变，需要在最后重复一下此种渐变色在鼠标悬停之前的单色。例如语句为：

　　可以看到它重复了一下在鼠标悬停之前的浅绿单色(RGB = 140,227,190)。我们按照它的格式修改相关的 RGB 值就可以了。

需要注意的是，如果之前已经按照方法 2 将后台标签由单色升级为了渐变色，在这里重复时也必须替换为相应的渐变色。

附注：IE 8 鼠标悬停在后台标签时默认颜色设置对照：

初始值：从(RGB = 163,201,248) 到 (RGB = 242,246,251)
第一组：从(RGB = 21, 227,140) 到 (RGB = 242,246,251)
第二组：从(RGB = 122,163,245) 到 (RGB = 242,246,251)
第三组：从(RGB = 255,240, 45) 到 (RGB = 242,246,251)
第四组：从(RGB = 204,108,214) 到 (RGB = 242,246,251)
　　4.前台标签的渐变色修改：

现在还剩下最后一个修改的元素，就是 IE 8 窗口中唯一的一个处于前台的标签。前台标签在默认的设置中也采用了渐变色，但是也与后台标签相差不大。好在这个唯一的前台标签比其它后台标签要高一些，因此颜色接近的问题可以忽略。

如需修改前台标签的颜色，在 UIFILE 中搜索字符串 (rgb(195,221,251),rgb(242,246,251)，找到下列语句：

　　这段语句定义了前台标签的渐变，我们可以根据自己的喜好将其修改为自定义颜色的 RGB 值。

依此类推，接下来紧随着这段语句可以依次找到，不过这些语句的格式略微有所改变，需要在最后重复一下此种渐变色的第一种颜色。例如 <if class="group1"> 语句为：

　　可以看到它重复了一下渐变色的第一种颜色(RGB = 104,218,169)。我们按照它的格式修改相关的 RGB 值就可以了。

附注：IE 8 前台标签默认颜色设置对照：

初始值：从(RGB = 195,221,251) 到 (RGB = 242,246,251)
第一组：从(RGB = 104,218,169) 到 (RGB = 242,246,251)
第二组：从(RGB = 159,187,243) 到 (RGB = 242,246,251)
第三组：从(RGB = 255,244,139) 到 (RGB = 242,246,251)
第四组：从(RGB = 215,141,223) 到 (RGB = 242,246,251)
　　至此，我们便完成了后台标签、有鼠标悬停的后台标签、前台标签在初始值以及四种分组时的全部颜色修改。

根据上述方法，我们完全可以按照自己的喜好，设计一套属于自己的 IE 8 分组标签颜色方案。本文结尾处的附件截图是笔者自己设计的一套颜色方案，标签初始颜色为淡粉色渐变、悬停时为粉红色渐变。四种分组分别为：浅红色(悬停橙红色)渐变、浅黄色(悬停黄绿色)渐变、草绿色(悬停蓝绿色)渐变、蓝紫色(悬停浅紫色)渐变，按照粉-红-黄-绿-紫的顺序轮换，大体上遵循了彩虹方案，供大家参考。在截图中，所有的 Windows 主页均为后台标签、Windows XP 主页为鼠标悬停时的后台标签、Windows Vista 主页为前台标签。