<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>花儿开了 &#187; Design</title>
	<atom:link href="http://blog.istef.info/category/computer/design/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.istef.info</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Sun, 06 Jun 2010 05:52:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
	<atom:link rel='hub' href='http://blog.istef.info/?pushpress=hub'/>
		<item>
		<title>Flash 真的过时了么？</title>
		<link>http://blog.istef.info/2010/03/04/flash-is-out-of-fashion/</link>
		<comments>http://blog.istef.info/2010/03/04/flash-is-out-of-fashion/#comments</comments>
		<pubDate>Thu, 04 Mar 2010 08:11:11 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[virgin american]]></category>

		<guid isPermaLink="false">http://blog.istef.info/?p=2149</guid>
		<description><![CDATA[刚刚上网查资料时浏览器中的 Flash 突然全挂，好在是 Chrome，浏览器自己没事儿。突然想到了早上看的新闻，Virgin America 新官网彻底抛弃 Flash，难道 Flash 被 HTML 5 替代真是大势所趋么？ 从我个人角度来说，我是比较偏向 HTML 5 不喜欢 Flash 的。我一直都是个不会 Flash 的 HTML Developer，虽然我能用 Flash 做一些简单的动画和效果，或是写点儿 Action Script 放个歌什么的，但是稍微复杂点儿我就不行了。由于不会 Flash，我一直都在试图用 Javascript/CSS 之类的东西来做一些效果，随着浏览器性能越来越好，如今似乎也没什么不方便了。在我个人感觉，HTML CSS JS 确实是在一步一步蚕食着 Flash 的地盘。它的优点在于对于 Web 开发者来说比 Flash 更易学，而且代码开放，写起来也容易。而且在现在的浏览器上，它们的运行效率甚至超过 Flash 很多。 但 Flash 也不是一无是处，虽然它一切都是封闭的，但这个缺点却解决了兼容性问题。反正甭管你啥平台啥浏览器，都得用我的 Flash Player，最终实现出来的结果自然也就都一样。在极其陈旧的浏览器上同样能实现富客户端效果，这也是 Flash 的一大优势。而且对于 Flash 开发者，代码真正的是一次写成到处运行，不像写个 HTML/CSS，天天还得跟 IE 费劲。 虽然 Flash [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.istef.info/wp-content/uploads/2010/03/adobe-flash-should-it-be-blocked.jpeg"><img class="alignnone size-medium wp-image-2150" title="adobe-flash-should-it-be-blocked" src="http://blog.istef.info/wp-content/uploads/2010/03/adobe-flash-should-it-be-blocked-300x300.jpg" alt="" width="300" height="300" /></a></p>
<p>刚刚上网查资料时浏览器中的 Flash 突然全挂，好在是 Chrome，浏览器自己没事儿。突然想到了早上看的新闻，<a href="http://mashable.com/2010/03/03/virgin-america-ditches-flash/?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed:+Mashable+(Mashable)" target="_blank">Virgin America 新官网彻底抛弃 Flash</a>，难道 Flash 被 HTML 5 替代真是大势所趋么？</p>
<p>从我个人角度来说，我是比较偏向 HTML 5 不喜欢 Flash 的。我一直都是个不会 Flash 的 HTML Developer，虽然我能用 Flash 做一些简单的动画和效果，或是写点儿 Action Script 放个歌什么的，但是稍微复杂点儿我就不行了。由于不会 Flash，我一直都在试图用 Javascript/CSS 之类的东西来做一些效果，随着浏览器性能越来越好，如今似乎也没什么不方便了。在我个人感觉，HTML CSS JS 确实是在一步一步蚕食着 Flash 的地盘。它的优点在于对于 Web 开发者来说比 Flash 更易学，而且代码开放，写起来也容易。而且在现在的浏览器上，它们的运行效率甚至超过 Flash 很多。</p>
<p>但 Flash 也不是一无是处，虽然它一切都是封闭的，但这个缺点却解决了兼容性问题。反正甭管你啥平台啥浏览器，都得用我的 Flash Player，最终实现出来的结果自然也就都一样。在极其陈旧的浏览器上同样能实现富客户端效果，这也是 Flash 的一大优势。而且对于 Flash 开发者，代码真正的是一次写成到处运行，不像写个 HTML/CSS，天天还得跟 IE 费劲。</p>
<p>虽然 Flash 有如此之多的优点，甚至已经成为在线视频的事实标准，为啥这么多人都希望找个新标准替代它呢？其实仔细想想 Flash 最大的问题是，它是封闭的东西，是 Adobe 的私人财产。推动 HTML 5 替代 Flash，最积极的一个莫过于 Apple 的乔大爷。苹果自家的 iPhone / iPod Touch 以及未来的 iPad 一水儿的不支持 Flash，而且摆出一幅死也不支持的态度，符合苹果一贯的强硬风格。虽然这跟 Flash 之前一直忽视 Mac 平台有关，但更重要的是任何一个商业公司都不想自己辛辛苦苦创造的东西成为别人的赚钱工具。Google 也同样迫不及待的在 Youtube 上换上 HTML 5 Video，我想更多的都是在出于专利问题的考虑。都使用开放标准，大家就回到同一个起跑线，使用 Flash，还没跑就被 Adobe 落下一大截了。随着 Flash 越来越强大，我相信包括 Google 在内的各大都会开始打压 Flash，否则即便你苹果 Google 一人做一个操作系统再怎么牛，人家 Flash 跑在你的操作系统上自己成一个平台，你的系统完全就成了一个硬件软件之间的抽象层了。</p>
<p>由此看来，未来 Flash 的日子肯定不好过。作为最有力的竞争者 HTML 5 目前受到包括苹果 Google 在内这样的巨头追捧。在浏览器方面，Webkit 内核已经可以很好的支持 HTML 5，Firefox 也不错，移动设备上未来貌似也是 webkit 一统天下了，所以作为 Web Developer，特别是考虑到面向移动设备的网站来说，从 Flash 慢慢转向 HTML 5 还是很有必要的。至于 IE，我相信在对 HTML 5 支持方面它还是跑得最慢的，做得最差的，因为它有自家的 Silverlight，到时恐怕又是一个麻烦的东西。</p>
<p>Virgin 总是喜欢走在技术的前沿（飞机上的 Wifi，商用载人航空飞行等），但它也是在暗示着一个趋势。现在说 Flash 过时实在太早，但慢慢向开放的 HTML 5 转型，绝对不是件坏事儿。
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2010%2F03%2F04%2Fflash-is-out-of-fashion%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2010%2F03%2F04%2Fflash-is-out-of-fashion%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2010/03/04/flash-is-out-of-fashion/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
		<item>
		<title>Pictaculous：调色板生成小服务</title>
		<link>http://blog.istef.info/2010/01/25/pictaculous-a-services-for-generating-the-palette/</link>
		<comments>http://blog.istef.info/2010/01/25/pictaculous-a-services-for-generating-the-palette/#comments</comments>
		<pubDate>Mon, 25 Jan 2010 07:25:27 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[palette]]></category>
		<category><![CDATA[webapp]]></category>

		<guid isPermaLink="false">http://blog.istef.info/?p=2105</guid>
		<description><![CDATA[对于做任何设计，选好颜色都是至关重要的。色彩搭配的不合适，美感大打折扣。而对于做界面 UI 来说，如果色彩选择不好，会严重影响用户体验。在这个 Web 2.0 时代，大量鲜艳的色彩被采用，这个问题就越来越突出了。 Pictaculous 是一个在线生成调色板的服务。与其它服务不同，Pictaculous 不需要你指定几个颜色，也不只是那种将各式各样备选方案列出来。Picaculous 需要用户上传一张图片，然后经过程序分析产生一个基于所上传图片的调色板，这一点还是挺有特色的。 我尝试了一下这个服务，使用起来已经不能再简单了（真喜欢如今 Web 2.0 的操作方式），无需注册啥的，只需上传一张图片，然后它会通过 AJAX 的方式提交请求并返回结果。对于分析结果，还是比较准确的，基本图片中的基础色调都能被分析出来。Pictaculous 在结果中还提供 Photoshop 色板格式文件下载，对于做设计来说方便很多。此外，Pictaculous 还会返回一些来自 Adobe Kuler 和 ColorLovers 的结果，也是有一定参考价值的。 我个人觉得 Pictaculous 还是个不错的服务，值得丢进收藏夹随时备用。当然，Pictaculous 当前的功能还是太简单，我觉得应该根据图片分析结果，提供若干个备选色板（例如单色，两色，互补色等），这样应用场合就更多了。当然，提供 API 也是应该做的。]]></description>
			<content:encoded><![CDATA[<p>对于做任何设计，选好颜色都是至关重要的。色彩搭配的不合适，美感大打折扣。而对于做界面 UI 来说，如果色彩选择不好，会严重影响用户体验。在这个 Web 2.0 时代，大量鲜艳的色彩被采用，这个问题就越来越突出了。</p>
<p><a href="http://blog.istef.info/wp-content/uploads/2010/01/Pictaculous.jpg"><img class="alignnone size-full wp-image-2106" title="Pictaculous" src="http://blog.istef.info/wp-content/uploads/2010/01/Pictaculous.jpg" alt="" width="374" height="109" /></a></p>
<p><a href="http://pictaculous.com/" target="_blank">Pictaculous</a> 是一个在线生成调色板的服务。与其它服务不同，Pictaculous 不需要你指定几个颜色，也不只是那种将各式各样备选方案列出来。<a href="http://blog.istef.info/2010/01/25/pictaculous-a-services-for-generating-the-palette/">Picaculous</a> 需要用户上传一张图片，然后经过程序分析产生一个基于所上传图片的调色板，这一点还是挺有特色的。</p>
<p>我尝试了一下这个服务，使用起来已经不能再简单了（真喜欢如今 Web 2.0 的操作方式），无需注册啥的，只需上传一张图片，然后它会通过 AJAX 的方式提交请求并返回结果。对于分析结果，还是比较准确的，基本图片中的基础色调都能被分析出来。Pictaculous 在结果中还提供 Photoshop 色板格式文件下载，对于做设计来说方便很多。此外，Pictaculous 还会返回一些来自 Adobe Kuler 和 ColorLovers 的结果，也是有一定参考价值的。</p>
<p>我个人觉得 Pictaculous 还是个不错的服务，值得丢进收藏夹随时备用。当然，Pictaculous 当前的功能还是太简单，我觉得应该根据图片分析结果，提供若干个备选色板（例如单色，两色，互补色等），这样应用场合就更多了。当然，提供 API 也是应该做的。
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2010%2F01%2F25%2Fpictaculous-a-services-for-generating-the-palette%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2010%2F01%2F25%2Fpictaculous-a-services-for-generating-the-palette%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2010/01/25/pictaculous-a-services-for-generating-the-palette/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>关于苹果平板电脑的谣言汇总</title>
		<link>http://blog.istef.info/2010/01/17/rumors-about-islate/</link>
		<comments>http://blog.istef.info/2010/01/17/rumors-about-islate/#comments</comments>
		<pubDate>Sun, 17 Jan 2010 09:23:12 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[islate]]></category>
		<category><![CDATA[rumor]]></category>

		<guid isPermaLink="false">http://blog.istef.info/?p=2089</guid>
		<description><![CDATA[随着苹果新产品发布会的临近，关于苹果平板电脑的谣言已经多的无法统计了。TGRBlog 上的一张图很好的总结了最近几乎所有的谣言，个人觉得很不错，翻译成了中文，跟各位水果粉分享一下。 对应每个谣言的来源，各位有兴趣的不妨到 TGR Blog 上自己查阅（需藩蔷）。不过从之前公布过的一些信息来看，这款平板肯定是存在的，而且确实也是快要出了，所以说三月份可能拿到还是比较现实的。另外 1000 上下的售价貌似也比较靠谱，苹果一向不出便宜货，所以有想法的朋友得开始攒钱了，呵呵。 想想出去做演讲的时候拿出来个 iSlate，肯定可以实现一大堆炫的不行的效果。。。哎呀我又开始yy了～～ btw: Calothorax 主机热卖中，适合中小型独立博客，数量有限，赶快来抢哦。]]></description>
			<content:encoded><![CDATA[<p>随着苹果新产品发布会的临近，关于苹果平板电脑的谣言已经多的无法统计了。<a href="http://tgrblog2beta.tumblr.com/post/328250208/rumour-roundup-the-apple-tablet" target="_blank">TGRBlog 上的一张图</a>很好的总结了最近几乎所有的谣言，个人觉得很不错，翻译成了中文，跟各位水果粉分享一下。</p>
<p><a href="http://blog.istef.info/wp-content/uploads/2010/01/iSlate-Rumor.jpg"><img class="alignnone size-full wp-image-2090" title="iSlate-Rumor-s" src="http://blog.istef.info/wp-content/uploads/2010/01/iSlate-Rumor-s.jpg" alt="" width="527" height="354" /></a></p>
<p>对应每个谣言的来源，各位有兴趣的不妨到 TGR Blog 上自己查阅（需藩蔷）。不过从之前公布过的一些信息来看，这款平板肯定是存在的，而且确实也是快要出了，所以说三月份可能拿到还是比较现实的。另外 1000 上下的售价貌似也比较靠谱，苹果一向不出便宜货，所以有想法的朋友得开始攒钱了，呵呵。</p>
<p>想想出去做演讲的时候拿出来个 iSlate，肯定可以实现一大堆炫的不行的效果。。。哎呀我又开始yy了～～</p>
<p>btw: <a href="http://calothorax.com/hosting">Calothorax 主机热卖中</a>，适合中小型独立博客，数量有限，赶快来抢哦。
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2010%2F01%2F17%2Frumors-about-islate%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2010%2F01%2F17%2Frumors-about-islate%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2010/01/17/rumors-about-islate/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>「分享」精美的 Pictodeck 黑白图标（700+）</title>
		<link>http://blog.istef.info/2010/01/07/pictodeck-700-icons/</link>
		<comments>http://blog.istef.info/2010/01/07/pictodeck-700-icons/#comments</comments>
		<pubDate>Thu, 07 Jan 2010 07:28:38 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[b&w]]></category>
		<category><![CDATA[dropbox]]></category>
		<category><![CDATA[free]]></category>
		<category><![CDATA[icon]]></category>

		<guid isPermaLink="false">http://blog.istef.info/?p=2079</guid>
		<description><![CDATA[无论我们是在做 Slides，还是做各种设计，图标都是一个不可缺少的组成部分。几个精美的小图标不仅能提升我们设计的整体视觉效果，多数时候它还有引导用户增强用户体验的功效。但制作一个图标绝对不像看起来那么简单，我个人感觉一定程度上并不亚于设计一个 Logo 的难度。 今天和大家分享的是一套名为 Pictodeck 的免费图标。不同于我们经常在网上下到的那些图标库，这套图标包含了 700 多个小图标，全部是这种我个人非常喜欢的黑白平面风格（事实上我发现在各种设计中这样的图标是最受用的）。在这里我们要感谢一下图标的作者 Aaron Richard，这年头这么慷慨的人实在是太少了。 这一套图标全部为矢量格式，默认大小是 32*32 但可以任意缩放而不影响质量。所有的图标，除非特别著名，都是基于创作公用协议的，因此我们个人使用的是不受任何限制的，非常的赞。下面提供全部图标预览，看一遍后估计你就没有不去下载的理由了。 第一张，第二张，第三张，第四张。 如果您喜欢这些图标，可以在这里下载。原作者提供的是 KeyNote &#8217;09 格式，我转换了一个 Powerpoint 格式，但质量下降太多了，所以就又转了一个 PDF 格式的，但质量也大不如 KeyNote 原始格式的。但我也没有太好的办法，总不能一个个往外扣吧。我全提供了下载，PC 用户可以选后两种格式，只是放大可能会比较悬，呵呵。 btw: 最近实验室里展开了 Dropbox 空间大比拼，我也不幸被卷入这场无聊游戏。如果您还没有 Dropbox，可以考虑注册一下，也算帮我个忙 。Dropbox 是个免费的网络存储和同步服务，无论是同步存储、备份资料、多人协作和分享资料都非常的方便。Dropbox 默认提供 2G 的免费空间，您用这个链接注册 https://www.dropbox.com/referrals/NTg3MDczODk 可以得到 2.25G 免费空间，当然我也会从中收益赚到 250M 空间。早日拿到 5G 就可以跟实验室那帮家伙显摆啦。。。。（无语中）]]></description>
			<content:encoded><![CDATA[<p>无论我们是在做 Slides，还是做各种设计，图标都是一个不可缺少的组成部分。几个精美的小图标不仅能提升我们设计的整体视觉效果，多数时候它还有引导用户增强用户体验的功效。但制作一个图标绝对不像看起来那么简单，我个人感觉一定程度上并不亚于设计一个 Logo 的难度。</p>
<p><a href="http://blog.istef.info/wp-content/uploads/2010/01/pictodeck1.jpg"><img class="alignnone size-full wp-image-2081" title="pictodeck" src="http://blog.istef.info/wp-content/uploads/2010/01/pictodeck1.jpg" alt="" width="527" height="334" /></a></p>
<p>今天和大家分享的是一套名为 Pictodeck 的免费图标。不同于我们经常在网上下到的那些图标库，这套图标包含了 700 多个小图标，全部是这种我个人非常喜欢的黑白平面风格（事实上我发现在各种设计中这样的图标是最受用的）。在这里我们要感谢一下图标的作者 <a href="http://www.bigspaceship.com/" target="_blank">Aaron Richard</a>，这年头这么慷慨的人实在是太少了。</p>
<p>这一套图标全部为矢量格式，默认大小是 32*32 但可以任意缩放而不影响质量。所有的图标，除非特别著名，都是基于创作公用协议的，因此我们个人使用的是不受任何限制的，非常的赞。下面提供全部图标预览，看一遍后估计你就没有不去下载的理由了。</p>
<p><a href="http://dl.dropbox.com/u/870738/blog-big-picture/pictodeck1.png" target="_blank">第一张</a>，<a href="http://dl.dropbox.com/u/870738/blog-big-picture/pictodeck2.png" target="_blank">第二张</a>，<a href="http://dl.dropbox.com/u/870738/blog-big-picture/pictodeck3.png" target="_blank">第三张</a>，<a href="http://dl.dropbox.com/u/870738/blog-big-picture/pictodeck4.png" target="_blank">第四张</a>。</p>
<p>如果您喜欢这些图标，可以在这里下载。原作者提供的是 <a href="http://blog.istef.info/downloads/Pictodeck_KeyNote">KeyNote &#8217;09 格式</a>，我转换了一个 <a href="http://blog.istef.info/downloads/Pictodeck_pptx">Powerpoint 格式</a>，但质量下降太多了，所以就又转了一个 <a href="http://blog.istef.info/downloads/Pictodeck_PDF">PDF 格式</a>的，但质量也大不如 KeyNote 原始格式的。但我也没有太好的办法，总不能一个个往外扣吧。我全提供了下载，PC 用户可以选后两种格式，只是放大可能会比较悬，呵呵。</p>
<p>btw: 最近实验室里展开了 Dropbox 空间大比拼，我也不幸被卷入这场无聊游戏。如果您还没有 Dropbox，可以考虑注册一下，也算帮我个忙 <img src='http://blog.istef.info/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> 。Dropbox 是个免费的网络存储和同步服务，无论是同步存储、备份资料、多人协作和分享资料都非常的方便。Dropbox 默认提供 2G 的免费空间，您用这个链接注册 <a href="https://www.dropbox.com/referrals/NTg3MDczODk" target="_blank">https://www.dropbox.com/referrals/NTg3MDczODk</a> 可以得到 2.25G 免费空间，当然我也会从中收益赚到 250M 空间。早日拿到 5G 就可以跟实验室那帮家伙显摆啦。。。。（无语中）
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2010%2F01%2F07%2Fpictodeck-700-icons%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2010%2F01%2F07%2Fpictodeck-700-icons%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2010/01/07/pictodeck-700-icons/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Firefox 3.5 占有率最高</title>
		<link>http://blog.istef.info/2009/12/21/firefox-3-5-become-top-1-browser/</link>
		<comments>http://blog.istef.info/2009/12/21/firefox-3-5-become-top-1-browser/#comments</comments>
		<pubDate>Mon, 21 Dec 2009 06:46:58 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[firefox]]></category>

		<guid isPermaLink="false">http://blog.istef.info/?p=2064</guid>
		<description><![CDATA[来自统计网站 statcounter 公布的数据，Firefox  3.5 成为了全球使用人数最多的浏览器。可喜可贺，终于可以有一个对标准支持还算不错的浏览器撼动了 IE 的统治地位。作为一个半吊子 WebDeveloper，我实在是兴奋，写点文字给这个历史时刻留个念吧。 当然，这个统计数据事实上是把版本号分开来统计的，如果把 IE 三大主流版本都加起来，其统治地位还是无法撼动的 （sigh）。而事实上 Firefox 的自动升级机制有效的让用户都工作在最新版本上，在这样的一个统计中自然就占了便宜。不过 24% 也是相当不错的成绩！ 另外一份地区统计数据表明，IE 6 的用户虽然在下滑，但中国和韩国两个地区依然保持高比例。韩国人我就不知道了（不过看他们的网站还是 table 布局也侧面反应了浏览器问题），中国小地摊上那些快速装机 XP 恐怕为 IE6 的坚挺做出了很大贡献，还有那些在线听歌在线视频的网站，还有网银，哎。。。 不管怎样，期待标准的 Web 赶快到来吧。微软同学，能在自动更新里强制升级一下 IE8 么？ btw，我已经从 Firefox 叛逃到 Chrome，有了扩展支持，再加上超凡的速度，实在抵挡不了诱惑了。 btw again，当前我用的 VPS 资源大大的富裕，很浪费。我准备升级一下分成若干小份出售，面向大中小博主，为保证资源严格控制数量，详情近期会出台，有兴趣的朋友可以关注一下。]]></description>
			<content:encoded><![CDATA[<p>来自统计网站 statcounter <a href="http://gs.statcounter.com/#browser_version-ww-weekly-200827-200951" target="_blank">公布的数据</a>，Firefox  3.5 成为了全球使用人数最多的浏览器。可喜可贺，终于可以有一个对标准支持还算不错的浏览器撼动了 IE 的统治地位。作为一个半吊子 WebDeveloper，我实在是兴奋，写点文字给这个历史时刻留个念吧。</p>
<p><a href="http://blog.istef.info/wp-content/uploads/2009/12/statcounterbrowsers.jpg"><img class="alignnone size-full wp-image-2065" title="statcounterbrowsers" src="http://blog.istef.info/wp-content/uploads/2009/12/statcounterbrowsers.jpg" alt="" width="507" height="295" /></a></p>
<p>当然，这个统计数据事实上是把版本号分开来统计的，如果把 IE 三大主流版本都加起来，其统治地位还是无法撼动的 （sigh）。而事实上 Firefox 的自动升级机制有效的让用户都工作在最新版本上，在这样的一个统计中自然就占了便宜。不过 24% 也是相当不错的成绩！</p>
<p>另外一份地区统计数据表明，IE 6 的用户虽然在下滑，但中国和韩国两个地区依然保持高比例。韩国人我就不知道了（不过看他们的网站还是 table 布局也侧面反应了浏览器问题），中国小地摊上那些快速装机 XP 恐怕为 IE6 的坚挺做出了很大贡献，还有那些在线听歌在线视频的网站，还有网银，哎。。。</p>
<p>不管怎样，期待标准的 Web 赶快到来吧。微软同学，能在自动更新里强制升级一下 IE8 么？</p>
<p>btw，我已经从 Firefox 叛逃到 Chrome，有了扩展支持，再加上超凡的速度，实在抵挡不了诱惑了。</p>
<p>btw again，当前我用的 VPS 资源大大的富裕，很浪费。我准备升级一下分成若干小份出售，面向大中小博主，为保证资源严格控制数量，详情近期会出台，有兴趣的朋友可以关注一下。
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2009%2F12%2F21%2Ffirefox-3-5-become-top-1-browser%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2009%2F12%2F21%2Ffirefox-3-5-become-top-1-browser%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2009/12/21/firefox-3-5-become-top-1-browser/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>PS Mobile for iPhone: iPhone 上的 Photoshop</title>
		<link>http://blog.istef.info/2009/10/10/ps-mobile-for-iphone/</link>
		<comments>http://blog.istef.info/2009/10/10/ps-mobile-for-iphone/#comments</comments>
		<pubDate>Sat, 10 Oct 2009 08:24:09 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[iphone app]]></category>
		<category><![CDATA[photoshop]]></category>

		<guid isPermaLink="false">http://blog.istef.info/?p=1958</guid>
		<description><![CDATA[通常，当我写诸如“iPhone 上的某某”的时候，这个某某往往只是这个软件的类似替代品。而这次的 Photoshop 可不同，PS Mobile 是货真价实来自 Adobe 的 Photoshop iPhone 版本。它将 Photoshop.com 的功能进一步精简移植到了 iPhone 上，并且与 Photoshop.com 帐号集成。用户不仅可以在 iPhone 上随时随地简单处理照片，还可以在电脑上到 Photoshop.com 上进一步处理，或是下载回来到 Photoshop 上来处理，非常方便。 如上图，PS Mobile 的配色和 Photoshop.com 很吻合，界面风格则更趋近于 iPhone，用户体验非常好。PS Mobile 可以编辑 iPhone 中已经存在的照片，也可以立刻拍摄照片来处理。当然这里我个人更喜欢用 Camera Genius 来拍摄照片（系统自带的拍照 API 实在太烂了，怎么也得来个数码防抖吧）。此外，PS Mobile 可以集成 Photoshop.com 的帐号，用户可以随时将处理好的照片上传到 Photoshop.com 上，也可以查看 Photoshop.com 帐号里现有的照片。 这里我们来看看 PS Mobile 的图片处理功能。如果用过 Photoshop.com 的朋友对这个处理界面应该不会陌生，在 PS Mobile 当前的版本中，我们可以剪裁、旋转照片，调整色彩、曝光、饱和度等等。对于大多数用户来说，这些功能是我们调整照片最常用的功能。此外，PS [...]]]></description>
			<content:encoded><![CDATA[<p>通常，当我写诸如“iPhone 上的某某”的时候，这个某某往往只是这个软件的类似替代品。而这次的 Photoshop 可不同，PS Mobile 是货真价实来自 Adobe 的 Photoshop iPhone 版本。它将 Photoshop.com 的功能进一步精简移植到了 iPhone 上，并且与 Photoshop.com 帐号集成。用户不仅可以在 iPhone 上随时随地简单处理照片，还可以在电脑上到 Photoshop.com 上进一步处理，或是下载回来到 Photoshop 上来处理，非常方便。</p>
<p><img class="alignnone size-full wp-image-1959" title="Photoshop for iPhone" src="http://blog.istef.info/wp-content/uploads/2009/10/psmobile-1.jpg" alt="Photoshop for iPhone" width="537" height="272" /></p>
<p>如上图，PS Mobile 的配色和 Photoshop.com 很吻合，界面风格则更趋近于 iPhone，用户体验非常好。PS Mobile 可以编辑 iPhone 中已经存在的照片，也可以立刻拍摄照片来处理。当然这里我个人更喜欢用 Camera Genius 来拍摄照片（系统自带的拍照 API 实在太烂了，怎么也得来个数码防抖吧）。此外，PS Mobile 可以集成 Photoshop.com 的帐号，用户可以随时将处理好的照片上传到 Photoshop.com 上，也可以查看 Photoshop.com 帐号里现有的照片。</p>
<p><img class="alignnone size-full wp-image-1960" title="Photoshop for iPhone" src="http://blog.istef.info/wp-content/uploads/2009/10/psmobile-2.jpg" alt="Photoshop for iPhone" width="537" height="272" /></p>
<p>这里我们来看看 PS Mobile 的图片处理功能。如果用过 Photoshop.com 的朋友对这个处理界面应该不会陌生，在 PS Mobile 当前的版本中，我们可以剪裁、旋转照片，调整色彩、曝光、饱和度等等。对于大多数用户来说，这些功能是我们调整照片最常用的功能。此外，PS Mobile 支持滤镜功能，通过滤镜，我们可以把照片处理成各式各样有趣的风格，好玩又实用，下面是原图和处理过的图片：</p>
<p><img class="alignnone size-full wp-image-1961" title="psmobile-3" src="http://blog.istef.info/wp-content/uploads/2009/10/psmobile-3.jpg" alt="psmobile-3" width="537" height="360" /></p>
<p>值得一提的是，PS Mobile 目前是免费的，在 App Store 中搜索 Photoshop，或者点这个链接 [<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=331975235&amp;mt=8">iTunes Link</a>]都可以找到这款软件。PS Mobile 是目前我用过的，iPhone 上最好的图片处理工具，其它类似软件往往只实现了 PS Mobile 的一个功能就要价不菲，PS Mobile 出现后，可以把其它的都痛痛快快的删掉了，哈哈。</p>
<p>iPhone 3G S 的出现，让 iPhone 的拍照质量大幅度提升。而如今像 PS Mobile 这样的软件出现，“最好的低端随身相机”这个称号，iPhone 绝对是名副其实的。如果您拥有 iPhone 并且和我一样喜欢没事儿拍两下的，赶快趁它免费去下载吧 <img src='http://blog.istef.info/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2009%2F10%2F10%2Fps-mobile-for-iphone%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2009%2F10%2F10%2Fps-mobile-for-iphone%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2009/10/10/ps-mobile-for-iphone/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Browserscope － 开源的综合浏览器测试服务</title>
		<link>http://blog.istef.info/2009/09/15/browserscope-an-open-source-browser-test-servic/</link>
		<comments>http://blog.istef.info/2009/09/15/browserscope-an-open-source-browser-test-servic/#comments</comments>
		<pubDate>Tue, 15 Sep 2009 07:10:18 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[google app engine]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[python]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://blog.istef.info/?p=1914</guid>
		<description><![CDATA[对于 Web Developer 来说，在多个浏览器之间“游荡”已经是家常便饭，但对于每个浏览器各方面细节的了解，恐怕没几个人能够说出大半。其实如今浏览器分化为四大核心（IE, Gecko, Webkit, Opera）N 个小版本，各个所支持的东西多多少少都有点儿差别，对 Web 开发者来说确实是烦心事儿。 针对纷杂的浏览器种类，N 多人做了各种测试。比较著名的有 UA Profiler, Acid 3 之类的。今天给大家推荐的是一款一站式的测试平台 Browserscope。这玩意儿可以全自动的对你当前的浏览器进行 Network test, Acid 3 test, Browser Selector API test 和 Richtext Edit Mode test。整个过程基本是全自动的，最后给出测试结果，并且列出和其它浏览器的横向比较，非常的直观而详细。 我随手测试了一下 Firefox 3.5.3 和 Safari 4，两种浏览器测试结果都是很令人满意的。尤其是 Safari，Webkit 引擎确实不是吹的，Acid 3 100％，让我这种以面子工程为重点的 Web Dever 爽的不得了。 Browserscope 是用 Python 写成的服务，服务架设在 Google App Engine 上，本身基于 Apache 协议开源，对源代码有兴趣的朋友可以移步这里和这里。 [...]]]></description>
			<content:encoded><![CDATA[<p>对于 Web Developer 来说，在多个浏览器之间“游荡”已经是家常便饭，但对于每个浏览器各方面细节的了解，恐怕没几个人能够说出大半。其实如今浏览器分化为四大核心（IE, Gecko, Webkit, Opera）N 个小版本，各个所支持的东西多多少少都有点儿差别，对 Web 开发者来说确实是烦心事儿。</p>
<p>针对纷杂的浏览器种类，N 多人做了各种测试。比较著名的有 UA Profiler, Acid 3 之类的。今天给大家推荐的是一款一站式的测试平台 <a href="http://www.browserscope.org" target="_blank">Browserscope</a>。这玩意儿可以全自动的对你当前的浏览器进行 Network test, Acid 3 test, Browser Selector API test 和 Richtext Edit Mode test。整个过程基本是全自动的，最后给出测试结果，并且列出和其它浏览器的横向比较，非常的直观而详细。</p>
<p><img class="alignnone size-full wp-image-1915" title="Browserscope" src="http://blog.istef.info/wp-content/uploads/2009/09/09-09-14-11.jpg" alt="Browserscope" width="537" height="307" /></p>
<p>我随手测试了一下 Firefox 3.5.3 和 Safari 4，两种浏览器测试结果都是很令人满意的。尤其是 Safari，Webkit 引擎确实不是吹的，Acid 3 100％，让我这种以面子工程为重点的 Web Dever 爽的不得了。</p>
<p>Browserscope 是用 Python 写成的服务，服务架设在 Google App Engine 上，本身基于 Apache 协议开源，对源代码有兴趣的朋友可以移步<a href="http://code.google.com/p/browserscope" target="_blank">这里</a>和<a href="http://groups.google.com/group/browserscope" target="_blank">这里</a>。</p>
<p>btw: 话说这 IE 表现也太差了吧，我原来以为 IE8.0 已经改邪归正了呢，没想到还是那么烂，真是不比不知道啊～～
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2009%2F09%2F15%2Fbrowserscope-an-open-source-browser-test-servic%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2009%2F09%2F15%2Fbrowserscope-an-open-source-browser-test-servic%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2009/09/15/browserscope-an-open-source-browser-test-servic/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>三维进度条生成网站 Preloaders.net</title>
		<link>http://blog.istef.info/2009/02/03/preloaders-dot-net/</link>
		<comments>http://blog.istef.info/2009/02/03/preloaders-dot-net/#comments</comments>
		<pubDate>Tue, 03 Feb 2009 07:32:40 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[loader]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://blog.istef.info/?p=1894</guid>
		<description><![CDATA[如今这个时代，设计一个网站不用点 AJAX 的东西，那就绝对是落伍了。而用 AJAX 的话，要想得到良好的用户体验，必须要做到及时响应用户的请求。对于读取服务器数据这种比较慢的请求，进度条就是不可或缺的了。 作为整个网站设计元素的一部分，一个漂亮的进度条可以有效提高用户体验。Preloaders.net 就是这样一个 Web 2.0 服务，它可以交互式的，快速生成各种各样的动态进度条。而用户仅需要点点鼠标，设置一下样式、颜色、大小之类的参数就可以了，免去了我们用 Flash，Photoshop 之类画的麻烦。 事实上，类似 Preloaders.net 的这种服务有不少，之前我就曾经介绍过一个名为 Ajaxload 的站点。在免费的这类服务中，这两个我个人感觉用起来都是比较方便，而且样式也比较多。特别是今天介绍的这款 Preloaders.net，还提供了很多 3D 风格的动画样式，这些样式其中我很多都是第一次见，非常的别致，相信如果能够合理用到一个 Web 2.0 应用中，一定可以为它增色不少。 btw，Preloader.net 整个站点的设计也是超赞，我喜欢这种简约不简单的风格。]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1895" title="preloader" src="http://blog.istef.info/wp-content/uploads/2009/02/preloader.jpg" alt="preloader" width="207" height="69" /></p>
<p>如今这个时代，设计一个网站不用点 AJAX 的东西，那就绝对是落伍了。而用 AJAX 的话，要想得到良好的用户体验，必须要做到及时响应用户的请求。对于读取服务器数据这种比较慢的请求，进度条就是不可或缺的了。</p>
<p>作为整个网站设计元素的一部分，一个漂亮的进度条可以有效提高用户体验。<a href="http://preloaders.net" target="_blank">Preloaders.net</a> 就是这样一个 Web 2.0 服务，它可以交互式的，快速生成各种各样的动态进度条。而用户仅需要点点鼠标，设置一下样式、颜色、大小之类的参数就可以了，免去了我们用 Flash，Photoshop 之类画的麻烦。</p>
<p>事实上，类似 Preloaders.net 的这种服务有不少，之前我就曾经介绍过一个名为 <a href="http://blog.istef.info/2007/05/29/ajaxload/">Ajaxload</a> 的站点。在免费的这类服务中，这两个我个人感觉用起来都是比较方便，而且样式也比较多。特别是今天介绍的这款 Preloaders.net，还提供了很多 3D 风格的动画样式，这些样式其中我很多都是第一次见，非常的别致，相信如果能够合理用到一个 Web 2.0 应用中，一定可以为它增色不少。</p>
<p>btw，Preloader.net 整个站点的设计也是超赞，我喜欢这种简约不简单的风格。
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2009%2F02%2F03%2Fpreloaders-dot-net%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2009%2F02%2F03%2Fpreloaders-dot-net%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2009/02/03/preloaders-dot-net/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>跨浏览器的 inline-block 实现[CSS]</title>
		<link>http://blog.istef.info/2008/10/13/cross-browser-inline-block-css/</link>
		<comments>http://blog.istef.info/2008/10/13/cross-browser-inline-block-css/#comments</comments>
		<pubDate>Sun, 12 Oct 2008 16:45:59 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Experiences]]></category>
		<category><![CDATA[cross browser]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[ie]]></category>
		<category><![CDATA[inline-block]]></category>

		<guid isPermaLink="false">http://blog.istef.info/?p=1861</guid>
		<description><![CDATA[最近在为自己做个新站，想到了些效果，实现时碰到了些小麻烦，比如这个 inline block。所幸大多数问题都解决了，所以写出来分享一下。 我们在制作网页时，有时会希望一个元素既能像 block 一样定义宽度和高度，又可以像普通的 inline 一样不断行。例如下面这张图片中红线标出的地方： 通常我们实现这样的效果会使用这样的代码： &#60;a href=&#8221;#&#8221;&#62;&#60;img src=&#8221;&#8230;.&#8221; alt=&#8221;&#8230;.&#8221; /&#62;&#60;/a&#62; 这样虽然可以达到目的，但相对来说代码还是不够精炼，也不够灵活。而理想的方式，我们仅通过下面的代码即可实现： &#60;a href=&#8221;#&#8221;&#62;Yangliu.name&#60;/a&#62; 这样一来，我们就需要对 a 标签指定 width height 和 background-image。但 a 标签默认的 display 属性是 inline，width、height 是无效的。而如果对 a 设置 display:block，虽然可以解决宽度高度的问题，但元素会自动断行，无法达到我们需要的效果。有没有什么方式可以实现类似 img 标签那样，既可以设定高度宽度，又不会自动断行呢？ 答案是肯定的。在 Opera 和 Webkit 中支持一个 CSS2 的属性 display: inline-block。利用这个属性，在 Opera 下即可完全实现我们所需的效果，但在其它浏览器下就不行了。 display 属性另外还有一个不太常用的值 display: inline-table。利用这个值也可以完全实现我们所需的效果。这个属性被除了 IE 以外的所有浏览器正确支持，但是&#8230;&#8230; 呃，又是 IE。虽然在面对 CSS [...]]]></description>
			<content:encoded><![CDATA[<p>最近在为自己做个新站，想到了些效果，实现时碰到了些小麻烦，比如这个 inline block。所幸大多数问题都解决了，所以写出来分享一下。</p>
<p>我们在制作网页时，有时会希望一个元素既能像 block 一样定义宽度和高度，又可以像普通的 inline 一样不断行。例如下面这张图片中红线标出的地方：</p>
<p><a href="http://blog.istef.info/wp-content/uploads/2008/10/final-result.jpg"><img class="alignnone size-full wp-image-1862" title="inline-block" src="http://blog.istef.info/wp-content/uploads/2008/10/final-result.jpg" alt="" width="397" height="81" /></a></p>
<p>通常我们实现这样的效果会使用这样的代码：</p>
<blockquote><p>&lt;a href=&#8221;#&#8221;&gt;&lt;img src=&#8221;&#8230;.&#8221; alt=&#8221;&#8230;.&#8221; /&gt;&lt;/a&gt;</p></blockquote>
<p>这样虽然可以达到目的，但相对来说代码还是不够精炼，也不够灵活。而理想的方式，我们仅通过下面的代码即可实现：</p>
<blockquote><p>&lt;a href=&#8221;#&#8221;&gt;Yangliu.name&lt;/a&gt;</p></blockquote>
<p>这样一来，我们就需要对 a 标签指定 width height 和 background-image。但 a 标签默认的 display 属性是 inline，width、height 是无效的。而如果对 a 设置 display:block，虽然可以解决宽度高度的问题，但元素会自动断行，无法达到我们需要的效果。有没有什么方式可以实现类似 img 标签那样，既可以设定高度宽度，又不会自动断行呢？</p>
<p>答案是肯定的。在 Opera 和 Webkit 中支持一个 CSS2 的属性 display: inline-block。利用这个属性，在 Opera 下即可完全实现我们所需的效果，但在其它浏览器下就不行了。</p>
<p>display 属性另外还有一个不太常用的值 display: inline-table。利用这个值也可以完全实现我们所需的效果。这个属性被除了 IE 以外的所有浏览器正确支持，但是&#8230;&#8230; 呃，又是 IE。虽然在面对 CSS 的时候所有 Web Developer 都会恨之入骨，但放弃 IE 就等于放弃 70% 的用户，所以我们还是得找出其它的解决方案。</p>
<p>没辙了，只好 Google，结果还真给我<a href="http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/" target="_blank">找到了</a>。在这篇文章中指出，如果你首先触发 IE 的 hasLayout，然后再设置它的 display: inline，这个元素将变为 inline-block! 这样一来，我们就可以利用 IE 这个不可理喻的特点，结合一些 CSS Hacks，给出兼容各种浏览器的 CSS 代码：</p>
<blockquote>
<pre>.<strong><em>element-class</em></strong> {
    display: -moz-inline-stack;  //Firefox only code
    display: inline-block;       //some standard browsers
    zoom: 1;                     //IE only
    *display: inline;            //Only IE know this code (CSS Hack)
}</pre>
</blockquote>
<p>通过这样的代码就可以实现在各种浏览器中表现一致的 inline-block 了。不过这种方式有个小缺憾，就是无法通过 W3C CSS 验证。当然，要想通过验证也很简单，可以对除了 IE 之外的浏览器发出 inline-table 属性的样式表，对于 IE 单独发出一份 IE Only 的 CSS。
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2008%2F10%2F13%2Fcross-browser-inline-block-css%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2008%2F10%2F13%2Fcross-browser-inline-block-css%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2008/10/13/cross-browser-inline-block-css/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>让 IE &lt; 7 支持 position:fixed 的通用方法</title>
		<link>http://blog.istef.info/2008/04/13/css-position-fixed-for-ie6/</link>
		<comments>http://blog.istef.info/2008/04/13/css-position-fixed-for-ie6/#comments</comments>
		<pubDate>Sun, 13 Apr 2008 07:13:09 +0000</pubDate>
		<dc:creator>iStef</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[fixed]]></category>
		<category><![CDATA[position]]></category>

		<guid isPermaLink="false">http://blog.istef.info/2008/04/13/css-position-fixed-for-ie6/</guid>
		<description><![CDATA[每个 Web Developer / Designer 都知道 CSS 的 position:fixed 的妙用。利用这个属性，我们可以轻松的将一个元素“固定”在页面的某个位置。这在我们做一些特殊的效果，例如页边角的小角旗，或是固定页面底下的脚注都是非常有用的。但是万恶的 IE 却对这个属性支持有问题，尽管 IE7/8 已经能够正确处理这个属性，但 IE6 的份额还是很高，所以当我们用这个属性时，还得想办法解决这个问题。 今天在一位德国朋友的博客上，看到了一个不错的通用解决方案。这里我简单介绍，或者说翻译一下作者的方法： 在 Firefox/Opera 等良好支持 W3C 标准的浏览器中，如果我们希望将某个元素固定在页面底部，我们可以给它指派这样的 CSS： position: fixed;bottom: 0; 对于 IE7 来说，它虽然可以正确的将这个元素 fix 在底部，但它却错误的处理了水平方向的位置。对于这个问题，我们可以利用一个原有的 hack 来解决： left: 50%;margin-left: -390px; 这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了，他们不懂得 position: fixed 属性，所以我们需要单独解决一下： 首先我们为这些浏览器单独创建一个样式表，我们可以利用条件注释语句，让 IE&#60;7 的浏览器单独载入这个“多于”的样式表： &#60;!&#8211;[if IE lt 7]&#62;&#60;link rel=&#8221;stylesheet&#8221; [...]]]></description>
			<content:encoded><![CDATA[<p>每个 Web Developer / Designer 都知道 CSS 的 position:fixed 的妙用。利用这个属性，我们可以轻松的将一个元素“固定”在页面的某个位置。这在我们做一些特殊的效果，例如页边角的小角旗，或是固定页面底下的脚注都是非常有用的。但是万恶的 IE 却对这个属性支持有问题，尽管 IE7/8 已经能够正确处理这个属性，但 IE6 的份额还是很高，所以当我们用这个属性时，还得想办法解决这个问题。</p>
<p>今天在一位<a href="http://bassistance.de/2006/11/02/position-fixed-for-ie-7/">德国朋友的博客</a>上，看到了一个不错的通用解决方案。这里我简单介绍，或者说翻译一下作者的方法：</p>
<p>在 Firefox/Opera 等良好支持 W3C 标准的浏览器中，如果我们希望将某个元素固定在页面底部，我们可以给它指派这样的 CSS：</p>
<blockquote><p>position: fixed;<br />bottom: 0;</p>
</blockquote>
<p>对于 IE7 来说，它虽然可以正确的将这个元素 fix 在底部，但它却错误的处理了水平方向的位置。对于这个问题，我们可以利用一个原有的 hack 来解决：</p>
<blockquote><p>left: 50%;<br />margin-left: -390px;</p>
</blockquote>
<p>这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了，他们不懂得 position: fixed 属性，所以我们需要单独解决一下：</p>
<p>首先我们为这些浏览器单独创建一个样式表，我们可以利用条件注释语句，让 IE&lt;7 的浏览器单独载入这个“多于”的样式表：</p>
<blockquote><p>&lt;!&#8211;[if IE lt 7]&gt;<br />&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;path/to/stylesheet/ie-stuff.css&#8221; type=&#8221;text/css&#8221; media=&#8221;screen&#8221; /&gt;<br />&lt;![endif]&#8211;&gt;</p>
</blockquote>
<p>然后我们在这个 CSS 文件中，对这个需要固定在页面底部的元素添加 CSS 属性：</p>
<blockquote><p>postion: absolute;<br />bottom: auto;<br />top: expression( eval(document.compatMode &amp;&amp; document.compatMode==&#8217;CSS1Compat&#8217;) ? documentElement.scrollTop + (documentElement.clientHeight &#8211; this.clientHeight) &#8211; 1 : document.body.scrollTop + (document.body.clientHeight &#8211; this.clientHeight) &#8211; 1);</p>
</blockquote>
<p>这里事实上就是利用了 IE 中特有的 CSS 运算符 expression。在 expression 中我们可以利用 Javascript 计算出需要的 top 值，这样就达到了与 position: fixed 同样的效果。</p>
<p>这种方法原理上来说和以前的 Javascript 方案是相同的，但这种方法显然通用性更好一点。当然，如果您不介意用 Javascript 的话，实现同样的效果会更直观更简单一点。</p>
<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.istef.info%2F2008%2F04%2F13%2Fcss-position-fixed-for-ie6%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.istef.info%2F2008%2F04%2F13%2Fcss-position-fixed-for-ie6%2F&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.istef.info/2008/04/13/css-position-fixed-for-ie6/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using memcached
Page Caching using memcached
Database Caching 1/47 queries in 0.033 seconds using memcached
Object Caching 1401/1525 objects using memcached

Served from: blog.istef.info @ 2012-02-14 01:01:42 -->
