历年在我们的IDF上,第一天的第一场主题报告,都是由我们的CEO作的,讲的是有关今后的技术和应用趋势。今年讲的是“from extreme to mainstream”,是说技术如何从发烧友级别走向大众主流这样一个趋势。典型实例如WiFi,如今已经算是计算机的标配。当今的发烧友级技术如超便携、强大的图形处理、娱乐方面的三维处理技术等等,将会在不久的将来成为大众普级型技术配置。
我在现场听的这场报告,感受很强烈,因为我身边就坐着一位活生生的技术化身。我的邻座是一位记者先生,用他的笔记本电脑正做现场直播(应该是通过WiFi连在宽带上):电脑上架着摄像头对着舞台,手边是MP3录音笔,手指在电脑键盘上飞舞。这位记者先生在与他的读者们分享现场体验。我觉得要不了多久,很多普通人都可以随时随地与远方的家人和朋友们分享现场体验,从视频到声音文字,不过一抬手的事儿。
这些技术的发展,都是靠源源不断的创新来推动的。我们作为公司的核心研究部门,正处在技术演变的源头上。我们对创新提出想法,研究它们可行的技术实现。这些技术成熟后进入产品,到市场中首先进入发烧友的小众应用人群,随后扩散至大众主流。
在技术发展的这个过程中,创新能最终成为大众主流技术,根本的一点是必须正确把握未来的应用方向。因为技术从发烧友到大众主流技术,这是一个市场接受的过程。不能满足消费者需求的技术,很快就会从市场上消失。
企业要生存,要可持续地发展,就必须不断创新,有源源不断的技术推向市场,并且在市场上取得成功。在技术创新的过程中,有两个关键点,一是如何产生有价值的创新想法,二是创新想法在充分研究成熟后,如何快速进入产品开发过程。朋友们,我又要作广告了,想知道英特尔的创新体系是如何运作的吗?英特尔的研究部门和开发部门都是如何发挥作用的?请在10月10日关注2007年英特尔研究论坛,您会大有收获。
CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传,后来出来个14 Rules for Faster-Loading Web Sites, 技术人员之间竞相传阅,其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来,甚至出现了在线生成工具,势不可挡也。近来国内很多blog都提到CSS Sprites,最著名的例子莫过于 http://www.google.co.kr/ 下方的那几个动画。最新发布的YUI中,也是使用到CSS Sprites,几乎都有的CSS装饰图都被一个40×2000的图包办。社交大站Facebook最近也使用了一个22×1150的图片承担了所有icon. 一时间,CSS Sprites无处不在。
我们知道,自CSS革命以降,HTML倾向于语义化,在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的,少不了各种漂亮的图来装点。新时代的生产方式是,在HTML布满各种各样的钩子(hook),然后交由CSS来处理。在需要用到图片的时候,现阶段是通过CSS属性background-image
组合background-repeat
, background-position
等来实现(题外话:为何我提现阶段,因为未来浏览器若支持content
则又新增另外的实现方法)。我们的主角是,你一定猜到了,就是background-position
。通过调整background-position
的数值,背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变,由于图片位置的改变,你看到只该看到的而已。就好比手表上的日期,你今天看到是21,明天看到是22,是因为它的position往上跳了一格。所以你也大概了解到,CSS Sprites一般只能使用到固定大小的盒子(box)里,这样才能够遮挡住不应该看到的部分。
我们使用YUI的sprite.png举个例子,假如我们有这么一段代码,max
代表最大化,min
代表最小化,我们需要给它们配上相应的漂亮图片(这样我们的网站才能够吸引人,才可以卖钱,才可以到佛罗里达晒太阳:D):
<div class="max">最大化</div>
<div class="min">最小化</div>
这两个class
都使用同一个图片:
.min, max {
width:16px;
height:16px;
background-image:url(http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png);
background-repeat: no-repeat; //我们并不想让它平铺
text-indent:-999em; //隐藏文本的一种方法
}
效果如下:
我们看到一团灰,没错,因为我们还没有指定background-position
,默认为 0 0
,可以看下sprite.png, 处于这个位置正是灰块。好了,我们要找到代表最大化的加号和代表最小化的减号的位置找出来。经过测量,最大化按钮位于Y轴的350px处,最小化按钮位于Y轴400px处。想一想我们如何才能让它们能够显示出来呢,明显,要向上提升sprite.png,得到代码如下:
.max {
background-position: 0 -350px;
}
.min {
background-position: 0 -400px;
}
耶,我们成功了:
(注意:为了举例的方便,本例子直接在HTML内置样式,切勿在实践中的非特殊情况使用这种方式)。
我们从前面了解到,CSS Sprites为什么突然跑火,跟能够提升网站性能有关。显而易见,这是它的巨大优点之一。普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
至于可维护性,这是一般双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。当然,在性能的口号下,这些都是可以克服的。
由于图片的位置需要固定为某个绝对数值,这就失去了诸如center
之类的灵活性。
前面我们也提到了,必须限制盒子的大小才能使用CSS Sprites,否则可能会出现出现干扰图片的情况。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。YUI的解决方式是,加大图片之间的距离,这样可以保持有限度的缩放。
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR,比如固定大小的icon替换。为保持兼容性,图片中的各个部分保持一定的距离是一种不错的做法。
十月 2007 | ||||||
一 | 二 | 三 | 四 | 五 | 六 | 日 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |