遂花了些玩蛋的时间写了这个扩展，这里安装：Chrome扩展腾讯微博提醒安装地址

Chrome扩展比较好写，翻下文档（中文翻译）就OK了

引用邓侃老师《Yahoo 与 Google，一点个人看法》中的话作为ending：

计算机行业的伟大成功大多遵循一个模式：拥有完善的基础架构，在此架构上有几个杀手应用，系统提供API。微软是这个模式最杰出的代表，无须赘言，它的基础架构就是Windows操作系统。互联网界的成功典范是 Google：它的架构说玄一点叫“云计算”，说平实一点就是遍布全球，前无古人的超大数据中心，和以Google File System文件系统，MapReduce并行处理技术等等，搭建起来的存储和计算平台。杀手应用也不多：搜索和广告。API的推广集中在地图和社区等方面。

为什么说这个模式容易造就伟大的成功呢？先说基础架构。这就好像国内的高速公路，修起来不容易，但一旦修好就坐地收钱，而且此系统有排它性。杀手应用也不可或缺，用户是无所谓什么操作系统的，他们在意的是杀手应用，另外操作系统上绑定的应用也别太多，否则用户就糊涂了。那么如何满足各 种用户的不同需要呢？答案是API。API的主要优点是规模效应，世界上总是有很多有聊或无聊的程序员（身兼产品经理）设计生产出各种基于API的软件或应用。用户呢，自行选择安装，丰俭由人。

我参加过两届，流水账一下：

• 第二届：也许不是周末的原因，到的人不太多，而其中很多是腾讯的。那时我刚正职做前端。认识了彪叔（彪叔很有个人魅力的说，其中关于web2.0的单手定则至今印象深刻，其中大拇指的作用我一两年后才明白）；也见到了飘飘（安静而忧郁）、小志（话痨）、tommy（讲的图片优化我听完回去就用上了）、77（推动浏览器前进神马的，话题有些太泛）、老卡（画sitemap令我耳目一新）、红姐（刚毕业）、jeanne（很安静）等人；还有个刚来我公司面试不久而被我锯掉的哥们（呵呵，现在想起来还有些囧）
• 第三届：人翻了两三倍，热闹了很多。会上见到了twitter上神交已久的神飞（前端观察都听过吧），还有ivane（也是twitter上认识的）和大猫（从杭州过来的）；还和组里的几个MM（出力姐、自称是女人不是女孩的grace、小萝莉啵你等）有了第一次的亲密接触；印象比较深刻的有两个，一个是舜子的QZONE优化（各模块有讲究的加载顺序），另一个是网易的比较有争议的模板（大部分人更注重语义，对一些视觉命名的class不能接受，不过我的观点是网易的做法有不少可取之处）；彪叔的《一专多长》我没怎么参透，呵呵~后面见了鬼哥（和想象中不太一样，博客的写作风格比较有距离，不过真人很好接近）、大布（一言不发，一直在压抑自己的性格–也就是所谓的性压抑，后来一起旅游时放的很开）、banny（算错帐被彪叔屌）

即将到来的第四届比较期待：

• 石玉磊《Web前端开发实用工具》（由于大猫的关系，和yuni小聊过几次，每次都有被开释的感觉）
• 郑焕义《重温网站重构》（最佳新人啦）
• 张思坚《浏览器兼容性》（前东家的，当然要力挺）
• 彪叔的《化烦为减》（彪叔的东西往往让人听一次而想一年）

下载CssGaga

解压了就能用，前提是装了.NET Framework 2.0+

这个跟之前项目里使用的有些差别：

1. 重新调整了思路，代码改动较大，未在实践中检验，所以大家注意BUG并反馈哈
2. 精简了界面，将一些功能（去注释、格式化、不换行压缩）默认开启，不再提供复选框进行设置

Truecolor versus palette image formats

Using the RGB color model, how many distinct colors can you represent in a graphic? The answer is more than 16 million: 255 * 255 * 255 (or 2²⁴) gives you 16,777,216 combinations. Image formats that can represent this many colors are called truecolor image formats; examples are JPEG and the truecolor type of PNG.

