nat*_*e75 18 css image linear-gradients css3
我的项目的创意设计师和我有一些友好的分歧,至于是否更好地使用他的comp的片段或依靠浏览器的渲染引擎来创建用户体验的某些方面.
一个具体的例子是水平"条形",它运行小部件的整个宽度.他创造了一个非常时髦的渐变,涉及不同颜色和不透明度的几个停顿,他觉得图像的小尺寸是优选的,或者至少可以与本地生成渐变所需的CSS代码的增加行相比.
我们已经在使用CSS精灵技术来减少从服务器返回的次数,这对我们来说不是问题.现在,它只是使用切片图像与使用CSS和HTML渲染的专业人士和概念.
是否存在关于图像需要多大才能成为两者"更糟糕"选项的明确规则？
更新:由于一些人已经提到梯度的复杂性作为一个因素,我将在这里介绍它:
-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));
很复杂!;-)
Fab*_*ney 13
测量它!我认为不是你喜欢的答案,但这实际上取决于CSS的复杂程度以及渲染所需的时间.
在大多数情况下,它将是渲染时间(CSS版本)与请求开销和传输时间(图像版本).你很可能会在这里看到大数字.由于您已经在使用图像精灵,因此您将请求开销降至最低.
浏览器兼容性也应该是您应该注意的事项.在谈到渐变等等时,图像通常会胜过CSS.
一些非常复杂的CSS3网站来展示我的意思:http://lea.verou.me/css3patterns/ 这是一个非常好的案例研究,但令人难以置信的缓慢.加载时滞后.滚动时它会更加滞后.而且我确信它比使用图像精灵的解决方案慢得多.
别对我错!我喜欢CSS,但图像也很好.有时甚至更精细.
测量它!当您没有时间进行测量时,请估计css的复杂程度.当它往往变得复杂,然后使用图像.遇到兼容性问题时,请使用图像.
一般来说,如果可以用CSS完成,肯定会跳过图像.如果没有其他原因,它更容易维护.
然而,复杂的渐变可能是我放弃并投入图像的地方.最近实现了一些CSS渐变,现在有点混乱.
最终,Fabian Barney有正确的答案.如果这是一个性能问题,你需要衡量一些事情.在宏伟的计划中,这可能是性能问题的重点.