我的项目的创意设计师,我有一些友好的分歧,无论是使用他的comp片段还是依靠浏览器的渲染引擎来创建用户体验的某些方面。
一个具体的例子是一个水平的“bar”,它运行窗口小部件的整个宽度。他创造了一个非常诡异的渐变,涉及到不同颜色和不透明度的几个停顿点,他觉得图像的小尺寸是比较适合的,或至少可以与本机生成梯度所需的CSS代码相匹配。
我们已经使用CSS sprite技术来减少从服务器返回的次数,这对我们来说不是一个问题。现在它只是使用切片图像,而不是使用CSS和HTML渲染的专业人员和对手。
有没有一个确定的规则,图像需要多大是两个“更糟糕”的选择?
更新:由于有几个人提到了梯度的复杂性作为一个因素,我将在此介绍:
-webkit-gradient(linear,left top,left bottom,color-stop(50%,rgb(0,0)),to(rgba(0,0.9)));
很复杂;-)
解决方法
测量它!不是你喜欢我的想法,但它确实取决于CSS的复杂程度,因此渲染需要多长时间。
在大多数情况下,它将是渲染时间(CSS版本)与请求开销和传输时间(映像版本)。你最有可能看到这里的大数字。由于您已经在使用图像精灵,因此您将请求开销降至最低。
浏览器的兼容性也应该是你应该注意的事情。这里的图像通常会胜过CSS,当涉及到渐变和类似的东西。
一些非常复杂的CSS3站点来展示我的意思:http://lea.verou.me/css3patterns/
这是一个非常好的案例研究,但令人难以置信的慢。加载时滞后。当滚动时,它滞后甚至更多。而且我相信它比使用图像精灵的解决方案慢得多。
不要对我错了!我喜欢CSS,但图像也很好。有时甚至更细。
概要
测量它!当你没有时间来衡量时,估计css将是多么复杂。当它变得复杂时,使用图像。遇到兼容性问题时,请使用图像。