css-sprite 是好技术吗？我在http://spriteme.org/上阅读了它的优点，并且我在 stackoverflow 中也看到了很多关于 css sprites 的问题。
它有什么缺点？
它会在他们网站上声称的所有浏览器中工作吗？
问问题
3046 次
6 回答
19
是的，这是一个很好的技术。
您可以减少 HTTP 请求的数量，它是一种页面优化技术。
中的第一条规则
是
最小化 HTTP 请求
80% 的最终用户响应时间都花在了前端。大部分时间都用于下载页面中的所有组件：图像、样式表、脚本、Flash 等。减少组件的数量反过来会减少呈现页面所需的 HTTP 请求数量。这是加快页面速度的关键。
CSS Sprites是减少图像请求数量的首选方法。将您的背景图像组合成一个图像，并使用 CSS background-image 和 background-position 属性来显示所需的图像片段。
减少页面中组件数量的一种方法是简化页面的设计。但是，有没有一种方法可以构建内容更丰富的页面，同时实现快速响应时间？这里有一些技术可以减少 HTTP 请求的数量，同时仍然支持丰富的页面设计。
当您需要更改精灵内部图像的尺寸时，您必须重新计算图像的偏移量。但我不认为这是一个巨大的负担。
几乎所有现代浏览器都支持它。
这也是一篇关于 CSS sprites 的好文章
于 2009-09-25T13:41:03.657 回答
4
它适用于 IE 6 Safari Opera 8+ 和 FF2+。您应该阅读以下内容：
它解释了如何压缩 GIF（和其他图像文件）。例如，在“行”而不是“列”中显示相同的数据会显着减少空间使用。
此外，您预加载所有图像，如果您交换图像，则不会有延迟。
另一个优点是您可以将一个精灵用于“红色”设计，将另一个精灵用于“蓝色”设计。
但是有一个缺点：
大多数浏览器缓存图像精灵。因此，在更新精灵时，您可能会遇到麻烦。
于 2009-09-25T13:41:45.820 回答
2
这是一项很棒的技术，但是您必须非常小心地操作它，以便它在每个浏览器中都能正常工作。
它可以完成并且是一个很好的优化技巧，但与往常一样，请注意它在 IE、Firefox 和 Chrome 中的工作方式。
缺点是它不能一直使用，你必须坚持跨浏览器 css 支持的最小公分母。
于 2009-09-25T13:39:26.523 回答
2
做得对，它应该在所有浏览器（甚至 IE6）中都能正常工作。
我能想到的最大问题是，如果您在一个 sprite 中有太多图像，并且只需要更改其中一个的尺寸，则可能会导致您必须更改大量 CSS（因为其他图像的偏移量可能也会改变）
于 2009-09-25T13:41:43.993 回答
2
我遇到的一个缺点是 CSS sprite 在许多浏览器中似乎无法正确打印
于 2009-09-25T14:28:33.273 回答
0
当然，因为它节省了大量的 http 请求，这对您的网站加载时间非常重要。
看看这个页面：
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
它有一个很好的解释和你需要知道的关于 CSS Sprite 的一切。
于 2013-05-17T07:28:14.373 回答