为什么要使用CSS3按钮？

Question

我最近构建了一个网站，并决定创建按下CSS3点击时压抑的按钮，非常酷。

但是，只有现代浏览器显示CSS3按钮，是否确实有一个有效的理由在精灵上使用CSS3？

客户问我这个问题，我能想到的只是HTTP请求较少，因此加载速度会稍快。从客户的角度来看，我可以看到这是一个漂亮的一周答案。

有更好的理由吗？

还是有一个后备方法可以移动Sprites背景位置，或更改梯度并在悬停 /焦点上添加盒子阴影？

只是写作，让我怀疑现代化的化合物是否会迎接挑战...

Answer 1

这是一个道德和商业问题，而不是一个技术问题，但让我们看看一些要点。

首先，我认为您的客户不应该了解有关实施的所有技术详细信息。他/她应该知道他/她需要知道什么，这已经足够了。

您不应该说“我将使用CSS3，一些新的HTML5元素和不错的JavaScript眼神效果来制作您的网站”。只需说“我可以为您创建一个好的网站。”

如果他质疑您使用的是什么或为什么您认为这是一种最佳方法，那么您会以好处回复。

它是轻巧的，带来的兼容性问题更少，并且更易于维护。 =>减少他/她的客户将等待网站加载，每个人都能看到它，并且在将来的需求中的成本降低。

CSS3不是新的革命性东西，您应该面对这些技术是进化的。所有以前的规则仍然适用，包括后备规则。

CSS Sprites是一种用CSS2制成的技术，因此它应该与任何浏览器一起使用，包括一些旧的浏览器（不确定IE6）。

梯度是新的。 FF 3.5+，IE9 Beta，Opera和Webkit浏览器显示它们。 IE8或以上没有。一些盒子阴影的东西。

对于这些，我只是添加了一些非常简单的规则作为后备。

当我开发时，我将链接放在Page的标题上，然后使用IE条件注释来进行负载，即仅样式表和脚本。

在此IE只有样式表，我只是添加使它变得不错的骇客或后备。您有MS过滤器来处理该滤镜。我的IE.CSS样式表看起来像：

.gradient {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#fff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#fff')";
}

.boxShadow {
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#666666, direction=135, strength=5);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color=#666666, direction=135, strength=5)";
box-shadow: 5px 5px 5px #666
}

请注意，即使使用这些，也有后备规则，即处理IE6，IE7和IE8+。但这很小，可以确保更好的显示。

除此之外，我建议您阅读 http://24ways.org/2009/ignorance-is-bliss

Modernizr是一个很好的自由，但请考虑一下您真的需要它。您可能会使用推土机而不是勺子结束。