css - css-sprite 是一种好的技术吗?

标签 css css-sprites

<分区>

  1. css-sprite 是好的技术吗?我在 http://spriteme.org/ 了解了它的优点我还在 stackoverflow 中看到了很多关于 css sprites 的问题。

  2. 它有什么缺点?

  3. 它能像他们网站上声称的那样在所有浏览器中运行吗?

最佳答案

是的,这是一个很好的技术。

您可以减少 HTTP 请求的数量,这是一种页面优化技术。

中的第一条规则

Best Practices for Speeding Websites by Yahoo

最小化 HTTP 请求

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

当您需要更改 sprite 中图像的尺寸时,您必须重新计算图像的偏移量。但我不认为这是一个巨大的负担。

几乎所有现代浏览器都支持它。

这也是一篇关于 CSS sprites 的好文章

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

关于css - css-sprite 是一种好的技术吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1477332/

相关文章:

jquery - CSS Sprites 不会悬停在执行 Action 上

css - Facebook 标签页内的图像翻转

html - 如何使从任何图像 Sprite 而不是单个图像中获取的图像看起来更小?

css - @font-face 只影响某些字符

css - 导航栏调试

javascript - 如何在整个圆圈周围添加描边并在 svg 中动画旋转圆圈?

html - 自定义工具提示

css sprite 事件状态仍然显示在浏览器后退按钮上

html - 用于测试 CSS 的综合 HTML 页面?

javascript - 使用 Javascript 更改背景位置?