3

我最近建立了一个网站，并决定使用 CSS3 创建抑制点击的按钮，非常酷。

但是真的有充分的理由在精灵上使用 CSS3，因为只有现代浏览器才会显示 CSS3 按钮？

客户问我这个问题，我能想到的只是http请求少了，所以加载会稍微快一点。从客户的角度来看，我可以看到这是一个漂亮的一周答案。

有更好的理由吗？

或者是否有一种后备方法可以移动精灵背景位置，或者更改渐变并在悬停/焦点上添加框阴影？

只是写这让我想知道现代化者是否能够应对挑战......

4

1 回答 1

5

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

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

对于非技术人员，您不应该说“我将使用 CSS3、一些新的 HTML5 元素和漂亮的 javascript 视觉效果来制作您的网站”。只需说“我可以为您制作一个好网站”。

如果他质疑您正在使用什么或为什么您认为这是最好的方法，那么您会用好处来回答。

它是轻量级的，带来的兼容性问题更少，并且更易于维护。=> 减少他/她的客户等待网站加载的时间，每个人都可以看到它，并且在未来的需求中将花费更少。

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

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

渐变是新的。FF 3.5+、IE9 beta、Opera 和 webkit 浏览器显示它们。IE8 或更高版本没有。盒子阴影的一些东西。

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

当我开发时，我将主样式表的链接放在页面的标题上，然后我使用 IE 条件注释来加载仅 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 是一个很好的库，但如果你真的需要它，请考虑一下。您可能最终会使用推土机而不是勺子。

于 2010-10-10T15:27:42.273 回答