CSS3新功能......重点是什么?

时间:2011-01-08 12:43:07

标签: css css3 cross-browser

我最近已经阅读了很多方法,当你可以使用CSS3 Box Shadow来实现这些功能时,如何避免使用Photoshop来处理按钮上的渐变和阴影。现在这很好,但显然遗留的浏览器和大多数IE浏览器还没有实现CSS3功能,所以我的问题是,为什么在使用CSS3时可以在Photoshop中节省额外的工作但是后来有必要使用Photoshop在其他浏览器中查看想要的效果?这不仅仅是额外的工作吗?

5 个答案:

答案 0 :(得分:8)

  

你可以使用CSS3,但之后有必要使用Photoshop在其他浏览器上查看所需的效果吗?

通常,您并不关心其他浏览器是否看到了所需的效果。如果它只是一个微妙的背景渐变效果,该网站将在下层浏览器中以平坦的背景运行正常并且看起来仍然合理。

当CSS 2定位处于此阶段时,兼容性更成问题:不支持的定位功能可能导致布局无法使用。但对于背景,边框和阴影等基本上无聊的效果,如果效果丢失则并不重要。

答案 1 :(得分:2)

有几个原因。从开发人员/设计人员的角度来看,使用CSS3可以更灵活。图像或多或少只是静态图像。使用CSS,您可以使用脚本或CSS来设置动画或调整样式,并在各种技术之间进行高级集成。这使您能够使用图像做一些不可能或困难的事情。

通常在使用CSS时页面权重也较低,这使得页面加载速度更快,尤其是在慢速连接或移动设备上。它还减少了HTTP请求(尽管您也可以使用数据uris),这可以减少延迟,从而加快页面加载速度。

使用CSS通常更易于维护和更快,因为您可以通过更改CSS来快速调整背景颜色或阴影,而使用图像则必须打开photoshop,编辑文件,重新保存等等。这是非常适合快速调整。

还有一些人(包括我自己)在代码上比使用图形包更舒服。对我来说,使用CSS更容易,但你的milage可能会有所不同。

同样从浏览器的角度来看,我们希望向前移动Web平台并增加功能。 SVG是另一种技术的例子,它不适用于所有浏览器版本,但增加了很多功能。虽然现在可能无法使用某些CSS3属性或SVG部署站点而没有回退(取决于您的受众或客户端),但是旧版浏览器已经死亡以及我们今天添加的内容适用于所有用户。曾经有一段时间大多数CSS2.1都不受支持,而现在如果你不需要为IE6设计,你可以完全依赖它。

如果您的客户端不需要所有浏览器看起来相同,那么您可以愉快地使用CSS3的某些部分而不会出现回退。 border-radius是一个示例,或者为旧浏览器提供纯色回退并为新浏览器应用透明度。

答案 2 :(得分:1)

世界在向前发展,你不能忽视它。只要旧浏览器显示一个按钮,新浏览器将显示更好的浏览器,你就可以了。

否则,我们仍然在研究VT100 ......如果大多数显示器不支持超过4种彩色图形并具有80X22分辨率,那么为什么要使用“Windows”....

答案 3 :(得分:0)

如果你的老板接受了两种版本的外观和警告的想法。 CSS3是个好主意。

因此,您在代码中使用CSS3功能而忘记了不兼容的浏览器 - 他们会看到“低图形版本”,您可能希望发出非侵入式警告(就像我们得到的那样)作为StackOverflow中的警报,说,"Your browser is not compatible with CSS3. To see this website in high graphics please upgrade your browser. Click the link here to update now."

但是,取决于你的工作地点。拥有大量资源的大公司可能喜欢坚持使用Photoshop和更小的公司可能会喜欢轻量级CSS3代码,这些代码会在非兼容浏览器中无声地降级。

答案 4 :(得分:0)

您可以随时使用ChromeFrame,在IE上施加良好的行为。假设很多产品将在不久的将来坚持它(是的,我们可以反驳这一点),很可能大多数IE用户甚至会在你的应用程序坚持之前使用chromeFrame。一旦你做出决定,使用CSS3属性或HTML5元素的决定是 - 好吧 - 地狱是啊!

  • 马文