没有样式就是最好的样式

Archive for May, 2007


toggle css

May 14, 2007 Author: | Filed under: Uncategorized

代码有那么点意思。基本上相当于 firefox和 opera 的 no style 功能了。

运行代码 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

userContent.css 定制 firefox 网页外观

May 14, 2007 Author: | Filed under: Uncategorized

userContent.css 的目录请参考 userChrome.css 定制 firefox 外观技巧

/* 所有开新窗口的链接用十字鼠标指针;所有外部链接显示帮助鼠标指针 */

:link[target="_blank"], :visited[target="_blank"], :link[target="_new"], :visited[target="_new"] {cursor: crosshair; }

a[href^="http://"]{cursor:help !important;}

userChrome.css 定制 firefox 外观技巧

May 14, 2007 Author: | Filed under: Uncategorized

userChrome.css 应该在 ubuntu 下的~/.mozilla/firefox/qqfr6h1w.default/chrome 目录中。(注意:qqfr6h1w.default 是随机的)。windows 下在 %appdata%MozillaFirefoxProfilesdefault.teachrome (注意:default.tea 也是随机的)

默认这里有个 userChrome-example.css,改名或者复制为 userChrome.css。修后后需要重新启动 firefox 才能看到效果。我推荐的设置内容如下:

/* 收藏时直接显示关键字 keyword 输入框 */

#keywordRow { display: -moz-grid-line !important; }

/* 当有历史记录时才显示前进、后退按钮*/

#back-button[disabled="true"] { display: none; }

#forward-button[disabled="true"] { display: none; }

/* 当前tab的文字为红色 */

tab[selected="true"] { color: #c00 !important; }

/* 当前tab才显示 favicon */

tab:not([selected="true"]) .tab-icon {

display: none !important; }

/* 非当前tab半透明 */

#content tab:not([selected="true"]) {

-moz-opacity: 0.5 !important; }

/* 不显示当前tab的焦点虚线 */

tab:focus > .tab-middle { -moz-outline: none !important }

/* 不显示菜单中的 “发行说明” */

menuitem[label="发行说明"] { display: none; }

/* 为地址栏和搜索栏加上圆角效果 */

#urlbar {

-moz-appearance: none !important;

-moz-border-radius: 3px !important;

padding-right: 1px !important; }

更多资料可参看 UserChrome.css

15 个最酷的firefox 技巧

May 12, 2007 Author: | Filed under: Uncategorized

原文来自 15 Coolest Firefox Tricks Ever,大致内容如下:

1) More screen space. Make your icons small. Go to View - Toolbars - Customize and check the “Use small icons” box.

更多的网页显示空间。查看-工具栏-定制,勾选 使用小图标。

2) Smart keywords.

使用智能关键字(搜索操作)。可参考下面日志

firefox 添加 keyword 搜索

给opera 添加搜索百度 keyword

3) Keyboard shortcuts.

快捷键。

* Spacebar (page down) 相当于 pagedown

* Shift-Spacebar (page up) 相当于 pageup

* Ctrl+F (find) 搜索

* Alt-N (find next) 搜索下一个

* Ctrl+D (bookmark page) 收藏当前页面

* Ctrl+T (new tab) 开新标签页

* Ctrl+K (go to search box) 切换到搜索框

* Ctrl+L (go to address bar) 切换到地址栏(ie 是alt+d;opera 是 ctrl+L;firefox两个操作都可以)

* Ctrl+= (increase text size) 字体放大(大小键盘的+-号都可以)

* Ctrl+- (decrease text size) 字体缩小

注意:ctrl+鼠标滚轮也可以控制字体大小;另外,ctrl+0 恢复默认字号

* Ctrl-W (close tab) 关闭当前标签页

* F5 (reload) 刷新(ctrl+r 也可以)

* Alt-Home (go to home page) 回首页

opera 某些版本的回首页居然是 ctrl+space,而这默认是输入法的操作方式,你可以参考此文 opera ctrl+空格 切换输入法的问题

4) Auto-complete.

网址自动补全。ctrl+enter 补全 www. 和 .com;shift+enter 补全 .net;ctrl+shift+enter 补全 .org。

5) Tab navigation.

标签页导航

* Ctrl+Tab (rotate forward among tabs)

* Ctrl+Shft+Tab (rotate to the previous tab)

* Ctrl+1-9 (choose a number to jump to a specific tab)

6) Mouse shortcuts.

鼠标快捷键

* Middle click on link (opens in new tab)

* Shift-scroll down (previous page)

* Shift-scroll up (next page)

* Ctrl-scroll up (decrease text size)

* Ctrl-scroll down (increase text size)

* Middle click on a tab (closes tab)

7) Delete items from address bar history.

地址栏的历史记录是可以删除的。上下箭头选,delete键删除。(这个有意义嘛?谁有闲情逸致去维护一个漂亮整洁的历史记录呢?伪装给安全局看?:()

8) User chrome.

定制 userChrome.css 文件。UserChrome.css 可以订制你需要的 firefox 外观

9) Create a user.js file.

定制 user.js 文件。

10) about:config.

在这里查询about:config 的资料

11) Add a keyword for a bookmark.

为书签加入关键字(和搜索的那个 keyword 类似)。右键书签,属性…

(我觉得下面这些技巧基本上属于扯淡,一个浏览器而已,能有多慢,想有多快?要是魔兽或者飞车弄个这样的技巧还有点意义,不翻自看)

12) Speed up Firefox.

加速技巧。

* Type “about:config” into the address bar and hit return. Type “network.http” in the filter field, and change the following settings (double-click on them to change them):

* Set “network.http.pipelining” to “true”

* Set “network.http.proxy.pipelining” to “true”

* Set “network.http.pipelining.maxrequests” to a number like 30. This will allow it to make 30 requests at once.

* Also, right-click anywhere and select New-> Integer. Name it “nglayout.initialpaint.delay” and set its value to “0″. This value is the amount of time the browser waits before it acts on information it receives.

13) Limit RAM usage. If Firefox takes up too much memory on your computer, you can limit the amount of RAM it is allowed to us. Again, go to about:config, filter “browser.cache” and select “browser.cache.disk.capacity”. It’s set to 50000, but you can lower it, depending on how much memory you have. Try 15000 if you have between 512MB and 1GB ram.

14) Reduce RAM usage further for when Firefox is minimized. This setting will move Firefox to your hard drive when you minimize it, taking up much less memory. And there is no noticeable difference in speed when you restore Firefox, so it’s definitely worth a go. Again, go to about:config, right-click anywhere and select New-> Boolean. Name it “config.trim_on_minimize” and set it to TRUE. You have to restart Firefox for these settings to take effect.

15) Move or remove the close tab button.

修改 tab 关闭按钮。

browser.tabs.closeButtons

设置 tab 关闭按钮的样式。lifehacher 推荐3,我个人推荐0。

0 当前tab显示关闭按钮

1 所有tab显示关闭按钮

2 所有tab都不显示关闭按钮

3 在tab bar 的最右面显示关闭按钮(firefox 1.5 的那种效果)

看这个 firefox 2.0 设置技巧 有更多说明。

使用CSS时9个需要注意的地方

May 12, 2007 Author: | Filed under: Uncategorized

来自 9 Expert CSS Ideas You Should Think Twice About Before Using,大致内容如下:

1. Keep a library of helpful CSS classes

保持有意义的 css classes,比如

第一个没有把表现层(presentation)和内容层分开;第二个不方便统一管理和修改。下面是正确的方法

2. Keep selectors to a minimum

尽量使用最小范围的选择器

.aux_panel a { }

.aux_column ul li a { }

后者控制的范围更小,更精确。

3. Keep CSS hacks to a minimum

尽量不要使用 css hack 技术。大部分css hack 都是针对 ie 6 的,ie 7 的出现以及补丁很可能会使你的hack 代码出现问题。

4. To work with EMs like with pxs, set font-size on the body-tag with 62.5%

使用 em 为单位的时候,别忘了设置 body {font-size:62.5%}

html { font-size: 62.5%; } body { font-size: 1.3em; } h1 { font-size: 1.5em; }

注意,这时候的h1 是19.5px而不是15px。

5. Use universal character set for encoding

设置正确的 meta encoding 字符集

当你使用文本编辑器的时候,你可能会忘了保存为 utf-8格式(默认经常是ascii或者ISO-8859-1)的话,也能帮助浏览器识别正确的编码集。

6. Use the power of selectors

充分利用选择器。IE 6可以通过 Dean Edwards’ IE7 script java script脚本来模拟 IE 6 本身不支持的选择器。

7. You can mark external links automatically

用 css 标注外部链接。作者建议使用该技巧时,content: 最好不要加文字,因为 css 是为了表现层而不是为了向网页输出内容的。作者推荐使用箭头图片。

a[href^="http://"] {padding-right:16px;background:a.gif center right no-repeat}

8. You can remove dotted links with outline: none;

用 outline:none 消除点击链接时的(获得焦点)虚线。

9. You can force IE to apply transparence to PNGs.Idea: You can define min-width and max-width in IE.

IE 也是可是支持png透明和min-width .max-width 的。当然,你还是需要 Dean Edwards’ IE7 script

tags cloud 字体大小效果

May 11, 2007 Author: | Filed under: Uncategorized

发现在 ubuntu(gutsy) 下用 font-size:XXpx 不管用,并不能很好的区分大小。今天无意中看到别人的标签云用的是百分比。拿 最新修改日志 作了个实验。

拿到 priority(1-5) 处理为 priority*15+100 % 的形式,通过 class=”scoreX” 拿到颜色。4分橙,5分红。xsl 的部分代码如下:

  • 直接查看源代码和sitemap.xsl