陈成的博客

反思我最近的工作效率问题，记下来，引以为戒

chencheng — Sun, 22 Aug 2010 11:17:26 +0800

趁玉伯改bug的时间，思考了下这个问题：我的工作效率在图书馆、家里和公司差别非常大，图书馆 >> 公司 > 家里。相关因素罗列如下：

图书馆：
        [+] 有计划，知道今天要做什么
        [+] 大块时间长
        [+] 就算出会小差，也能迅速拉回来

公司：
        [-] 经常会被人打扰
        [-] 经常看公司群和邮箱
        [-] 翻墙方便，导致经常挂在 twitter 上和过度地访问墙外网站

家里：
        [-] 老婆时不时会和我聊几句
        [-] 惦记着儿子
        [-] 有吃的，容易嘴馋
        [-] 看PLU
        [-] 看电影
        [-] 容易困
        [-] 出小差后，不容易拉回来

让前端忍不住喊爽的设计元素

chencheng — Wed, 04 Aug 2010 17:26:09 +0800

(此文目标对象为：设计师)

现状

视觉效果太复杂，前端一看就傻眼了，实现成本太大；
界面太简陋，仅采用一些简单元素比如直角、实色填充等实现设计。

其实可以尽情地使用这些设计元素

水平或垂直的线性渐变
箭头及各种箭头的变型
单像素圆角
简单阴影
半透明背景

以上这些设计元素对于前端实现来说有个相同的特点：即可以通过添加少量标签或完全利用CSS特性完成，实现成本和后期维护成本低，扩展性高，且不需要任何图片。图片对前端来说就是个难搞的事情，尤其是现在关注性能的同学还需要进行sprites合并。(真的，我宁愿多加几个tag，也不愿多加一张图片)

如果您认可优雅降级，还可针对高级浏览器选择以下设计元素

当然，IE用户是看不到的。

圆角
复杂的阴影
文字阴影

此外，设计师们还可以为Chrome、Safari浏览器设计一些小动画，比如鼠标移上去icon旋转下之类的。

只有让设计师更了解前端，才能实现设计效果和前端开发成本的双赢。

欢迎补充。

[mac] 代理切换利器 - ProxySwitcher (v0.1.0) 发布

chencheng — Sun, 01 Aug 2010 13:59:17 +0800

上周群里在讨论代理的问题，然后发现现在每次切换代理或更新pac都要这样来一遍："偏好设置 - 网络 - 高级 - 代理 - 设置好 - 应用”，很是费鼠标，决定利用周末的时间写个代理切换的小程序，将以上重复步骤简化为点一下鼠标。

更新0.1.1版本，自动检查网络的函数不对，暂时没找到好方法，先加入手动选择网络。

图：

功能介绍：

1) 在Socks, Pac, Http, None代理之间进行切换

2) 刷新Pac

安装：

下载后解压缩到Application目录后打开即可。

反馈：

如果您有任何建议或意见，请发邮件到 sorrycc#gmail.com，谢谢：）

IE6下百分比宽高设置原理

Thu, 04 Feb 2010 17:58:55 +0800

结构

<div id="A"><div id="B"><div id="C"></div></div></div>

情景

A 的 position 为 relative 或 absolute，或者 A 为 body (定位元素)
B 的 position 不为 relative 或 absolute (非定位元素)
C 的 position 为 absolute (绝对定位元素)

问题

C 的百分比宽度受以下影响：

B 的 margin, padding
A 的 padding

B 设置 layout 后，C的百分比宽高即以B为参照。

Favicon图标小常识

Thu, 04 Feb 2010 17:16:16 +0800

tips：如果根目录下有favicon.ico，可省去：

<link rel="shortcut icon" ...>

各浏览器下favicon的请求情况Google上搜过没找到，自己动手整理了下：

	icon文件实际存在				icon文件不存在(404)
	空Cache	有Cache且Cache没有过期			icon文件不存在(404)
	空Cache	Ctrl+F5/F5	地址栏按回车
Chrome	发送请求	不发送请求			发送404请求
Firefox	发送请求	不发送请求			如果两次都返回404，第三次开始不再请求
IE8/7	发送请求	不发送请求			如果一次都返回404，第二次开始不再请求
IE6/5x	只在加入收藏夹时，会请求icon，且cache过期前不再请求
Safari	发送请求	/	发送请求	不发送请求	发送404请求	不发送请求
Opera	发送请求	/	发送lastModified请求	不发送请求	发送404请求	不发送请求

rel：

IE6 Jump Bug

Thu, 04 Feb 2010 14:00:56 +0800

