CSS森林

快过年了，每到年底有会有这样那样的总结、汇报、计划等等。从写完《 在腾讯的两年 》到现在，也有一年多没做过总结了。这段时间也是忙着一堆原应年前或年后处理却改了时间的，还有那个无形的钱的压力。当然这些都算是我的私事，这里就不展开讨论了。

2009年共写了25篇blog，其中关于模块化的有3篇《 从宜家的家具设计讲模块化 》、《 页面重构中的模块化思维 》和《 页面重构中的组件制作要点 》，之所以写那么多关于模块化的，主要还是因为工作需要，在准备公司一个关于模块化的培训PPT期间，对模块化思考了很多，在最后完成的PPT中，对于模块化的理解跟前面几篇文章所认识的又有了些变化，原本想多写一篇的，不过后面因为“种种”原因就没了下文。今年会试着把我在这一块的理解和经验整理下。

另外有两篇文章是关于职业的，《 再读《你是一个职业的页面重构工作者吗？》 》和《 写给应聘页面重构的同学 》。到09年前半年，做面试官还算比较积极的，虽然不太能领会领导所期望的，但我觉得，面试对于一个正找工作的人（特别是刚毕业的）是一个很好的学习机会，最终招不招不是我能决定的，但在专业方面，我希望我面试的人可以从面试中学到东西。

...
[阅读全文]

QQREADER884573151E40C5BE

样式文件合并工具 mergeCSS 的 单文件模式 已经介绍过了，现在介绍 mergeCSS 的多文件模式。

跟以往的压缩工具不同，mergeCSS 提供了一个可以将多个文件合并到一起的功能，使用也非常之简单，只要将要合并的的文件分别拖入 mergeCSS 中即可。与单文件模式不同之处在于：

• 多文件模式下不能使用“保留impot”功能，即所有外链文件都将被导入（目前只支持本地路径）
• 多文件模式下无“快速保存”选项
• 多文件模式下可选择只将需要的外链文件内容导入

除此之外，其它功能与单文件模式差不多。多文件模式主要是为了解决多个小文件整合发布的问题，这跟开发模式也有一定的关系。目前使用上还有改进的空间，后面会加以优化。

圣诞快乐~~！

样式文件合并工具 mergeCSS 1.8.20091225正式开放下载了，感谢大家的关注与支持，使用中有什么意见或建议，欢迎与我联系。

mergeCSS v1.8.20091225
(fix)import文件未预加载
+优化路径检查算法
+程序图标
+关于

欢迎下载使用：

• 到 Download 里下载
• 在旧版本中使用“检查更新”

样式文件合并工具 mergeCSS 基础功能的开发已经基本结束了，目前版本为1.8，已经进入最后的测试调整，估计月底可完成。感谢这段时间来大家对mergeCSS的关注与支持，在此特别感谢CSS森林参与测试和提供帮助的同学，特别是飘飘和小志，为提高 mergeCSS 在实际使用中的可用性提供了较具体的使用场景。

本文将介绍 mergeCSS 1.8版本中的单文件模式，做为mergeCSS一个主要的文件处理模式，它主要包含了以下几个功能：

• 基本的文件压缩：去除多余空格、换行、注释
• 如果文件中包含以import链入的文件，可以选择是否将其内容导入合并后的文件（支持本地绝对和相对路径）
• 新文件的命名：默认以原文件名加时间戳的方式生成合并后的文件；可自定义后缀或以原文件名保存（自动备份原文件）
• 提供三种文件保存路径选择：桌面、原文件目录（默认）、自定义目录
• 支持2种压缩风格：每个定义为一行（默认）；压缩为一行
• 支持为压缩后的文件添加文件完整性验证标记
• 支持为样式中的图片添加或删除版本号（?v=时间戳），可指定处理的图片
• 支持从某一备份文件版本还原文件
• 支持快捷键
• 在windows下为样式文件添加了右键菜单项，让你的使用更为方便

...
[阅读全文]

好久没有更新了，3.1.1算是个稳定的版本。从发布到现在，得到了很多同学的支持和好的意见建议，很大程度帮忙了这个工具的完成，在此感谢大家的支持。

