5

在我的工作中，我们一直在讨论在我们的网站上部署按钮的最佳方式。一些艺术总监要求纯 CSS 中的按钮，我更喜欢在 Photoshop 中制作 Spritesheets。我的论点 - 字距调整、阴影和锯齿等文本效果从 Photoshop 中看起来都更好。他们的论点——你失去了 SEO 积分，翻译引擎不能改变按钮。

我确信双方都有论据——我是否遗漏了这些论点中的任何一个明显的东西？

4

8 回答 8

4

好吧，一方面，纯 CSS 按钮肯定会加载得更快，因为它们只是几行代码。许多事情不能在 CSS/JS 中完成，那些必须是图像，并且会消耗大量带宽。但是，在您可以节省带宽的地方，您应该这样做。如果速度是您项目的优先事项，那么仅此一项就是一个杀手锏。

.

关于从 Photoshop 中看起来更好的效果......我不一定同意这里。我真的不认为浏览器实现看起来很糟糕，所以你必须首先打败那些。

.

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

.

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

.

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

于 2012-06-05T15:28:38.300 回答
2

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

让事情变得更快在软件开发中始终是一件大事。

于 2012-06-05T15:26:51.453 回答
1

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

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

3- SEO提升，搜索者更喜欢css而不是图像，当然最重要的是文本。

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

这一切都取决于你想要完成什么，你想要制作什么样的网站。你关注的观众。

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

于 2012-06-05T15:35:53.010 回答
1

还有一点；Photoshop 不能做 cleartype（使用子像素），因为它取决于查看器的显示规格。所以浏览器文本看起来更清晰、更清晰。

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

Fully bitmapped buttons really look ugly especially in smaller text sizes, is a headache to maintain, duplicate, mass modifications (esp if you don't have the original PSD), takes much more bandwidth and load time, can't be typed using code, etc.

于 2012-12-23T17:54:43.647 回答
0

也可能存在性能问题。坦率地说，更多/更大的图像=更多的下载。如果您有许多图形元素，这最终会降低网站的速度。在您的宽带/光纤连接上，这可能不是一个大问题，但在较慢的连接上会是一个问题——尤其是如果由于某种原因禁用了缓存。

与纯 CSS 相比，前端开发人员实现 spritemap 解决方案也需要更多时间。

不过，不要误会我的意思。Spritemap 非常棒，因为它们在性能方面比多张图像要好得多，但 CSS 的下载速度更快，开发速度更快，更灵活，结构更好。

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

于 2012-06-05T15:25:19.723 回答
0

当您使用图形在按钮上显示文本时，您可以将 CSStext-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>

Sprites 很好而且很漂亮，但是（例如）50kB 的图像和 3kB 的代码确实存在差异，它们的作用相同。如果您的网站每天被访问数百次，您将看不到这种差异，但当它可能是数十亿时......

于 2012-06-05T15:27:15.850 回答
0

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

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

于 2012-06-05T15:32:13.843 回答
0

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

您必须考虑用户体验的重要性与易于开发和开放标准的关系。我相信尽可能将内容层与设计层分开是值得的，这意味着要为弯角、按钮和许多其他现在可以使用 CSS3 呈现的东西留下图像。要做到这一点，我们有时必须权衡一点控制和完美，以推进可用的技术。

于 2012-06-05T15:34:15.060 回答