Archive for the ‘Firefox’ Category

gDocsBar - 在Firefox侧栏管理Google Docs
Monday, January 28th, 2008

如果你日常生活、工作中大量使用Google Docs,一定要试一试这个刚刚发布的Firefox扩展——gDocsBar

gDocsBar is a sidebar extension for firefox, a perfect companion for Google® Docs.

With gDocsBar, you can drag and drop multiple files into the sidebar to upload documents.

You can search, filter documents right from the sidebar.

个人觉得打开Google docs的首页是非常慢的,除了网速的限制,大量的JavaScript也是一个问题。这个扩展真的很方便,也可以提高使用Google docs的效率。

去除Firefox中点击链接时的虚线边框
Thursday, January 10th, 2008

在Firefox里,鼠标点击一个链接时,它的周围即出现虚线画出的边框。这种例子遍地都是,在WordPress后台写这个文章的时候,随手点一下右边那些widget,就看到了这个问题(图片的右上角):

WP-admin link

在某些特殊的情况下,比如做一个导航菜单的时候,出现这个情况时效果就很糟糕了,因为Firefox会错误地扩大链接的边框:

Digg Menu Link

:) 这是我用Firebug修改了Digg的CSS截到的效果。Digg的设计是比较完美的。

在Firefox的地址栏输入about:config,回车。有一个配置项叫做“browser.display.focus_ring_width”,把它修改成0,点击链接时就不会出现那个边框。但这样的话,在焦点落在按钮上时也没有了边框指示。而且作为一个开发者,在浏览器里设置这个属性,无异于掩耳盗铃。

这实际上是Firefox在<a>这个标签处于focus状态时(pseudo selector - a:focus)给它加的outline属性。

正确的解决办法是在CSS里加一个规则:

a {
outline: none;
}

或者缩小范围:

a:focus {
outline: none;
}

后者使得鼠标左键在链接上按下,松开之前的这段时间里,仍会显示虚线的outline.

在我看到的大部分网站中,都把这条规则写在CSS里。或许Firefox该考虑去掉这个的默认outline.

整理你的Firefox状态栏
Sunday, October 28th, 2007

Firefox的一个优点在于丰富的扩展,几乎每个Firefox用户都或多或少安装了扩展,借此使自己的Firefox用起来更加得心应手。但是许多Firefox扩展都会在状态栏中显示信息,这对于安装了很多扩展的用户来说,可是个麻烦事。尤其是习惯了原有的顺序后,再安装一个新的扩展,新扩展可能在原来的一排位置中间找个空当。比如我就习惯了Firebug的小图标放在状态栏的最右边,很方便点击(当然F12可以呼出,不过我受鼠标的毒害太深了 :) )。在安装一个新扩展后,发现它抢去了Firebug的风水宝地,让我很不爽。

当然了,在对Firefox有了新的需求时,先要看看它有没有扩展已经可以满足你。果然,Google一下就找到了Organize Status Bar这个扩展,正是我想要的!

安装后重启,Firefox的“工具”主菜单中多了一项“组织工具栏”,点击后,如下所示,你可以给各个扩展划定版图了:

Firefox Status Bar

我当然是要将Firebug的领土归还给它 :)

用Firebug加速Web前端开发
Thursday, August 16th, 2007

工欲善其事,必先利其器。

Firebug是在Firefox中调试HTML、JavaScript、CSS的工具。它的发布可以用“横空出世”来形容,对于Web开发者来说,针对Firefox的开发成本大大降低。我现在开发都是先在Firefox上,然后为兼容IE给代码“打补丁”,而这打补丁花费的时间,有时会超过在Firefox上开发所用的时间,甚至数倍、数十倍!

IE deverloper toolbar,是IE开发组自己做的,按理说应该更强大才对,然而实际上它根本无法跟Firebug这个第三方插件相比,简直就是鸡肋。拥有如此优秀的插件,一定程度上也反映了Firefox的良好基础架构。

了解Firebug,首先要上它的主页。插件的作者首先是位优秀的Web开发者,Firebug的主页是做得非常好的。注意页顶的图片,它不仅仅是一幅截图,Console, HTML, CSS, …那排Tab,都是可以点击的!图片的切割和JavaScript的应用,构成了一个交互式的预览。先不用安装,点一点那些tab,你就会大致了解Firebug的界面和功用。