To save space when storing the image information in a file, one technique is to create a list of all the unique colors found in the image. The list of colors is called a palette (also called an index). Having the list of colors, you can represent the image by keeping track of which palette entry corresponds to each pixel.

The palette can contain any RGB value, but the most common palette image formats GIF and PNG8—limit the number of palette entries to 256. This doesn’t mean you can pick from only 256 predefined colors. On the contrary, any of the 16+ million colors
are up for grabs, but you can only have up to 256 of them in a single image.

最后一段说GIF和PNG8最多只能包含256色，并不意味着只能从256种已定义好的颜色中选择，可以从2²⁴种颜色中挑选！

另外，本章还给出一些关于CSS Sprite的优化建议

Highly Optimized CSS Sprites

Sometimes optimizing sprites is more complex than optimizing images. Diverse resources combined in one sprite may be harder to compress well. Following these best practices will make your sprite as small as possible:

• Combine like colors; for example, sprite icons with a similar color palette.
• Avoid unnecessary whitespace, making images easier to process on mobile devices.
• Arrange elements horizontally instead of vertically. The sprite will be slightly smaller.
• Limit colors to stay within the 256-color limit of PNG8.
• Optimize individual images, and then the sprite. Color reduction will be easier with a limited palette.
• Reduce anti-aliased pixels via size and alignment. If an icon is slightly off-square, you can often reduce the anti-aliased pixels by aligning the image horizontally or vertically.
• Avoid diagonal gradients, which cannot be tiled.
• Avoid alpha transparency in Internet Explorer 6 or quarantine images that require true alpha transparency in a separate sprite.
• Change the gradient color every two to three pixels, rather than every pixel.
• Be careful with logos. They are very recognizable, so even small changes are likely to be noticed.

• CssGaga
• 功能演示视频（未和CssGaga同步更新，不过可以大概看下使用方法）

运行环境

• Windows XP（需安装Microsoft .NET Framework 3.5）
• Windows Vista
• Windows 7

注：使用前请更改配置文件

CssGaga.exe.config

操作文件类型

• .css 文件名必须以“.source.css”结尾，供开发使用（SVN只需托管*.source.css），经工具生成后会去除“.source”用于发布，即

  style.source.css → style.css

  注：会覆盖或删除之前的 style.css

• .jpg
• .gif
• .png
• .cur

压缩CSS

去除注释和空白

Before:

/*****
  Multi-line comment
  before a new class name
*****/
.classname {
    /* comment in declaration block */
    font-weight: normal;
}

After:

.classname{font-weight:normal}

保留注释

Before:

/*!
  (c) Very Important Comment
  Very Important Comment
*/
.classname {
    /* comment in declaration block */
    font-weight: normal;
}

After:

/*!(c) Very Important Comment Very Important Comment */
.classname{font-weight:normal}

去除结尾的分号

Before:

.classname {
    border-top: 1px;
    border-bottom: 2px;
}

After:

.classname{border-top:1px;border-bottom:2px}

Before:

去除多余的分号

.classname {
    border-top: 1px; ;
    border-bottom: 2px;;;
}

After:

.classname{border-top:1px;border-bottom:2px}

去除无效的规则

Before:

.empty { ;}
.nonempty {border: 0;}

After:

.nonempty{border:0}

去除零值的单位并合并多余的零

Before:

a {
    margin: 0px 0pt 0em 0%;
    background-position: 0 0ex;
    padding: 0in 0cm 0mm 0pc
}

After:

a{margin:0;background-position:0 0;padding:0}

去除小数点前多余的0

Before:

.classname {
    margin: 0.6px 0.333pt 1.2em 8.8cm;
}

After:

.classname{margin:.6px .333pt 1.2em 8.8cm}

色值压缩

Before:

.color-me {
    color: rgb(123, 123, 123);
    border-color: #ffeedd;
    background: none repeat scroll 0 0 rgb(255, 0,0);
}

After:

.color-me{color:#7b7b7b;border-color:#fed;background:none repeat scroll 0 0 #f00}

不压缩RGBA与IE滤镜中的色值

Before:

.cantouch {
    color: rgba(1, 2, 3, 4);
    filter: chroma(color="#FFFFFF");
}

After:

.cantouch{color:rgba(1,2,3,4);filter:chroma(color="#FFFFFF")}

去除编码声明

Before:

@charset "utf-8";
#foo {
    border-width: 1px;
}