记性太差，写下来备忘。

Bug 演示：
http://f2ee.googlecode.com/svn/trunk/lab/2010/css/ie6-jump-bug.html

relative元素(A) > haslayout元素(B) > relative|absolute元素(C)

~~避免给B加layout，或者让C直接是A的子节点~~
Update: 给A添加layout可解决此bug (relative元素顺手添加layout可以避免很多bug，多谢ytzong提醒)

Flash的Fallback Content等

Thu, 04 Feb 2010 11:30:58 +0800

看youa的源码发现的，原来flash可以有fallback content：

<object type="application/x-shockwave-flash" data="...ny2010.swf" width="300" height="100" >
	<param name="movie" value="...ny2010.swf" wmode="transparent">
	<param name="menu" value="false">
	<param name="wmode" value="transparent">
	<a href="..." target="_blank"><img src=".../ny2010.png" alt="..." width="300" height="100"></a>
</object>

测试了Safari 4, Firefox 3, IE6/7/8禁用Flash插件的访问，均无兼容问题。

但是却有另外两个问题，都是IE下的：

Flash文件会被请求两次；
Flash要等全部下载好才播放；(尚未仔细验证)

所以最终采各家(见文末rel)所长后用了这种写法：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="68">
	<param name="movie" value=".../T1isRtXlNEXXXXXXXX.swf">
	<param name="wmode" value="transparent">
	<!--[if !IE]>-->
	<object type="application/x-shockwave-flash" data=".../T1isRtXlNEXXXXXXXX.swf" width="300" height="68">
	<param name="wmode" value="transparent"> <!-- for firefox -->
	<!--<![endif]-->
		<a href="http://www.taobao.com/" target="_top" style="height:43px;margin-left:56px;">
			淘宝网
			<img width="167" height="110" src=" alt="淘宝网" title="Taobao.com - 阿里巴巴旗下网站">
		</a>
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>

在HTML5 Spec中找到下面两段相关文字：

Some embedded content elements can have fallback content: content that is to be used when the external resource cannot be used (e.g. because it is of an unsupported format). The element definitions state what the fallback is, if any.

Due to the algorithm above, the contents of object elements act as , used only when referenced resources can't be shown (e.g. because it returned a 404 error). This allows multiple object elements to be nested inside each other, targeting multiple user agents with different capabilities, with the user agent picking the first one it supports.

但测试证明，没有浏览器在swf文件404时启用fallback content。

在浏览器支持flash的情况下(99%+?)，除IE家族外，其他浏览器均会发起对替换图片的请求。

rel:

新首页开发PPT详解 —— Sprites(1)

Sat, 16 Jan 2010 12:44:14 +0800

因PPT写得过于简短，此文对PPT里的第二部分详细说明下，可以对照着看。

占位标签

“The biggest problem with CSS sprites is memory usage.” —— vladimir，a leader in the Mozilla community

内存占用高是CSS Sprites的一大缺点，因为通常他会包含非常多的空白。这个网站曾经用了张1299 * 15000的Sprites图，虽然压缩后只有26K，但这张图的内存占用达75M+之多。

所以为了更好地应用Sprites，我们要减少Sprites里空白所占的比例。

搜索源码，可以发现共有38处<s></s>，42处<b></b>，他们都是用来占位的。s和b是两个废弃的标签，因为废弃，所以用起来既安全又环保。(经人提醒，b标签并没有被废弃，只是推荐优先选择strong和em)

个人觉得通过利用占位标签，可以更好地组织CSS Sprites，随心所欲地安排进行内部组织，使得Sprite图片尺寸尽可能地小，也使得空白位尽可能地少。

这里权衡下优缺点：

优点：性能(内存占用少)、工作效率(省去精心计算)、成就感(图美)
缺点：DOM数增加

(ps: 此法绝非我原创，此前王爷和就一直在用。)

Image Sprites

以下代码可以帮助理解什么是Image Sprites：

<div style="width:100px;height:100px;overflow:hidden;">
    <img src="" width="400" height="400" style="margin:-50px 0 0 –50px;" />
</div>

(Google搜索结果页的Sprites图)

Image Sprites最经典的例子当然是Google搜索结果页的logo了，logo和CSS Sprites公用一张图。但这种做法也需要权衡，并不是在所有场景都适用：

优点

省去logo的HTTP请求
提升Sprites图的在请求序列中的位置
有种情况我们可能都看到过：页面载入后，先是看到一个框架全好但没有背景图的页面，然后背景图一下子全部展现出来。这是因为通常背景图的请求发生在CSS载入并解析完成且HTML解析器遭遇到对应的节点时。应用此方法后，可以减缓这种情况的发生。因为1)不需要等待CSS载入，2)logo一般在HTML文档顶部，所以请求发起时间会有所提前。