这次的更新只是做了三个小的修改，主要是我在使用过程中觉得不是很爽的地方。一个是当图片放大后，常会出现滚动条，而界面下方的“操作区”会把横向的滚动条挡住，虽然可以关闭，但还是很影响操作，这次把它移上了些。

...
[阅读全文]

昨天在做mergeCSS的时候遇到两个正则匹配的问题，也花了不少的时间，最后在CSS森林群的 CE 同学帮助下，才完成了这俩正则，特别记录下，以后可能也会用到。

第一个是匹配图片路径的问题，要处理的字符串是：

background:url(demo.jpg);background-image:url(demo.gif);

我一开始写的是：

url\((.*)\)

得到的结果为：

url(demo.jpg);background-image:url(demo.gif);

可以看到，把两个图片匹配成了一个，结果不是所希望得到的。把它改为惰性匹配，如下：

url\((.*?)\)

得到的结果为：

url(demo.jpg);
url(demo.gif);

匹配到了两个图片，是所要的结果了。:)

第二个问题是正则表达式中使用变量的问题，简单解释下为什么加变量也会成为问题，先看下 RegExp 对象 和 replace() 方法 的说明，Javascript的正则一般的书写方式是：

/正则表达式/匹配模式

所有在“/”中间的内容都会被当成正则表达式，于是变量名也就被当成字符串了。不加“/”？也行，不过不加“/”的话就不能指定匹配模式，也就只能匹配到第一个。

通过RegExp对象可以生成一个新的 RegExp 对象，具有指定的模式和标志。

于是：

new RegExp("url\\((" + 变量名 + ")\\)", "g");

这里要注意的是使用“\\”的方式的方式进行转义，因为

如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

这个过程中“\\”会被转换成“\”，即上面的结果是：

/url\((变量内容)\)/g

最近Data URI似乎热了起来，特别是从淘宝UED上发了一篇《 Data URI小试 —— 在旺旺点灯(JS)上的应用 》后，陆续出现这方面的文章。看到不少人提到Data URI时都只是提到了优点，我也好奇了一把，借这机会更全面了解了下。

...
[阅读全文]

这段时间折腾了几次系统，重装了三次XP，系统依然出错，看到同事已经使用上了windows7，决定也体验下。

推荐下《 WINDOWS 7系统最全的硬盘安装方法 》这篇，也当是一个备份，特别是XP的安装方法（以下引用做了小修改）：

三、XP系统下全新安装windows 7：
　　1、下载windows 7 7057ISO镜像(RC或RTM)，用虚拟光驱拷贝至非C盘(如D:\windows7)
　　2、把D:\windows7目录下的bootmgr和boot目录(其实只要里面的boot.sdi和bcd文件)拷贝到C盘根目录下,并在C盘根目录下建个sources文件夹。
　　3、把D:\windows7\sources下的boot.win复制到C盘刚建的sources文件夹
　　4、用管理员身份运行cmd，然后输入“c:\boot\bootsect.exe/nt60 c: ”（不带引号） 提示successful（即成功了!）
　　5、关闭cmd窗口重启计算机，自动进入安装界面，选择安装语言，同时选择适合自己的时间和货币显示种类及键盘和输入方式
　　6、出现“开始安装界面”，（要注意了，不点击“现在安装”）点左下角“修复计算机”（repair mycomputer），进入”系统恢复选择”，选择最后一项”命令提示符”（commandprompt），进入DOS窗口
　　7、输入“D:\windows7\sourcessetup.exe”（不带引号），开始安装
　　8、选择安装语言、格式化C盘，就OK了

经测试，发现一个更简单的方法，需要一张带PE系统的启动盘，光盘引导进入PE后，以上面的方式安装window7就可以了。可以不用管你当前是什么系统。安装过程十分简单，基本没有其它操作。

简单尝试制作了CSS Sprites 样式生成工具 (bg2css) 的使用帮助，有兴趣的同学可以看看：

后面会针对各个功能点制作相关的帮助说明，敬请期待。