这个预览的下面是它的各种功能的简介。我最近才发现简介的链接是到更详细的介绍,以前都是自己摸索,看到那些激动人心的功能,忍不住有写出来分享的冲动。既然人家本来就有这么好的介绍,我再做这件事就是费力不讨好了:) 如果你确实需要Firebug,那你一定要从头到尾一字不拉地把它的介绍看完,不然说不定会遗漏一些贴心的功能!

这里还有一篇Firebug作者写的文章,可以看看:

AJAX Debugging with Firebug

Firefox的一个小bug
Tuesday, August 14th, 2007

这两天网络不好,发现了Firefox的一个小问题。

假设你现在网络出了问题,虽然不显示网络连接断开,但连接任何网站都会超时。打开一个新标签,输入一个网址,回车,过一会,出现了超时的提示。在同一标签页中,重新连接另一个网址,同样是超时。

这时就可以发现问题了。点击“刷新”图标,刷新的是第二个网址。点击重试图标,重试的是第一个网址!

谁把它提交到Firefox的Tracker吧。Firefox 2.0.0.6, Windows XP SP2.

New logo for Firefox
Friday, December 15th, 2006

用这个做Firefox的logo,你觉得怎么样呢?

Firefox new logo

这里发现的,我比较愚笨,第二次打开看才明白内涵:smile:。

还发现一个blog专门发此类图片的,好像很火的样子。

在Ubuntu中使用ColorZilla
Thursday, December 14th, 2006

设计、修改网页的时候很想要一个color picker,比如想跟某个颜色保持一致,一般还得翻出CSS代码来看它的颜色码是什么。有时候我也截个图,然后到GIMP里面去看它的颜色,都比较麻烦。

今天发现一个大惊喜,ColorZilla,实在是一个must have的扩展,太爽了。Mozilla addons网站上不是最新的,建议直接到这个主页去安装。

像我一样用Ubuntu的人可能比较郁闷,它把Firefox重新打包并做了些修改,导致ColorZilla不能正常使用。刚开始安装时说该平台不支持,到其主页看,要安装Mozilla官方的Firefox。我扩展装了好多,Flash、播放器各种插件都配好了,才懒得折腾。搜索半天发现这里有个好的解决办法,只需替换几个文件:

* Uninstall colorzilla
* Download latest firefox binaries from getfirefox.com
* Unpack (tar -xvzf firefox.....tar.gz)
* cp firefox/libxpcom* /usr/lib/firefox/
* Reinstall colorzilla
* Restart firefox and eyedropper should now work

它的color picker实际上只是一个在调色板中取色的工具。真正有用的也是我们想要的color picker,是那个Eyedropper。安装好后在状态栏里面单击,鼠标变成十字形,开始在网页上取色。移动到想要的颜色后单击,颜色码就保存下来了。

右键单击状态栏图标,可以选择复制哪种代码。更方便的是在Options->Auto Copy那里设置一下格式(要选上“Enabled”),一劳永逸。总之Eyedropper这个功能已经相当完善了,快快安装,想查看某个颜色的代码会方便很多。color picker无太大作用,它的zoomr功能也很差劲,期待哪天做好了,也就可以对那些想从Opera转过来的人说,整体放大功能已经有了。不过这个可能由Firefox开发组来做更好一些。

The Book of Mozilla, 7:15
Friday, December 1st, 2006

在Firefox的地址栏输入“about:mozilla”就会出来这样一个页面:

And so at last the beast fell and the unbelievers rejoiced.
But all was not lost, for from the ash rose a great bird.
The bird gazed down upon the unbelievers and cast fire
and thunder upon them. For the beast had been
reborn with its strength renewed, and the
followers of Mammon cowered in horror.

from The Book of Mozilla, 7:15

2003年7月15日,AOL关闭了它的Netscape部门,Mozilla组织成立。The beast指Mozilla(Netscape)那个怪兽标志,暗指Netscape。Unbelievers,很多人认为AOL并不重视Netscape浏览器,不会把它做好。有了这两点,为什么rejoice,为什么reborn with its strength renewed就容易理解了。财主很可能指的就是M$。

在IE地址栏里输入“about:mozilla”,看到了什么?Windows经典的死机画面。

The Book of Mozilla并不是一本真正的书。94年和98年,Netscape分别发布程序和源代码,这两个事件在The Book of Mozilla中也有对应。通过wiki上的这一页,可以了解Mozilla的一些历史。