/* second css, merged */
@charset "another one";
#bar {
    border-width: 10px;
}

After:

#foo{border-width:1px}#bar{border-width:10px}

压缩IE滤镜

Before:

.classname {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);       /* IE < 8 */
}

After:

.classname{-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80)}

去除多余引号

Before:

@import url("mod-1.css");
@import url('mod-2.css');

After:

@import url(mod-1.css);
@import url(mod-2.css);

Before:

.classname{ background: url("img/icon.png"); }
.classname{ background: url('img/icon.png'); }

After:

.classname{background:url(img/icon.png)}
.classname{background:url(img/icon.png)}

不会影响正常的引号

Before:

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

After:

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

对HACK的影响

支持常用HACK

Before:

#element {
    width: 1px;
    width: 2px\9;
    *width: 3px;
    #width: 3px;
    _width: 4px;
}

After:

#element{width:1px;width:2px\9;*width:3px;#width:3px;_width:4px}

不支持以下HACK

html >/**/ body p {
    color: blue;
}

#elem {
    width: 100px; /* IE */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 200px; /* others */
}

修正常见 bug

保留空格(IE6 bug)

Before:

.classname:first-letter { font-weight: bold; }
.classname:first-line { font-weight: bold; }

After:

.classname:first-letter {font-weight:bold}
.classname:first-line {font-weight:bold}

中文字体Unicode编码

Before:

.classname { font-family: 宋体; }
.classname { font-family: 黑体; }
.classname { font-family: 微软雅黑; }

After:

.classname{font-family:\5B8B\4F53}
.classname{font-family:\9ED1\4F53}
.classname{font-family:\5FAE\8F6F\96C5\9ED1}

注：支持以上三种字体

删除不安全字体sans-serif(IE8 bug)

Before:

.classname { font-family: 宋体, sans-serif; }

After:

.classname{font-family:\5B8B\4F53}

cursor生成根路径(IE6&7 bug)

Before:

{cursor:url('cursor/pre.cur'), auto;}

After:

