logo标签列表

为什么有人会选择使用纯CSS样式的按钮而不是位图/精灵技术？

csscss-sprites
5

在我的工作中，我们一直在讨论如何最好地部署网站上的按钮。一些美术总监要求使用纯CSS制作按钮，而我更喜欢在Photoshop中制作Spritesheets。我的观点是，字距、文本效果（如投影和抗锯齿）在Photoshop中呈现出来更好看。他们的观点是，你会失去SEO分数，翻译引擎无法更改按钮。

我相信双方都有各自的观点 - 我是否忽略了任何明显的论据？

1
此外，CSS 加载比位图更快。 - Cthulhu
8个回答
4
首先，纯CSS按钮加载速度肯定更快，因为它们只是几行代码。很多东西不能用CSS/JS来做，这些必须是图片，会消耗大量带宽。但是你应该尽可能地节省带宽。如果对速度有优先考虑，这一点就足够说服人了。
关于效果在Photoshop之外看起来更好的问题...我并不完全同意。我真的不认为浏览器实现有任何不好的地方，所以你需要先超越那些。
另外，绘制一个按钮图像可能会比写几行代码花费更多时间。同样适用于更改按钮。可维护性在CSS方面 :)
我不认为翻译的论点适用。如果“本地化引擎”可以处理不同语言的不同CSS样式/样式类/文本，那么它也应该能够同样地处理不同语言的不同图像/精灵。
关于SEO：如果你有一个备用文本来代替按钮或图片（我认为这是标准行为），那么搜索引擎和任何字符串都应该适用。虽然我在这方面不是100%确定。
2

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

在软件开发中，使事情更快总是非常重要的。

1
另外一个要点是，Photoshop 无法使用 ClearType（使用子像素），因为它取决于查看器的显示规格。因此，浏览器文本看起来更清晰、更锐利。
我更喜欢完全基于 CSS 的简单按钮，带有轻微的效果。如果他们真的需要更重的外观和更多的效果，那么最好的方法是使用位图背景和 HTML 文本制作按钮，这些按钮可以使用 CSS 调整大小以覆盖不同的文本大小。
完全位图化的按钮看起来真的很丑，特别是在较小的文本大小下，维护、复制、大量修改（尤其是如果您没有原始 PSD 文件）都会让人头痛，需要更多的带宽和加载时间，不能使用代码输入等等。
1

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

2- 带宽，如果您的网站有 20 个按钮，并且每天有 50000 个独立用户，这确实会产生影响。

3- SEO 提升，搜索引擎更喜欢 CSS 而不是图像，当然还有文本。

现在，使用图像可以做到 CSS 无法做到的事情（至少目前如此）。

这完全取决于您想要实现什么，您想要创建的网站类型以及您关注的受众群体。

看看 Stackoverflow，它几乎没有图片。其余都是纯 CSS。

0

还可能存在性能问题。简单来说，更多/更大的图像=更多的下载量。如果您有许多图形元素，这将最终减慢网站速度。在您的宽带/光纤连接上，这可能不是一个很大的问题，但在较慢的连接上会成为问题——特别是如果由于某种原因禁用了缓存。

实现spritemap解决方案需要比纯CSS解决方案花费更多的时间。

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

最终，这取决于项目。如果关注性能、开发速度和物超所值，那么就应该选择CSS。然而，如果客户要求网站在他的古老浏览器中看起来完美无缺，那么最好使用spritemap。

0
除了加载速度更快（请求数量较少）外，CSS按钮更容易维护。需要更长的按钮、更改文本颜色、禁用样式、另一套颜色。这是随着时间的推移产生巨大差异的。
CSS按钮的一个缺点是，在某些IE版本中不支持例如text-shadow - 您的按钮在每个浏览器中都看起来不完全相同，但如果您正确编码它，它仍然会像样。
完全同意你的观点（尽管我有一个很酷的Photoshop脚本可以为我生成所有的CSS和偏移量）。 - Hairgami_Master
0
他们的观点是有道理的，但是相比于基于浏览器的解决方案，Photoshop、MS Word和各种DTP平台的字距和排版总是更好的，考虑到浏览器如何糟糕地使用完全对齐的类型 - 它很差。按照同样的论点，我们是否应该放弃所有基于CSS的解决方案，因为非Web工具可以做得更好？答案是否定的，否则我们都还在使用Flash，因为它可以给用户带来“更好的体验”。
您必须考虑用户体验的关键性与开发和开放标准的易用性。我认为，将内容层尽可能地与设计层分离是值得的，这意味着放弃使用图像来实现曲线角、按钮和许多其他可以使用CSS3渲染的东西。为了做到这一点，我们有时不得不在可用技术的基础上权衡一点控制和完美。
@Diodeus- 感谢您的见解。我已经在像素级别上查看了结果，Photoshop的抗锯齿明显更好。我注意到了这种差异，但也许不足以证明它的优越性。 - Hairgami_Master
0

当您使用图形来在按钮上显示文本时，您可以使用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的代码之间有真正的区别，它们可以做同样的事情。如果您的网站每天被数百人访问，您不会看到这种差异，但当访问量可能达到数十亿时......

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接