19

我的项目的创意设计师和我有一些友好的分歧,关于是使用他的作品的片段还是依靠浏览器的渲染引擎来创建用户体验的某些方面更好。

一个具体的例子是一个水平的“栏”,它贯穿了小部件的整个宽度。他创建了一个非常时髦的渐变,其中包含不同颜色和不透明度的几个停止点,他认为小尺寸的图像更可取,或者至少与本机生成渐变所需的添加的 CSS 代码行相当。

我们已经在使用 CSS sprite 技术来减少从服务器返回的次数,所以这对我们来说不是问题。现在它只是使用切片图像与使用 CSS 和 HTML 渲染的利弊。

对于图像需要多大才能成为两者中的“更差”选项,是否有明确的规则?

更新:由于一些人提到渐变的复杂性是一个因素,我将在这里介绍它:

-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));

很复杂!;-)

4

3 回答 3

13

测量它!不是我想的你喜欢的答案,但这真的取决于 CSS 的复杂程度以及渲染需要多长时间。

在大多数情况下,它将是渲染时间(CSS 版本)与请求开销和传输时间(图像版本)。您很可能会在这里看到大数字。由于您已经在使用图像精灵,因此您将请求开销降至最低。

浏览器兼容性也应该是您应该注意的。在这里,当涉及到渐变和类似的东西时,图像通常会胜过 CSS。

一些非常复杂的 CSS3 站点来演示我的意思: http: //lea.verou.me/css3patterns/ 这是一个非常好的案例研究,但速度非常慢。加载时会滞后。滚动时它会滞后更多。而且我确信它比使用图像精灵的解决方案要慢得多。

不要误会我!我喜欢 CSS,但图像也很好。有时甚至更好。

概括

测量它!当您没有时间测量时,请估计 css 的复杂程度。当它趋于复杂时,请使用图像。当您遇到兼容性问题时,请使用图像。

于 2011-11-09T19:21:26.910 回答
8

一般来说,如果可以用 CSS 完成,肯定会跳过图像。如果没有其他原因,它更容易维护。

然而,复杂的渐变很可能是我放弃并投入图像的地方。最近实现了一些 CSS 渐变,现在有点乱。

最终,Fabian Barney 给出了正确的答案。如果是性能问题,则需要衡量。从总体上看,这很可能很少涉及到性能问题。

于 2011-11-09T19:25:54.923 回答
0

我认为 CSS 更可重用。想象一下,您必须在同一个 Web 文档中一遍又一遍地重复相同的图像。那里有很多 HTTP 请求。但这是我的观点,如果我错了,请纠正我我认为 CSS 更具表现力和灵活时尚。但是,有些事情您必须注意。诸如浏览器特定前缀之类的东西会杀死具有太多 CSS 的页面。

于 2014-11-26T11:08:23.240 回答