2006年11月27日
用百分比进行背景图片定位
大部分人应该习惯于使用描述性词语（left、top、center…）或者数值（20px、1em…）对背景图片定位，百分比可能比较少用，常见的有50%、100%等数值。例如希望背景图片水平居中，距离容器顶部20px，可以使用
background-position: 50% 20px;
之所以不使用
background-position: center 20px;
是因为类似这种描述性词语和数值混用的形式不被W3C推荐。（单纯的描述性词语组合使用是没有问题的，例如：background-position: right bottom;）阅读全文...
使用百分比进行定位的好处是可以利用CSS的计算功能，达到px定位所难以完成的任务。例如在一个宽高均为300px的容器中，使用
background-position: 150px 150px;
可以看到背景图片的左上角顶点（坐标0,0）定位到了齐容器的中心点（坐标150px,150px）。
而把150px替换为50%，使用
background-position: 50% 50%;
看到的并不是如下的效果
而是这样
可见，CSS计算出了背景图片的中心点。这也可以解释为什么我们在使用
background-position: 100% 100%;
定位的时候，图片被放置在容器的右下角，而并没有跑出容器。（如果使用 background-position: 300px 300px; 的话，背景图片会被移出容器）
同样，如果使用
background-position: 20% 20%;
会将背景图片的坐标点(20%,20%)定位到容器的坐标点(20%,20%)。
推荐一款实用小软——FastStone Capture
一款顺手的小软件能够很大程度提升工作效率，FastStone Capture正是如此。从名字上就可以看出来，这是一款截屏软件，但我平时最常用到的是它附带的其他两个小功能：取色器和屏幕放大镜。 阅读全文...
取色器
现在网上各式各样的取色器应该不少了，包括之前一直用的蓝色经典推荐的ColorSPY，Firefox下还有一个专门的取色器扩展ColorZilla，这些都是很好的软件。但自从使用了FS Capture之后，这些我都很少用到了。原因很简单，各种取色软件的功能都大同小异，FS Capture非常小巧，既然有这样一个小软件能够包含取色器、屏幕放大镜和截屏的功能，为什么还要为这些功能而分开多个软件呢。FastStone Capture的取色支持RGB、Dec和Hex三种格式的色值，而且还有一个混色器，取到颜色之后可以再编辑。
屏幕放大镜
这确实是一个不错的功能，特别是现在我们已经习惯用DIV来对页面定位，DIV之间的对齐不像表格那样容易控制，有时为了调整几个象素的偏差，不得不对着屏幕盯很久。有这样一个放大镜就方便多了。使用时只需点击一下FS Capture窗口上的放大镜图标，鼠标变成一个放大镜的样子，然后在需要放大的地方按下右键就可以了，就像手里真的拿着一个放大镜一样。可以设置放大倍律，放大镜的尺寸，外观（圆形，矩形以及圆角矩形）以及是否平滑显示，按ESC键或单击右键可退出放大镜。
截屏
包括了全屏截取，当前活动窗口截取，截取选定区域，多边形截取和截取滚动页面等，基本上常用的都有了。特别是滚动截取，许多朋友为了这个功能不惜安装各种重量级的截屏软件，甚至四处下载各种软件的破解器——忘了说了，FS Capturte是一款免费软件！如今已经是收费的了
图像浏览/编辑
FS Capture还包括快速浏览/编辑图像的功能，可以点击主窗口的“打开”图标快速打开一幅图片，进行简单的缩放、裁切、旋转、加文字等轻量级的操作。把网页中图片拖到FS Capture的窗口上，会快速打开图像浏览窗口。
FastStone的另一款软件FastStone Viewser（免费的，优秀的图片浏览软件）也相当值得一提，事实上我正是在下载FS Viewser的时候才发现FS Capture的。
巧用Javascript的location对象给Blog各页面加上标题
在使用了Blogger系统的Blog中，存档页面和Label（Beta）页面都没有一个醒目的标题，看起来跟首页没有什么两样，这对于阅读者来说多少有些不友好。如果能够给每个页面加一个标题，例如“存档：2006/11 - 2006/12”或者“TAG：Javascript”，那么阅读者就会减少很多迷惘（本站的演示:Label页面、存档页面）。这个功能只需了解一下Javascript中的location对象就不难实现。阅读全文...
以URL
http://www.mixfog.com/blog/index.htm?action=view#comment
为例，看一下location对象的几个常用属性：
| 属性 | 值 | 备注 |
| hash | comment | 即我们平时所说的“锚点”链接 |
|---|---|---|
| host | www.mixfog.com | 主机名 |
| hostname | mixfog.com | 与host相同，有时会省略www |
| href | http://www.mixfog.com/blog/index.htm | 完整的URL |
| pathname | /blog/index.htm | URL中hosthost之后的内容 |
| port | 端口信息，通常都是空的 | |
| pritocol | http: | 协议 |
| search | ?action=view | 查询字符串 |
看了这个表之后，基本上能够总结出一个解决方案了。Blogger中生成的Label页面的URL都是
http://Blog地址/labels/labelName.htm
用Javascript很容易就可以得到这个labelName。
同样，如果设置了存档文件的目录为“archives”，文件名为archive.htm的话，一个存档页面的URL应该类似
http://Blog地址/archives/2006_11_01_archive.htm
也会很容易的获得“2006_11_01”这个字段作为存档页面的标题。但是有一个更好的途径，利用存档页面的<title>，Blogger生成的存档页面的<title>大多是“网站名称:存档时间”，这个存档时间的格式是由个人在后台设置的，例如本站为“2006/11 - 2006/12”。
那么看一下具体的代码：
function getPageTitle() {
var pathName = location.pathname; //获得页面路径
if (pathName.indexOf('/labels/')!=-1) { //判断是否为Label页面
var fileName = pathName.split('/labels/');
var tagName = fileName[1].split('.');
document.write ('<h1>TAG: '+ tagName[0] +'</h1>');
} else if (pathName.indexOf('/archives/')!=-1) { //判断是否为存档页面
var pageTitle = document.title.split(':');
document.write ('<h1>存档: '+ pageTitle[1] +'</h1>');
}
}
代码很简单，基本上没什么好说的，然后在模板中调用getPageTitle即可。由于只在Label页面和存档页面用到，所以ItemPage就完全不需要这段代码：
<MainOrArchivePage><script type="text/javascript"> getPageTitle(); </script><MainOrArchivePage>
把这段代码加在模板中希望出现页面标题的位置即可，本站的演示可参考“Label页面”、“存档页面”。有几个需要注意的地方：
- 存档的路径会因为个人设置的不同而不同，这不难解决。
- 本例中假设站点名称中不包含半角的冒号，因为存档页的时间和站点标题是用半角冒号来分割的，但即使包含，也不难解决。
- 第三个有点致命，不支持中文的Label，因为Blogger对中文的Label进行的转码，例如“电影”，对应的Label页面地址可能是“55S15b2x.htm”，好在我的Blog中尽量少用中文的Label名称，所以这个问题就有待其他人士来解决吧。
- 补充一个，如果您的Label中含有空格，在URL中会自动转换为20%，在获取的时候就需要转换回来，但是个人不建议在Label中使用空格，用一个连字符“-”也许更好。
标签： blogger, blogging, javascript
最近被Blogger beta的Feed搞得比较烦
前不久因为Blogger beta迟迟不推出ftp发布功能，打算把blog转换到Thingamablog（一款开源的桌面Blog发布软件，基于java），等我准备得差不多了，Blogger beta却推出了ftp发布功能，而且还支持label，我又把做的差不多的Thingamablog模板改到Blogger上来，之前在 Thingamablog上写的几篇文章，放在Blogger beta上修改了一下，结果问题就出来了。Blogger beta的Feed升级到ATOM 1.0，而且取消了原有的RSS 2.0格式。在现在的Feed中有两个时间，一个<published>，一个<updated>，对应一个发表时间，一个修改时间。而我现在用Feedburner来烧制Feed，并开启了格式转换，转换成RSS 2.0（不转换的话，BXNA认为原feed存在格式错误）。Feedburner使用了那个<updated>，也就是说我修改一下现有的文章，即使只改个标点，Feedburener也会获取到这个修改时间，并把这个时间当成文章的发布时间，把文章提到最新。正是由于这个原因，我的几篇文章长时间在BXNA上位居前列，对读者造成了不便，对不起各位。
这几天在网上找解决方案，也没什么收获，找到了一些Blogger beta的Feed地址，放在这里存档一下。阅读全文...
站点文章Feed：
http://beta.blogger.com/feeds/blogID*/posts/type*
站点评论Feed：
http://beta.blogger.com/feeds/blogID*/comments/type*
单篇文章的评论Feed：
http://beta.blogger.com/feeds/blogID*/postID*/comments/type*
Label Feed：
http://beta.blogger.com/feeds/blogID*/posts/type*/-/labelname*
*说明：
- blogID和postID都不用说了。type可以是full、summary和default，分别对应全文、摘要和默认，默认的话根据Blogger管理后台中的设置来显示。
- 有说法是labelname可以有多个，中间用/隔开，但我试了一下好像不行。
- 还有两个有用的参数：max-result和start-index。默认的Feed是从第一条开始，一共输出25条，如果加上?max-results=60就是输出60条，加上?start-index=5就是从第五条开始输出。
标签： atom, blogger, blogging, feed, feedburner
利用outline以及IE的button背景图Bug制作双线边框的按钮
首先声明一下，这篇文章中所讲的实例使用到了浏览器的Bug，这是不被推荐的，仅供大家参考一下。或者在确认这个方案对整个网站的整体效果影响不大的时候，可以小用一下。
我们都知道，在CSS默认的边框属性中，有double这个选项，代表双线，但是在实际运用中，这个属性的效果并不理想，两层边框只能使用一种颜色，而且各个浏览器的解释也略有差异。
在一次工作实例中，我本想给<button>添加一个背景图片，做一个好看点的按钮，却发现IE在显示<button>的背景图片时，存在一个Bug：IE总是在<button>的边框和背景图之间，显示1px宽的间隙，间隙的颜色由<button>的背景颜色决定。
这个发现非常好玩，本来<button>只有一层边框，现在看起来就像是内外两层边框了。这样不就可以做出双层边框效果的按钮了吗。不过说到底，这只是IE的Bug，其他的现代浏览器在显示<button>的背景图片时，还是非常标准的，不存在这1px的间隙。好在CSS 2有另外一个属性：outline，这个属性理所当然的不被IE支持，Firefox，Opera，Safari等浏览器的当前版本都可以正常显示它。这样，我们就可以有一个方案了：
- 对于IE，使用border做外边框，使用Bug中提到的1px间隙做内边框
- 对于现代浏览器，使用outline做外边框，使用border做内边框
完整的方案如下图所示：
经过美化后的CSS方案：
button {
line-height: 40px;
color: #1e3182;
background: #FFF url(button_bg.png) repeat-x 0 0;
padding: 0 1.5em 0 2em;
letter-spacing: 0.5em;
cursor: pointer;
}
*>button { /*for modern browser*/
height: 40px;
outline: 1px solid #9DAAE2;
border: 1px solid #FFF !important;
}
* html button { /* for IE 6.0/IE 5.* */
border: 1px solid #9DAAE2;
}
*+html button { /* for IE 7 */
border: 1px solid #9DAAE2 !important;
}
这个方案的优点是：
- 可以随意变换双层边框的颜色，内外边框可以不同
- 按钮的宽度不用定死，由其内部的文字多少来决定
- 按钮所用到的图片只是很窄的一幅背景图
当然缺点就是双线边框中的内边框在IE下只能是1px，而且由因IE修补Bug而导致方案失效的危险。
您可以在这个页面看到实例，虽然由于浏览器的其他原因，显示的效果略有差异：IE 6高出了3px，IE 7.0又矮了两个象素，而且IE显示的宽度都比实际定义的宽出一些，但双线的效果总算都还可以接受。
标签： browser-bugs, css, ie, web
Opera下max-width与display:table-cell的显示bug
max-width和disply:table-cell是非常好用的两个CSS属性。利用max-width和max-height，可以非常方便的将网页中的图片缩小到一定尺寸，而且保证较小的图片不会被放大，图片的宽高比例也不会被强行改变。而disply:table-cell和其他的disply:table等属性结合，可以用div等标签模拟出table的结构，对于页面的排版也非常有用。
但是现在看来，Opera(9.00)对max-width的解释有些跟其他浏览器不一致。如果一个图片的原始宽度是300px，在CSS中定义它的max-width为100px，Opera确实能够按照max-width的值显示，但是这个图片在页面中所占据的实际位置却仍然按照原始宽度300px来计算。这点在普通情况下不太明显，一旦把图片放置在一个disply为table-cell的元素中，例如常规的td，或者是disply定义为table-cell的div或其他元素，问题就出来了。Opera会依照图片的原始宽度，把table-cell撑开到300px，虽然显示的图片只有100px宽。而高度却显示正常。阅读全文...
下图说明了Firefox对这种情况的显示方式，这也正式我们希望的：
而Opeera却是这样显示的：
这里有一个实例，您可以在不同的浏览器中查看本页的显示结果，当然，不要对IE抱有太大的希望。
这是一张原始图片，尺寸为300px/300px，我们把它max-width和max-height都定义为100px：
img {
max-width: 100px;
max-height: 100px;
}
把它放置在一个宽度和高度均为200px的单元格td中：
td {
width:200px;
height:200px;
vertical-align: middle;
text-align: center;
background: #F5F3FF;
border: 1px solid #CCC7E1;
}
|
|
把它放置在一个disply为table-cell，宽度和高度均为200px的span标签中，之所以选择span标签，是为了更能体现出IE的显示效果，另外，span之外需要有一个display为table的元素，我们选用一个div：
span {
disply: table-cell;
width:200px;
height:200px;
vertical-align: middle;
text-align: center;
background: #F5F3FF;
border: 1px solid #CCC7E1;
}
标签： browser-bugs, css, max-width, opera, web
关于Dennis Lee
Dennis Lee，男，帅，啤酒控。生于八十年代，山东潍坊人。
幼居乡野，有水名浞，民风憨直，夜不得不闭户。浞者，盖名于篡杀后羿之贼也。此贼寒浞，弑夷羿而寡嫦娥，娥居广寒，见戏于天猪，余每每愤然。
习泡妞之术，每出手，莫不见血封喉。及弱冠，则弃妞不泡，专研发呆。心如止水，意无旁骛，个中真意，自谓得之一二。
尝发奋求学，徙关外，之奉先。学无成，乃退。
今居京师，事界面/用户体验设计及 Web 前端实现等无产阶级革命工作，屡遭沙尘摧残，堵车蹂躏，终不返。
勤购书，不求甚读。纵情声光画影，日与 David Byrne、James Brown、窦唯游，夜尝伴以 Quentin、Scorsese、De-Niro 之徒。
人言其性温和敦厚，有上古遗风，颇中肯。
如有必要，通过以下方式联系我：
- Twitter ( Follow me, send Direct message )
- Mail/Gtalk/MSN: im@fangming.li
标签： blogging, Dennis-Lee, lushnis