Question

我的工作正在讨论在我们的网站上部署按钮的最佳方式。一些艺术总监要求纯CSS中的按钮，我更喜欢在Photoshop中制作Spritesheets。我的论点 - 字符串，文字效果，如阴影和别名，从Photoshop中看起来更好看。他们的论点 - 你失去了SEO点，翻译引擎无法改变按钮。

我确信双方都存在争议 - 我是否遗漏了这些争论的明显内容？

Answer 1

嗯，首先，纯CSS按钮肯定会加载更快，因为它们只是一些代码行。很多事情都无法在CSS / JS中完成，那些必须是图像，并且会消耗很多带宽。但是你可以节省带宽的地方。如果速度是您项目的优先事项，那么这就是一个杀手锏。

关于效果看起来更好的Photoshop ...我不会在此同意。我真的不认为浏览器实现在任何方面看起来都很糟糕，所以你必须首先击败它们。

此外，绘制按钮图像可能比编写一些代码行花费更多时间。同样适用于更改按钮。可维护性在CSS方面;）

我认为翻译参数不适用。如果“本地化引擎”可以处理不同语言的不同CSS样式/样式类/文本，它应该能够处理不同语言的不同图像/精灵。

关于SEO：如果您有按钮或图像的后备文本（如果无法加载，IMO标准行为），那应该适用于搜索引擎以及任何字符串。虽然我不是100％肯定在这里。

Answer 2

使用纯CSS而不是图像的另一个可能的论点是 speed 。根据您拥有的按钮数量，加载图像而不是CSS /纯文本可能需要相当长的时间。

提高速度在软件开发中始终是一件大事。

Answer 3

1 - 速度，css加载速度比图像快

2 - 带宽，如果您的所有网站都有20个按钮，每天有50000个独立用户，那么它确实会产生影响。

3 - SEO提升，搜索者更喜欢css到图像，当然还有所有文本。

现在，有了图像你可以做的事情不能（至少现在不是）。

这一切都取决于你想要完成什么，你想要做的网站类型。你关注的观众。

看看Stackoverflow，它的图像很少。其余的都是纯粹的CSS。

Answer 4

另一点; Photoshop不能做cleartype（使用子像素），因为它取决于观众的显示规格。所以浏览器文本看起来更清晰＆amp;尖锐。

我更喜欢完全基于CSS的简单按钮和灯光效果。如果他们真的需要更重的外观和更多的效果，那么方法是使用位图背景和HTML文本制作一个按钮，最好可以使用CSS调整大小以覆盖可变文本大小。

完全位图按钮看起来真的很难看，特别是在较小的文字大小中，是一个令人头疼的维护，复制，大规模修改（特别是如果你没有原始的PSD），需要更多的带宽和加载时间，不能使用代码等输入

Answer 5

可能还存在性能问题。坦率地说，更多/更大的图像=更多下载。如果您有许多图形元素，这最终会使网站变慢。在你的宽带/光纤连接上，这可能不是一个很大的问题，但在连接速度较慢时会出现问题 - 特别是如果由于某种原因禁用了缓存。

前端开发人员还需要更多时间来实现spritemap解决方案而不是纯CSS解决方案。

不要误解我的意思。 Spritemaps非常棒，因为它们比多个图像的性能要好得多，但CSS下载速度更快，开发速度更快，更灵活，结构更好。

最后，这取决于项目。如果它是关于性能，开发速度和降价的钱，那么它一直是CSS。但是，如果客户要求该网站在他的石器时代浏览器中看起来像素完美，那么最好使用spritemap。

Answer 6

当您使用图形在按钮上显示文本时，您可以将CSS text-indent: -100000;与常规文本一起使用 - 搜索引擎会看到它，但用户不会。

<div class="button">Button text</div>
<style>
    .button {
        text-indent: -100000;
        background: url('path/to/image/with/button/text.jpg') no-repeat center center transparent;
    }
</style>

精灵是好的和花哨的，但是（例如）50kB图像和3kB代码存在真正的差异，它们做同样的事情。如果您的网站每天访问数百个，您将看不到这种差异，但是当它可能是数十亿时......

Answer 7

除了加载更快（请求更少），css按钮更容易维护。需要更长的按钮，更改文本颜色，禁用样式，另一组颜色。随着时间的推移，这是巨大的差异。

css按钮的一个缺点是，例如在IE的某些版本中不支持文本阴影 - 您的按钮在每个浏览器中看起来都不完全相同，但如果您正确编码它仍会锁定正确。

Answer 8

他们的观点是有效的，但不是Photoshop，MS Word和各种DTP平台的字距和排版总是优于基于浏览器的解决方案吗？考虑一下浏览器使用完全对齐类型的糟糕程度 - 这是废话。通过这个论点，将放弃所有基于CSS的解决方案，因为非Web工具可以做得更好吗？答案是否定的，或者我们仍然使用Flash，因为它为用户提供了“更好的体验”。

您必须考虑用户体验的关键性与易于开发和开放标准的关系。我认为尽可能地将内容层与设计层分开是值得的，这意味着留下弯曲角落，按钮和许多其他可以使用CSS3渲染的东西的图像。要做到这一点，我们有时必须通过一些控制和完善来换取可用的技术。

为什么有人会在位图/ SpriteSheet技术上使用纯CSS样式按钮？

8 个答案: