Question

在Safari＆amp;只使用border-radius的Webkit似乎可以在不添加前缀-webkit-的情况下工作。是否可以为border-radius留下-webkit-前缀？

Answer 1

你错过了验证的重点。您验证以避免错误！其中包括：不安全的浏览器扩展，黑客攻击，黑客攻击和实际错误。绝不应该验证您的代码是否具有跨浏览器功能。

您应该知道存在预期错误之类的内容，甚至有效代码也可以使用。像-moz-， - webkit-和-o-这样的浏览器扩展是预期的错误。所有浏览器都旨在删除未知规则。这就是CSS允许向后兼容的方式。支持CSS2的浏览器将删除CSS3 border-radius规则。有效或无效与它没有任何关系，并且决不会因为它而破坏任何浏览器（幸运的是，将CSS转换为XML的想法被压扁了，从未见过光明的一天）。 Opera将删除-moz-规则，Firefox将删除-o-规则，这不是错误。这是预期的行为：

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

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

-ms-，mso- Microsoft
-moz- Mozilla
-o - ， - xv- Opera软件
-webkit- Apple
-khtml- KDE

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

-atsc- 高级电视标准委员会
-wap- WAP论坛

浏览器实现CSS规则的草稿阶段或部分实现（即浏览器支持X，Y但不是Z）作为扩展。这样，它们可以防止规范中的任何更改破坏以前版本的浏览器。有些情况下，浏览器已经开心并将它们作为非扩展程序实现，并且通常的结果一直表示浏览器已经开始自杀，例如：“浏览器XXX版YYY执行不良[... ]”。最值得注意的是IE在这方面排名第一，但其他浏览器也有successfully managed to shoot themselves in the foot。当草稿成为标准并且浏览器完全（或充分）实现规范时，将创建一个不带-xxx-前缀的规则。

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

<小时/> 如何以及何时使用-xxx-浏览器扩展？像往常一样，最佳做法是在您使用的最先进的浏览器中仅使用符合标准的代码进行设计，然后添加所有安全扩展。扩展中使用基于w3c标准或当前工作草案的扩展。不要使用丢弃的标准/草稿或浏览器崇拜标准（即一些旧的Firefox标准）。除非它有稳定的后备，否则也要避免任何类型的修补规则。

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

如何保持形式和功能？在我看来，大多数人都不会被“ohmygosh无效”所困扰，而是他们被迫写的事实同一行的多个规则。对此的简单解决方案是使用模板系统。 CSS有很多，因为保持代码DRY的问题是持久的。

那里有many many many个不同的实现。但基本的想法是使用 mixin （即函数）来解决问题：

=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-border-radius

是否可以将border-radius用于webkit浏览器？

3 个答案: