我为什么要使用CSS3按钮？

Question

我最近建立了一个网站,并决定创建按钮,用CSS3点击,非常酷.

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

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

有更好的理由吗？

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

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

Answer 1

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

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

对于非技术人员,你不应该说"我会用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是一个很好的lib,但想想你是否真的需要它.您可能最终使用推土机而不是勺子.