Question

我最近建了一个网站，并决定用CSS3创建按下按钮的按钮，非常酷。

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

客户问我这个问题，而我所能想到的只是较少的http请求，所以加载会稍快一些。我可以从客户的角度看，这是一个很好的一周回答。

有更好的理由吗？

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

写这篇文章让我想知道现代化能否应对挑战......

Answer 1

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

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

对于非科技人士，你不应该说“我会用CSS3制作你的网站，一些新的HTML5元素，以及漂亮的javascript眼睛效果”。只要说“我可以为你打造一个好网站。”

如果他质疑你使用的是什么，或者为什么你认为这是最好的方法，那么你回答的是好处。

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

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是一个很好的lib，但想想你是否真的需要它。你最终可能会使用推土机而不是勺子。

我为什么要使用CSS3按钮？

1 个答案: