推荐一下Firefox插件Stylish

Stylish是这样一个firefox插件,你可以利用它来定制目标网页或网站的css样式,甚至一些firefox app的样式,让浏览效果更加舒适。而且在UserStyles网站上已经有不少现成的样式可供下载,让不会写css的普通用户也可以享受到它的便利。

其实Stylish和greasemonkey正好是一对,一个改变css,一个改变javascript。之前我写了一个用来看新浪新闻的greasemonkey脚本,这个脚本的大概原理是删除了新浪新闻页面上的右侧边栏,这样浏览的范围会更加宽一些,但是greasemonkey脚本会有这样一个缺点,它必须等到页面load完成之后,才开始生效,这样看上去会比较突兀,洋人对这个等待load的时间有个专有名词——flicker(这个词可不是指的图片网站flickr哦)。

使用Stylish就可以有效避免flicker,它在页面最开始载入时就是生效的,也不会有greasemonkey产生的突兀效果了。比如我用来看新浪新闻的样式是这样的:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://news.sina.com.cn/") {
td.lc_blue {width:100%!important; font-size:1.2em;}
div.rightShell {display:none}
}

这个css除了把侧边广告隐藏以外,还把新闻的字体调大,像我这样的近视眼就可以看的比较轻松了。其中的-moz-document关键字是消除flicker的关键:

The @-moz-document rule is a Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document. It is designed primarily for user style sheets.

所以要想写出避免flicker发生的greasemonkey脚本,最好是加上Stylish支持,用-moz-document()来隐藏会变化的html部分,待到页面载入完成之后,greasemonkey脚本就可以不慌不忙的处理后续事宜了。

作者: 发表于June 2, 2008 at 7:29 am

版权信息: 可以任意转载, 转载时请务必以超链接形式标明文章原始出处作者信息及此声明

Tags: ,,,,

3 条评论

  1. 学习笔记 于 2008-06-02 @ 17:02:25 留言

    不是吧,这也改啊,我是不喜欢改这些东西,别人的网有自己的设计风格。改它做什么啊,如果一载入就能看到的话我喜欢是把样式保存在本地或者是远程者个服务器上,这样的话不加重网络负担才怪呢~

  2. volcano 于 2008-06-02 @ 17:09:38 留言

    不符合我的浏览习惯的,就改之

  3. cnboss 于 2008-08-23 @ 17:28:51 留言

    很好,一直用greasemonkey个性网站的样式,尤其是字体样式,但这个还是有点麻烦的。用这个试试看,呵呵。

RSS 为此帖反馈评论