在webkit浏览器中只使用border-radius行吗？

Question

在Safari & Webkit中，似乎不需要添加前缀-webkit就可以只使用border-radius。是否可以将-webkit- prefix保留为border-radius？

Answer 1

你错过了验证的要点。你验证以避免错误！这些包括:不安全的浏览器扩展，黑客攻击，ie-hack和实际错误。你绝对不应该通过验证来降低你的代码的跨浏览器功能。

你应该意识到有像预期错误这样的东西，即使是有效的代码也可以处理这些错误。浏览器扩展名-moz-、-webkit-和-o-都是预期错误。所有浏览器都设计为删除未知规则。这就是CSS允许向后兼容的方式。支持CSS2的浏览器将丢弃CSS3边框半径规则。有效或无效与此无关，任何浏览器都不会因为它而崩溃(对我们来说幸运的是，将CSS转换为XML的想法被粉碎了，从来没有出现过)。Opera将丢弃moz- rules，Firefox将丢弃-o- rules，这不是一个错误。这是预期行为：

保证任何当前或将来级别的CSS都不会在属性或关键字中使用初始短划线或下划线。因此，典型的CSS实现可能无法识别这样的属性，并且可以根据用于处理解析错误的规则来忽略它们。但是，因为初始短划线或下划线是语法的一部分，所以CSS 2.1实现者应该始终能够使用符合CSS的解析器，无论它们是否支持任何特定于供应商的扩展。

w3c甚至定义了how to write these "Vendor-specific extensions"。以下是当前众所周知的扩展：

Opera Opera-ms-，mso- Microsoft

• -moz- Mozilla

• -o-，-xv- Opera Software

• -webkit- Apple

• -khtml- KDE

还有一些你可能从未听说过的：

Committee

• -wap-

高级电视标准

浏览器实现草稿阶段或部分实现(即，浏览器支持CSS规则的X，Y，但不支持Z)作为扩展。这样，它们可以防止规范中的任何更改破坏以前版本的浏览器。有些情况下，浏览器很高兴，并将它们实现为非扩展，通常的结果总是说浏览器搬起石头砸自己的脚，比如：“浏览器XXX版本YYY有糟糕的实现...”。最值得注意的是IE站在这一点上的第一名，但其他浏览器也有successfully managed to shoot themselves in the foot。当草图成为标准且浏览器完全(或充分)执行等级库时，将创建不带-xxx-前缀的规则。

近年来，所有主流浏览器都将其作为事实上的标准。

​

如何以及何时使用-xxx浏览器扩展？和往常一样，最佳实践是在您拥有的最高级浏览器中仅使用符合标准的代码进行设计，然后添加所有安全扩展。在扩展中，使用基于w3c标准或当前工作草案的扩展。不要使用丢弃的标准/草案或浏览器想要的标准(例如，一些老式的Firefox )。也要避免任何形式的修补规则，除非它有一个稳定的后备。

​

在the border-radius rule的情况下，您有一个稳定的后备。

如何同时保持形式和函数？在我看来，大多数人并不担心“哦，天哪，它是无效的”，而是他们被迫为同一行编写多个规则的事实。一个简单的解决方案是使用模板系统。有相当多的CSS，因为保持代码干燥的问题是一个持久的问题。

are many many many不同的实现。虽然基本的想法是解决问题使用混合(即。函数)：

=border-radius(!radius)
  -moz-border-radius= !radius;
  -webkit-border-radius= !radius;
  -khtml-border-radius= !radius;
  border-radius= !radius;

我们现在可以在任何地方编写以下代码：

.stuff
  +border-radius(15px);

这段代码比仅仅编写border-radius: 15px并希望得到最好的结果要灵活得多。它也是可维护的(什么元素的边界半径不应该超过10px？没问题)。

Answer 2

这样做可能会遇到css验证错误。-前缀属性被视为可选扩展，因此产生问题的可能性较小。

我建议你保留-webkit以防万一，一些浏览器(IE)在HTML/CSS不能验证的情况下表现不佳。这就是所谓的怪癖模式。

Answer 3

border-radius支持safari 5和更高版本。-webkit-border-radius支持safari 3及更高版本。因此，如果您希望支持safari 3+，则必须使用-webkit-3+-radius