Windows Internet Explorer 8 瀏覽器(以下簡稱為 IE 8)新增的一大特色功能就是標(biāo)簽(選項卡)的顏色分組。在同一個 IE 窗口中,如果某個(或多個)標(biāo)簽是在另一標(biāo)簽中點擊鏈接、以“在新標(biāo)簽中打開”的方式打開的,IE 8 就會自動將這兩個(或多個)標(biāo)簽以相同的顏色分組標(biāo)記。
在默認(rèn)設(shè)置中,IE 8 的標(biāo)簽初始為淡藍(lán)色(RGB = 227,238,251),第一次分組后變化為淺綠色(RGB = 140,227,190)、第二次變化為冰藍(lán)色(RGB = 185,205,246)、第三次變化為淡黃色(RGB = 255,251,209)、第四次變化為淺紫色(RGB = 222,160,228)。如果繼續(xù)出現(xiàn)第五次分組,將重新由淺綠色開始重復(fù)四色循環(huán)。直到相同顏色的同組標(biāo)簽被關(guān)閉到只剩一個,或者用戶手動撤消顏色分組,標(biāo)簽才會恢復(fù)為默認(rèn)的淡藍(lán)色。
筆者個人認(rèn)為 IE 8 的這種設(shè)定并不算很智能。假設(shè)我正在用 IE 8 查看新浪體育,有十幾條感興趣的新聞想看。可能我第一次點開了三條新聞、三個標(biāo)簽,看完后逐一關(guān)閉;第二次點開了兩條、看完又關(guān)閉;第三次又點開了三條... 這時 IE 8 的標(biāo)簽就會反復(fù)不斷地變色,看起來太花哨了。其實無論我打開多少次,這個窗口的所有標(biāo)簽都是來自新浪體育的,并沒有必要進(jìn)行顏色分組。只有當(dāng)我在這個窗口中打開了除新浪體育外的其它標(biāo)簽時,才真正需要用顏色加以區(qū)分。
假如 IE 8 不是以“在新標(biāo)簽中打開”的方式?jīng)Q定是否顏色分組、而是通過對比每一個標(biāo)簽對應(yīng)的地址是否來自同一站點決定是否顏色分組,效果可能會好一些。筆者希望 IE 后續(xù)版本能夠加以改進(jìn)。
言歸正傳,在默認(rèn)的設(shè)置中,IE 8 定義的淡藍(lán)-淺綠-冰藍(lán)-淡黃-淺紫的顏色順序是固定不變的,用戶無法自行修改這些顏色或調(diào)整其出現(xiàn)的先后順序。對于有些用戶而言可能覺得無所謂、而對于包括筆者在內(nèi)的另一些用戶來說,可能很希望自行設(shè)置 IE 8 的分組標(biāo)簽顏色。主要原因有:
1.默認(rèn)的五種顏色都有些偏冷,需要紅色、橙色、紫色等暖色調(diào)加以調(diào)和;
2.默認(rèn)的五種顏色輪換順序缺乏規(guī)律可循、不容易記憶,如果能夠按照紅-黃-綠-藍(lán)-紫的大致的彩虹順序輪換則比較醒目,同時也方便用戶想起這是第幾次分組;
3.眾所周知在同一 IE 窗口中每次只能有一個標(biāo)簽處于前臺、其余標(biāo)簽處于后臺,在 IE 8 默認(rèn)設(shè)置中只有那一個處于前臺的標(biāo)簽擁有顏色漸變、處于后臺的其它標(biāo)簽都是單調(diào)的純色,應(yīng)該加以修改,使后臺標(biāo)簽也具有顏色漸變;
4.當(dāng)鼠標(biāo)懸停在處于后臺的標(biāo)簽時,這個標(biāo)簽的顏色改變很不明顯,用戶不太容易根據(jù)顏色變化判斷鼠標(biāo)是否已懸停在后臺標(biāo)簽上,筆者在微軟新聞組中已經(jīng)見到有人抱怨,難以分清懸停前后的顏色變化。
綜合以上原因,筆者決定對 IE 8 的分組標(biāo)簽顏色進(jìn)行一次徹底的修改。
IE 8 的分組標(biāo)簽顏色由 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.后臺標(biāo)簽的單色修改:
按照由簡至難的順序,我們首先修改單色的后臺標(biāo)簽。在 UIFILE 中搜索字符串 rgb(227,238,251),找到下列語句:
<IETabOverlay background = "themeable(rgb(227,238,251),buttonface)" />
這段語句定義了后臺標(biāo)簽初始的淡藍(lán)色(RGB = 227,238,251),我們可以根據(jù)自己的喜好將其修改為自定義顏色的 RGB 值。
接下來緊隨著這段語句,我們可以看到:
<if class="group1"><IETabOverlay background = "rgb(140,227,190)" /></if>
這段語句即定義了當(dāng) IE 8 進(jìn)行第一次分組時,將標(biāo)簽變化為淺綠色(RGB = 140,227,190)。
依此類推,我們可以繼續(xù)找到 <if class="group2">、<if class="group3">、<if class="group4">,分別代表第二次、第三次、第四次的顏色變化,根據(jù)自己的喜好修改相應(yīng)的 RGB 值即可。
附注:IE 8 后臺標(biāo)簽?zāi)J(rèn)顏色設(shè)置對照:
初始值:(RGB = 227,238,251)
第一組:(RGB = 140,227,190)
第二組:(RGB = 185,205,246)
第三組:(RGB = 255,251,209)
第四組:(RGB = 222,160,228)
2.后臺標(biāo)簽由單色到漸變色的修改:
下面筆者介紹一下如何將后臺標(biāo)簽由單色升級為漸變色,如果希望保持后臺標(biāo)簽為單色,可以跳過這部分內(nèi)容。
以后臺標(biāo)簽初始的淡藍(lán)色語句為例:
<IETabOverlay background = "themeable(rgb(227,238,251),buttonface)" />
這段語句中的 rgb(227,238,251) 定義了這是一個淡藍(lán)的單色(RGB = 227,238,251),如需將其修改為漸變色,需要將 rgb(XXX,XXX,XXX) 替換為 gradient(rgb(XXX,XXX,XXX),rgb(XXX,XXX,XXX),1)。例如:
假設(shè)將
<IETabOverlay background = "themeable(rgb(227,238,251),buttonface)" />
替換為
<IETabOverlay background = "themeable(gradient(rgb(195,221,251),rgb(242,246,251),1),buttonface)" />
那么后臺標(biāo)簽就可以由默認(rèn)的淡藍(lán)色(RGB = 227,238,251)升級為從(RGB = 195,221,251)到(RGB = 242,246,251)的淡藍(lán)色漸變了。
依此類推,<if class="groupX"> 后面的語句也可以按此修改,從而將所有分組的后臺標(biāo)簽全部由單色升級為漸變色。
3.鼠標(biāo)懸停在后臺標(biāo)簽時的顏色修改:
在 IE 8 的默認(rèn)設(shè)置中,當(dāng)鼠標(biāo)懸停在后臺標(biāo)簽時,后臺標(biāo)簽會從單色變化為一個不明顯的漸變色。例如初始的淡藍(lán)色(RGB = 227,238,251),懸停時會變?yōu)閺模≧GB = 163,201,248)到(RGB = 242,246,251)的淡藍(lán)色漸變。雖然懸停后換成了漸變色,但卻與默認(rèn)的單色實在太接近了。這也是新聞組中那位仁兄抱怨看不清的原因。
筆者認(rèn)為當(dāng)鼠標(biāo)懸停在后臺標(biāo)簽上時,還是按照 IE 7 的方案將其改變顏色比較醒目。在 IE 7 的默認(rèn)設(shè)置中,后臺標(biāo)簽原本為銀色漸變、鼠標(biāo)懸停后顯示為淡藍(lán)色漸變,比 IE 8 醒目多了。
如需修改鼠標(biāo)懸停在后臺標(biāo)簽時的顏色,在 UIFILE 中搜索字符串 (rgb(163,201,248),rgb(242,246,251),找到下列語句:
<IETabOverlay background = "themeable(gradient(rgb(163,201,248),rgb(242,246,251),1), buttonface)" />
這段語句定義了當(dāng)鼠標(biāo)懸停在后臺標(biāo)簽時初始的淡藍(lán)色漸變,我們可以根據(jù)自己的喜好將其修改為自定義顏色的 RGB 值。
依此類推,接下來緊隨著這段語句可以依次找到 <if class="groupX">,不過這些語句的格式略微有所改變,需要在最后重復(fù)一下此種漸變色在鼠標(biāo)懸停之前的單色。例如 <if class="group1"> 語句為:
<if class="group1"><IETabOverlay background = "themeable(gradient(rgb(21, 227,140),rgb(242,246,251),1), rgb(140,227,190))" /></if>
可以看到它重復(fù)了一下在鼠標(biāo)懸停之前的淺綠單色(RGB = 140,227,190)。我們按照它的格式修改相關(guān)的 RGB 值就可以了。
需要注意的是,如果之前已經(jīng)按照方法 2 將后臺標(biāo)簽由單色升級為了漸變色,在這里重復(fù)時也必須替換為相應(yīng)的漸變色。
附注:IE 8 鼠標(biāo)懸停在后臺標(biāo)簽時默認(rèn)顏色設(shè)置對照:
初始值:從(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.前臺標(biāo)簽的漸變色修改:
現(xiàn)在還剩下最后一個修改的元素,就是 IE 8 窗口中唯一的一個處于前臺的標(biāo)簽。前臺標(biāo)簽在默認(rèn)的設(shè)置中也采用了漸變色,但是也與后臺標(biāo)簽相差不大。好在這個唯一的前臺標(biāo)簽比其它后臺標(biāo)簽要高一些,因此顏色接近的問題可以忽略。
如需修改前臺標(biāo)簽的顏色,在 UIFILE 中搜索字符串 (rgb(195,221,251),rgb(242,246,251),找到下列語句:
<IETabOverlay background = "themeable(gradient(rgb(195,221,251),rgb(242,246,251),1), gradient(buttonhighlight,buttonface,1))" />
這段語句定義了前臺標(biāo)簽的漸變,我們可以根據(jù)自己的喜好將其修改為自定義顏色的 RGB 值。
依此類推,接下來緊隨著這段語句可以依次找到 <if class="groupX">,不過這些語句的格式略微有所改變,需要在最后重復(fù)一下此種漸變色的第一種顏色。例如 <if class="group1"> 語句為:
<if class="group1"><IETabOverlay background = "themeable(gradient(rgb(104,218,169),rgb(242,246,251),1),gradient(rgb(104,218,169),buttonface,1))" /></if>
可以看到它重復(fù)了一下漸變色的第一種顏色(RGB = 104,218,169)。我們按照它的格式修改相關(guān)的 RGB 值就可以了。
附注:IE 8 前臺標(biāo)簽?zāi)J(rèn)顏色設(shè)置對照:
初始值:從(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)
至此,我們便完成了后臺標(biāo)簽、有鼠標(biāo)懸停的后臺標(biāo)簽、前臺標(biāo)簽在初始值以及四種分組時的全部顏色修改。
根據(jù)上述方法,我們完全可以按照自己的喜好,設(shè)計一套屬于自己的 IE 8 分組標(biāo)簽顏色方案。本文結(jié)尾處的附件截圖是筆者自己設(shè)計的一套顏色方案,標(biāo)簽初始顏色為淡粉色漸變、懸停時為粉紅色漸變。四種分組分別為:淺紅色(懸停橙紅色)漸變、淺黃色(懸停黃綠色)漸變、草綠色(懸停藍(lán)綠色)漸變、藍(lán)紫色(懸停淺紫色)漸變,按照粉-紅-黃-綠-紫的順序輪換,大體上遵循了彩虹方案,供大家參考。在截圖中,所有的 Windows 主頁均為后臺標(biāo)簽、Windows XP 主頁為鼠標(biāo)懸停時的后臺標(biāo)簽、Windows Vista 主頁為前臺標(biāo)簽。