CSSEmbed 右键打包工具 November 4, 2009

在开始之前,如果你还不知道 Data URI 是什么, 秦歌的这篇文章 可以帮上你。Data URI 在淘宝线上已经有了实例应用,更进步信息请查看 云谦的文章

好,回过头来说说 Data URI 「传统的」制作过程。由于 Data URI 需要使用 base64 编码,因此不得不自己写个小工具(熟悉 PHP 的话, 相信你会知道怎么做 ),然后再将编码后的字符加入到 CSS 文件中。

上述的步骤且不说繁琐,而且容易出错。 前几天 NCZ 推出了款名为 CSSEmbed 的自动化工具 。这个工具在上面的场合下可帮上大忙了。它能分析 CSS 文件中的图片地址,获取内容并将它 base64 后填充到对应的位置。

不过总想让工具变得更自动些,套用了下原先玉伯写的脚本,于是就有了下面的右键打包工具。

安装方法

http://files.gracecode.com/2009_11_04/1257322139.png

  1. 从这里下载 CSSEmbed 右键打包工具 ,解压缩
  2. 点击 install.cmd 安装
  3. 然后可以右键点击 sample.css 或者 sample-min.css 测试
  4. 最后生成的 _embed.css 结尾的文件就是我们想要的文件

呃,不好意思,有点罗嗦。

注意事项

  1. CSSEmbed 是用 Java 写的,所以它需要 Java 运行环境
  2. 务必确定 CSS 文件中的图片引用路径为绝对路径( [在命令行中可以使用

初瞥 Google Chrome Frame September 23, 2009

三天前,你说下面的图是 PS 的,我信。而今天,这的的确确是张截图 -- 是的,这已经 不是梦想,是现实 -- 但实现梦想的不是微软,是 Google 。

http://files.gracecode.com/2009_11_05/8510781cf887.jpg

今天收到的最好的消息就是 Google Chrome Frame 发布 。Google Chrome Frame 通过 IE 的插件接口直接将 Trident 引擎 替换成 WebKit( 近些年浏 览器也流行双核了? )。

那个曾经开玩笑的言语 ,Google 「帮助」微软先实现了。作为竞争对手,Google 竟然帮助「改善」微软的产品,这看似玩笑的 背后,Google 会不会暗藏其他的野心?然而肯定的是,这时 IE 开发团队看见 Google Chrome Frame 这个产品, 保证会很尴尬。

说正题,目前 Google Chrome Frame 支持 IE6-8 系列浏览器。当用户安装好 Google Chrome Frame 后,在地址前加 cf: 即可使用 WebKit 核心浏览 页面,例如:

cf:http://www.taobao.com/

当然,如果你想直接让装了 Google Chrome Frame 的 IE 用户直接使用 WebKit 核心, 则在 head 中加入 meta 标记

<meta http-equiv="X-UA-Compatible" content="chrome=1">

即可。

顺便八卦下,这点看得出 Google 的幽默。 在 IE8 中定义了同样的 meta 名称,用于兼容 IE7 模式

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

然后看下随 Google Chrome Frame 提 供的 Javascript 文件 ,有个判断 Google Chrome Frame 是否已经安装的脚本:

// Look for CF in the User Agent before trying more expensive checks
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("chromeframe") >= 0 || ua.indexOf("x-clock") >= 0) {
  cachedAvailable = true;
  return cachedAvailable;
}

if (typeof window['ActiveXObject'] != 'undefined') {
  try {
    var obj = new ActiveXObject('ChromeTab.ChromeFrame');
    if (obj) {
      cachedAvailable = true;
    }
  } catch(e) {
    // squelch
  }
}
return cachedAvailable;

http://files.gracecode.com/2009_11_05/9136981d22a8.jpg

看得出 Google Chrome Frame 有更改浏览器 user-agent 的计划。而从实际安装的版本看 ,user-agent 似乎没做更改,和 Chrome 浏览器如出一辙。

http://files.gracecode.com/2009_11_05/2703281d2978.jpg

更正,原来在安装好了 Google Chrome Frame 后,其会将更改原生 IE 的 user-agent ,例如本人机子上的 IE6 会更改成如上图(该死,我的 IE user-agent 又变长了)。

http://files.gracecode.com/2009_11_05/1866981d22a6.jpg

http://files.gracecode.com/2009_11_05/5255381d22a7.jpg

其他方面,查看源代码、界面和脚本的调试查看工具、甚至控件的样式都和其他基于 WebKit 的浏览器一模一样。或许以后我们可以将其认为是继 Safari、Chrome 后的第三大主流 WebKit 用户代理来看待。

http://files.gracecode.com/2009_11_05/7207781d22a6.jpg

不过目前 Google Chrome Frame 似乎不是非常稳定。经过上午的测试使用,发现稳定性还是 需要继续提高,同时部分页面的鼠标滚轮发现无法使用。

本人很看好 Google Chrome Frame。对于用户而言,装个浏览器插件比安装个新的浏览 器更为可以接受。同时根据国内的情况,在普遍脱离不了 IE 的大环境下,开发者能够切换 浏览器的内核更好的呈现页面,这将是件非常棒的事情。

妄想下,加以时日等此产品普及后,IE 可能就真的成了一具皮囊了…

-- EOF --

Farseer - Nginx for Windows 快速配置包May 26, 2009

http://nginx.net/nginx.gif

Nginx 的确是 *ix 系统下非常优秀的 HTTP 服务器,但以前对于开发人员而言搭建 Windows 平台的 Nginx + PHP 环境的确非常的繁琐而且容易出错。

如果您有上述的问题,那么这个名为 Farseer 的包能够帮得上您的忙。使用这软件包,能够让您在一到两分钟内完成 Nginx + PHP for Windows 平台的安装。

废话不多说, 安装方式和介绍在这里文件包在这里下载

-- Split --

如果你很「传统」, 这里也有个 Apache + PHP 的精简配置环境 ,希望会对兄弟们有帮助。

PS, 再次感谢 Fenng 兄的关注 ,但愿 Nginx 在 Windows 平台下能够与其在其他平台下的表现一样的出众。

Yahoo 统计