1 关于CSS Sprite
CSS Sprites技术不新鲜, 早在2004年 CSS Zen Garden 的园主 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 Sprites是一种网页图片应用处理方式. 它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去, 这样一来, 当访问该页面时, 载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 对于当前网络流行的速度而言, 不高于200KB的单张图片的所需载入时间基本是差不多的, 所以无需顾忌这个问题.
按照yahoo的rules for high performance web sites的原则, 应当较少Client与Server端间的HTTP Request次数. 通过CSS Sprites方法将多张图片组装成单独的一张图片, 可以有效减少HTTP请求 的次数.
当整幅图片载入完成后, 就可以使用CSS方法通过设置背景位置的方式完成所需图片的准确调用.
2 CSS Sprite的使用
有几篇关于CSS Sprites的文章
- What Are CSS Sprites?
- How to create CSS sprites
- Creating Rollover Effects with CSS Sprites
- Building a Dynamic Banner with CSS Sprites
- High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites
3 CSS Sprite的例子
[原文：http://blog.rexsong.com/?p=746#comments]
A. 图片限制(Image Slicing)
典型如文本编辑器, 小图标特别多, 打开时一张张跑出来, 给用户的感觉很不好. 如果能用一张图解决, 则不会有这个问题, 比如百度空间、163博客、Gmail都是这么做的.
Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites
B. 单图转滚(Single-image Rollovers)
触发切换图片的需求, 传统方案得重新请求新图片, 因为网络问题经常造成停留或等待. 如果能把多种状态合并成一张图, 就能完美解决, 然后再使用背景图技术模拟动态效果.
ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/
C. 延长背景(Extend Background Image)
如果图片的某边可以背景平铺无限延长, 则不需要每个角、每条边单独搞出来, 图片能少一个就少一个. 其实, 这个理论还可以扩展到四角容器里, 好处是能大大简化HTML Structure.
Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/
D. 综合案例
Google Korea (1和2技巧
http://demo.rexsong.com/200705/google_korea/
E. CSS Menus (2和3技巧)
http://demo.rexsong.com/200705/css_background_menus/
4 CSS Sprites的问题
由于IE6存在的background的flicker问题IE6/Win, background image on <a>, cache=‘check every visit’: flicker!, 有人针对此问题提出了解决方案Fast Rollovers Without Preload
关于IE6的flicker问题, fivesevensix.com上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6
另外：brunildo.org的CSS tests and experiments是关于css各种功能不错的参考手册和测试工具.
5 相关资源
- What Are CSS Sprites? http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=1
- CSS Sprites: Image Slicing’s Kiss of Death http://www.alistapart.com/articles/sprites/
- CSS Sprites Generator http://www.csssprites.com/
- http://spritegen.website-performance.org/
- Fast Rollovers Without Preload http://wellstyled.com/css-nopreload-rollovers.html
- JavaScript Sprite Animation Using jQuery http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/
- http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/
- How to create CSS sprites http://fatagnus.com/how-to-create-css-sprites/
- Creating Rollover Effects with CSS Sprites http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/
- Building a Dynamic Banner with CSS Sprites http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/
- CSS Sprites and IE/Win Flicker Issue http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/
- css用法测试工具：CSS tests and experiments http://www.brunildo.org/test/index.html
没有评论:
发表评论