Firefox 3.5 实现按站点自定义CSS样式 - Per-site custom CSS implementation in Firefox 3.5

自从用了Vista，就开始依赖微软雅黑，再看以前的宋体总觉得干瘦，一个个像素都清晰可辨。

于是把眼见之处全盘雅黑化，Firefox的字体设置全改掉，同时剥夺页面选择字体的自由：

 

可是英文网站的字体繁多，也是网页设计的重要部分，千篇一律（字体也被MS垄断……）就太枯燥了，于是想怎样才能自己定制网页样式，同时又能保留某些网站自己的样式，增强浏览体验。

搜索一番，去Firefox 附加组件里装了两个扩展：Stylish 和 StyleSheet Chooser Plus，前一个基本是改进Facebook和Google产品，后一个根本摸不着头脑，都不理想。

又去搜，才发现原来解决办法就在Firefox的Profiles文件夹里。

1. userContent.css

这个文件以前没听过，不过从名字可以看出，它跟我要做的事有点关系，它的详细信息在这里，现在只需要知道它是用来定制浏览网页的样式的。

文件路径：C:/Users/<user>/Mozilla/Firefox/Profiles/<random characters>.default/chrome

如果没有这个文件，而是有一个userContent-example.css，说明之前没有使用过这个功能，只要修改userContent-example.css（里面是一些注释），加上需要的代码，另存为userContent.css就可以了。

每次修改userContent.css后需要重启Firefox，才能生效。

 

2. @-moz-document

之后就开始动手加代码，具体写法在这里，核心内容就是下面这一段：

@-moz-document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org)
{
  /* CSS rules here apply to:
     + The page "http://www.w3.org/".
     + Any page whose URL begins with "http://www.w3.org/Style/"
     + Any page whose URL's host is "mozilla.org" or ends with
       ".mozilla.org"
   */
}

 

简单明了，除了前面几行是指明应用样式的范围，大括号里面就是纯粹的CSS代码，放心写就行，不如要把人人主页的字体改成雅黑，先用Firebug查网页的CSS，然后在userContent.css加入代码：

@-moz-document domain(renren.com)
{
  body {
    font-family:Tahoma,Verdana,Microsoft YaHei,sans-serif; //校内改为雅黑
  }
}

 

其中"Microsoft YaHei"是修改了网页原CSS的"STHeiTi"，这样黑体就被雅黑替换了，保存，重启浏览器，打开网页，然后就在享受胜利的那一刻，居然发现——什么都没变……

3. !important

用Firebug查CSS，发现如下情况：

layout.css是网站设置的样式，userContent.css就是自定的样式，看来浏览器的确检测到了自定样式，但是没有生效。

 

看来如果自定的CSS与原网站的有冲突，最终可能会保留原网站的样式，现在问题变成了如何让自定样式覆盖原样式。

要覆盖原CSS，可以在自定的CSS条目后加!important，以前例：

body {
  font-family:Tahoma,Verdana,Microsoft YaHei,sans-serif !important; //人人字体改为雅黑
}

 

保存userContent.css，重启浏览器，再打开同一页面，查看CSS：

结果是userContent.css战胜了layout.css，覆盖成功。

如此一来，就可以不用看网站脸色，随心所欲定制自己的浏览样式了。

 

另外发现有些字体在这种情况下还是原样没变，比如人人网登录时的输入框：

 

查看源代码发现登录页面使用了两个css：layout.css和login.css，其中login.css里没有对字体的定义，肯定别处（layout.css有最大嫌疑）有定义，再次出动Firebug，选择要查看的部分，选右键菜单中的“查看元素”，就自动在HTML标签树中找到登录框的部分：

 

在右边的样式窗口里赫然发现一条：

 

看来登录框属于特殊的组件，另有控制它的语句，再看下面的layout.css和userContent.css：

两个body的设置都被忽略了，看来越靠近网页组件的设置优先级越高，就连外层的body加入!important也无法将其覆盖，具体各种写法的优先级怎样现在先不关注。

总之要修改哪里，就找对应的CSS代码，在userContent.css里将它覆盖就好了，更多用法可以参考下面的网页：

Per-site custom CSS in Firefox - corey gilmore's blog

@-moz-document - CSS Reference:Mozilla Extensions - Mozilla Developer Center

Use my colors - MozillaZine Knowledge Base

How to Override Inline CSS Styles - Sitepoint

User Style Sheets Come of Age - Sitepoint

Per-Site Styles in Firefox - Welcome to Nerdville