跨浏览器css规则:Mozilla,chrome,safari和css2 vs css3

时间:2012-01-17 18:53:12

标签: css3 cross-browser css

到目前为止,我已经忽略了两个问题,但我真的很感激他们的一些亮点。

首先:如何解决Safari,Chrome和Firefox之间的差异以及其引擎呈现的各种标记?我应该在同一个css规则中为每个人写下正确的属性吗?有没有更好的办法?

有没有办法将这些浏览器的CSS工作表分开,就像我在为IE做的那样?这是推荐的吗?

第二名: CSS3属性怎么样?我应该在CSS2属性之后在同一规则中再次编写它们吗?

这会导致CSSWC3验证问题吗?

2 个答案:

答案 0 :(得分:0)

欢迎:)

如果你从没有前缀开始,你应该首先用所有语义上合适的标签编写代码。

然后,您可以决定目标是什么。

如果您需要符合W3C标准的CSS文件,则默认情况下您需要删除特定于供应商的前缀。这将允许最新的浏览器在他们支持标准化CSS属性的情况下获取它们。

这将瞄准您的市场较少的目标,因此您应该询问渐进式增强是否可能。如果你可以通过在页面加载后使用css来合理地增强视觉效果,例如使用jQuery,MooTools或Prototype库来应用样式并且这些库已经在你的网站中用于某个目的,那么你可以在这些库中应用其他样式(并且可能与Modernizr一起使用它们来确定您可能想要额外支持哪些元素。

然而,浏览器很可能会跳过它不理解的属性并将呈现它所执行的属性,因此我建议您首先将其编码为W3C Standards,然后添加您的其他供应商前缀在“最终(正确)”之前,您可能已经满足合理的措施以符合要求并满足设计需求。

修改 验证结果之间存在一些混淆:

http://validator.w3.org/

并编写与供应商前缀相关的有效代码以跨浏览器获取CSS效果:

List of CSS vendor prefixes?

对于某些跨浏览器的CSS,您可能会发现http://csspie.com,因为IE与某些CSS3属性兼容,对于跨浏览器渐变而言http://www.colorzilla.com/gradient-editor/和对于代码http://cssplease.com都很有用它为您提供了替代供应商前缀,包括针对许多不同属性的不同版本的IE支持。

验证而言,以下是W3C对此所说的内容:(请参阅此处的评论: W3 VALID cross browser css gradient,)和官方文档:http://www.w3.org/TR/css3-syntax/#vendor-specific

如果您首先根据规范进行编码并针对该代码测试您的代码,然后添加您的供应商前缀以在您想要支持的浏览器上获得相同的效果(请参阅渐进增强:What is Progressive Enhancement?)然后您可以更自信您的代码支持适当的标准,为那些拥有更高级浏览器的人增加价值,对那些没有其他功能的人也很有用(如果你想写一个更具包容性的网站,还可以参见WAI III合规性,508合规性和其他标准)

警告:网络应用可能并非始终具有包容性,也不会遵循这些指南,具体取决于受众群体。

答案 1 :(得分:0)

如果您在网站上使用jquery,则可能需要查看PrefixFree。这是一个为您添加供应商前缀的脚本,例如您在yor css中放置border-radius:6px;并且它会读取浏览器并通过js为您添加适当的供应商前缀。我喜欢它,因为它使我的css文档更具可读性。