缺点&问题

logo不可复制
logo作为品牌的象征，有些用户可能会希望把这张图片复制或另存下来做某些用途，但应用这种方法后会使用户得不到他们想要的。
可替换(alt)文本显示问题
使用负值定位后，alt文本会跟着img的位置一起变化，这样我们可能在图片未载入时就看不到希望看到的替换文本了。如图：

(推荐阅读：，)
IE渐进渲染PNG的bug(只测试IE6，IE7/8待考证)
我们知道，默认存储的图片在浏览器中是渐进渲染的。但IE在处理PNG的渐进渲染时表现地很怪异，一张13.8K的图片，在载入11K时才渲染这么一点(如下图)，然后到13.8K时全部展现，这个问题会导致Logo的展现缓慢。

(感兴趣的朋友可自行用Network Simulator打开看效果)

新首页开发PPT详解 —— HTML规范

Fri, 15 Jan 2010 17:27:16 +0800

因PPT写得过于简短，此文对PPT里的第一部分详细说明下，可以对照着看。

一、Doctype

A DOCTYPE is a mostly useless, but required, header. —— 《HTML5 Spec》

Doctype最大的作用是让浏览器用来选择渲染模式，或者说是用来触发标准模式。具体点说，就是设置正确的Doctype进入(准)标准模式，设置了错误的或者没设置Doctype则进入怪癖模式。(附：)

，标准模式和准标准模式的区别仅在于非IE6/7浏览器对于~~单元格里~~(原文说法可能有误，经测试所有图片均受影响)图片布局的不同处理。同事做了细致地测试并给出了解决方案。
Update 20100203：发现iframe的布局也受到影响，解决方法和图片一致。

还有个次要的作用是校验HTML时自动判断选择哪种规范。

另外，对于Doctype可能还存在的一些误解：

认为设置了xhtml的Doctype，使用自闭合标签，通过xhtml验证，文档就成xhtml了，浏览器会以xhtml的引擎来解析。
事实上，浏览器还是会以HTML引擎来解析文档。目前网上通过xhtml验证(页面下方贴xhtml验证通过图标)的其实都不是真正的XHTML，而是“HTML-Compatible XHTML”。因为XHTML刚出来时，浏览器都不支持他，然后W3C为了推广XHTML语法就搞了这么个东西。 (附：给HTML文档设置XHTML Doctype是有害的)
认为strict的doctype即进入了“严格解析模式”，比如认为严格模式下标签一定要全部小写，该自闭合的元素一定要自闭合，否则页面会出错。
事实上，doctype没有这个功能。

说到兼容问题，大家可能会奇怪IE6/7居然也支持HTML5 Doctype，难道是因为他的“预见性”。其实不是的，IE是只要doctype符合 <!doctype html xxxxxxxxxxx> 这种格式，都进入标准模式。个人猜测可能是W3C为了推广HTML5，利用了IE的这一点。

二、Charset的Meta标签

<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 

<meta charset="gbk" />

以上两种写法(均为兼容问题)的区别在于前者声明了mime-type为text/html。

所以主要问题就是这个mime-type声明能不能省去。据说，页面是text/html还是application/xhtml+xml还是其他什么的唯一决定权在于服务端的mime-type设置，所以页面上是否设置了mime-type完全没有意义。玉伯有另一种说法是mime-type有优先级，会先从取服务端，再取页面，因目前服务端基本都有设置，所以省去。(待测试考证)

三、CSS和JavaScript的引入方式

<link rel="stylesheet" href="" type="text/css" media="all" />
<style type="text/css"></style>
<script type="text/javascript" src=""></script>

这几个加删除线的属性都是默认值，故省去，详见。

======

今天看了后想到的两点：

经测试，没设置的页面，Chrome/FF/Safari/Opera则会请求favicon.ico，~~而IE6/7/8不会请求。如果不想放弃IE下的这个icon，还是不要学省去这个标签。~~
Update 20100130：可以省去，会写文章详细地说明下。
一直在纠结这个问题。HTML解析器不认识XML的自闭合语法，会认为 / 是一个属性，然后因为 / 不是个合法的属性而过滤掉。省去？一直都有的，去掉可能会不适应。不省去？怎么看怎么不像HTML。

淘宝新首页开发实践PPT分享

Wed, 06 Jan 2010 13:38:39 +0800

淘宝新首页开发实践

View more presentations from .

详解：

To be continued…