{cursor:url(http://imgcache.qq.com/qzonestyle/css/cursor/pre.cur),auto}

注：

• cur文件所在的cursor文件夹与css同级且引用时为相对路径
• 需在配置文件里设置下面两项的对应关系

  <add key="pathSource" value="E:\isd_webrebuild_rep\qzonev5_proj\trunk\qzonestyle\" />

  <add key="webSiteUrl" value="http://imgcache.qq.com/qzonestyle/" />

合并CSS

Before:

@import url("reset.import.source.css");
@import url("grid.import.source.css");
@import url("mod-1.source.css"); /* mod-1.source.css 中 @import url("media.source.css"); */
@import url("mod-2.css");
@import url("../mod-3.source.css");
@import url("http://imgcache.qq.com/qzonestyle/mod-4.source.css");

After:

@import url(media.css);
@import url(mod-2.css);
@import url(../mod-3.source.css);
@import url(http://imgcache.qq.com/qzonestyle/mod-4.source.css);
[reset.import.source.css 处理后的代码]
[grid.import.source.css 处理后的代码]
[mod-1.source.css 处理后的代码]

注：

• 只合并同级的*.source.css
• 文件名包含“.import.source.css”的文件不会生成的同步目录（例如，不会生成到72等服务器）
• 只合并一次，若mod-1.source.css中import了其他css文件（即便同级）则不做处理

data URI & MHTML

Before:

.base64{background-image:url('base64/logo.png');}

注：

• 要转换的图片文件所在base64文件夹与css同级且引用时为相对路径

After:

• 
  生成MHTML

  .base64{background-image:url(data:image/png;base64,[base64 string])}

• 
  生成MHTML

  
  分离MHTML

  /*
  Content-Type:multipart/related;boundary="_YT"
  
  --_YT
  Content-Location:logo.png
  Content-Transfer-Encoding:base64
  
  [base64 string]
  
  --_YT--
  */
  .base64{background-image:url(data:image/png;base64,[base64 string]);#background-image:url(mhtml:http://imgcache.qq.com/qzonestyle/css/style.css!logo.png);}

  注：

  • 需在配置文件里设置下面两项的对应关系

    <add key="pathSource" value="E:\isd_webrebuild_rep\qzonev5_proj\trunk\qzonestyle\" />

    <add key="webSiteUrl" value="http://imgcache.qq.com/qzonestyle/" />

• 
  生成MHTML

  
  分离MHTML

  .base64{background-image:url(data:image/png;base64,[base64 string]);#background-image:url(mhtml:http://imgcache.qq.com/qzonestyle/css/mhtml.css!logo.png);}

  注：

  • 需在配置文件里设置下面两项的对应关系

    <add key="pathSource" value="E:\isd_webrebuild_rep\qzonev5_proj\trunk\qzonestyle\" />

    <add key="webSiteUrl" value="http://imgcache.qq.com/qzonestyle/" />

  • 会在css文件同级生成mhtml.css

生成MHTML时，若图片为alpha透明的png并以”.alpha.png“为结尾命名，则会自动生成IE6滤镜

.base64{background-image:url(data:image/png;base64,[base64 string]);#background-image:url(mhtml:http://imgcache.qq.com/qzonestyle/css/style.css!shadow.alpha.png);_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mhtml:http://imgcache.qq.com/qzonestyle/css/style.css!shadow.alpha.png',sizingMethod='scale');}

压缩图片

• *.png → *.png

• *.jpg → *.jpg

  若文件大于10KB，则转换为渐进式jpg

何时压缩图片？

• 不选择同步的情况下，拖进来直接压缩
• base64编码前压缩
• 同步前压缩

注：图片压缩前不会备份，请自行备份

自动登录同步服务器

须配置，不需登录脚本则留空

<add key="cmdDest1" value="" />

<add key="cmdDest2" value="139.bat" />

<add key="cmdDest3" value="217.bat" />

注：CssGaga启动时即自动登录服务器

同步文件并生成提测文件列表

• 须配置本地路径与目的路径的对应关系

  <add key="pathSource" value="E:\isd_webrebuild_rep\qzonev5_proj\trunk\qzonestyle\" />

  <add key="pathDest1" value="\\172.25.32.72\imgcache\qzonestyle\" />

  <add key="pathDest1" value="\\172.25.32.139\imgcache\qzonestyle\" />

  <add key="pathDest1" value="\\10.6.207.217\data\release\imgcache\qzonestyle\" />

• 须配置本地路径与提测格式的对应关系

  <add key="pathSource" value="E:\isd_webrebuild_rep\qzonev5_proj\trunk\qzonestyle\" />

  <add key="pathReport" value="/usr/local/imgcache/htdocs/qzonestyle/" />

  生成的提测文件列表格式如下：

  /usr/local/imgcache/htdocs/qzonestyle/img/1.png
  /usr/local/imgcache/htdocs/qzonestyle/img/2.png
  /usr/local/imgcache/htdocs/qzonestyle/img/3.png

注：同步路径可在配置中更改显示名称

<add key="pathDest1Name" value="拷到72" />

备份

选中备份后同步时在目的文件文件夹中建立backup文件夹，备份文件名中会加入备份时间

\\172.25.32.72\imgcache\qzonestyle\xiaoyou_portal_v2\img\backup\logo-2010-9-2 13.54.20.png

CSS3属性自动生成

注：只支持下面提到的属性

Before:

.column {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
}

After:

.column{-moz-column-count:4;-webkit-column-count:4;column-count:4;-moz-column-gap:20px;-webkit-column-gap:20px;column-gap:20px}

Before:

.border-radius {
     -moz-border-radius: 12px;
}

After:

.border-radius{-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px}

Before:

.border-radius {
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 20px;
}

After:

.border-radius{-moz-border-radius-topleft:20px;-webkit-border-top-left-radius:20px;border-top-left-radius:20px;-moz-border-radius-topright:0;-webkit-border-top-right-radius:0;border-top-right-radius:0;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;border-bottom-left-radius:0;-moz-border-radius-bottomright:20px;-webkit-border-bottom-right-radius:20px;border-bottom-right-radius:20px}

Before:

.box-shadow {
     -moz-box-shadow: 0px 0px 4px #ffffff;
}

After:

.box-shadow{-moz-box-shadow:0 0 4px #fff;-webkit-box-shadow:0 0 4px #fff;box-shadow:0 0 4px #fff}

Before:

.transform {
     -moz-transform: rotate(9deg);
}

After:

.transform{-moz-transform:rotate(9deg);-webkit-transform:rotate(9deg);-o-transform:rotate(9deg)}

Before:

.transition {
     -moz-transition: all 0.3s ease-out;
}

After:

.transition{-moz-transition:all .3s ease-out;-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out}

Before:

input[type="text"], textarea {
    -moz-box-sizing: border-box;
}

After:

input[type="text"],textarea{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}

后续开发计划

css变量等等，基于CSS Wish List（偶们组之前的另外一个美女raina有翻译过，不过她的网站暂时打不开了，网址以后补上），Nicole Sullivan又整理了份css变量标准，正好可以参考

]]> http://www.99css.com/?feed=rss2&p=542 17 http://www.99css.com/?p=538 http://www.99css.com/?p=538#comments Sat, 10 Jul 2010 08:58:54 +0000 ytzong http://www.99css.com/?p=538













via Building Performance Into the New Yahoo! Homepage by Nicholas Zakas, Yahoo!

]]> http://www.99css.com/?feed=rss2&p=538 0 http://www.99css.com/?p=528 http://www.99css.com/?p=528#comments Sat, 10 Jul 2010 04:36:25 +0000 ytzong http://www.99css.com/?p=528 很久之前写了使用 background:url(#) 解决 IE bug，原理是请求一张不存在的图片，不过写法有些问题。

写为

background:url(#)

会增加一个http请求，比如当前css的URL为

http://imgcache.qq.com/qzonestyle/project/css/xxx.css

则会多请求一次

http://imgcache.qq.com/qzonestyle/project/css/xxx.css#

和以下类似（详见解决IE6.0.2800压缩HTTP数据Bug之草记）

http://imgcache.qq.com/qzonestyle/project/css/xxx.css?t=20100710.css

这样写可以避免这个问题

background: url(iesucks);

——————- 亡羊补牢的分隔线 2010-7-17 ——————-

上面的测试过程有些问题，经过用真实环境重新测试这样搞效果更差，若调用该css的页面地址是

http://www.99css.com/

则会先请求

http://www.99css.com/iesucks

之后301转向至

http://www.99css.com/iesucks/

改用透明图片不太甘心，不如变态一点，直接调用该css本身，因为css已经被下载并缓存了

background: url(http://imgcache.qq.com/qzonestyle/project/css/xxx.css);

]]> http://www.99css.com/?feed=rss2&p=528 4 http://www.99css.com/?p=529 http://www.99css.com/?p=529#comments Tue, 29 Jun 2010 09:33:49 +0000 ytzong http://www.99css.com/?p=529 深圳华为（有可能是其子公司）
1. 3年以上设计经验
2. 本科 + 英语CET-4（必需）
3. 懂html/css/js
4. 懂交互

待遇不错，急招！（上次招前端没好人选，后面找了外包公司，汗~）

简历至：hungjunling@huawei.com

根据电话记录整理（让他发邮件给我具体要求，说是公司有么斯限制），有疑问邮件联系

]]> http://www.99css.com/?feed=rss2&p=529 2 http://www.99css.com/?p=521 http://www.99css.com/?p=521#comments Thu, 17 Jun 2010 03:53:47 +0000 ytzong http://www.99css.com/?p=521
]]> http://www.99css.com/?feed=rss2&p=521 2 http://www.99css.com/?p=516 http://www.99css.com/?p=516#comments Mon, 07 Jun 2010 03:27:41 +0000 ytzong http://www.99css.com/?p=516 上篇提到了获得了license的事情，鉴于对现在的我和周遭的人价值不大，不如共享，注意8月29号过期！

下载HttpWatch 7.0 license

能用最好，不能用买正版克:)

]]> http://www.99css.com/?feed=rss2&p=516 7