Question

在this blog post上，我找到了以下CSS代码段：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

虽然我参加了一些基本的CSS课程，但我之前从未在CSS中的-webkit-...中看过连字符。在这种情况下，它们似乎是指主浏览器的布局引擎，但它们通常意味着什么？

在Google上搜索时，所有结果都会在浏览器中定位文字连字符： - /

Answer 1

它们是供应商特定的CSS属性。

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover; /* WEBKIT - Chrome, Safari */
  -moz-background-size: cover; /* MOZILLA - Firefox */
  -o-background-size: cover; /* OPERA */
  background-size: cover;
}

Hypens用于引入供应商特定的 CSS属性，这些属性由浏览器使用但尚未被识别为CSS的标准。

CSS中经常使用的前缀是：

Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

Answer 2

答案可以在CSS specifications：

中找到

以 - '或'_'开头的关键字和属性名称保留用于特定于供应商的扩展。此类特定于供应商的扩展应具有以下格式之一：

' - '+供应商标识符+' - '+有意义的名称
  '_'+供应商标识符+' - '+有意义的名称

和

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

总而言之，具有初始破折号的属性名称不被视为有效，因此可以由供应商特定的CSS规则使用它们。

Answer 3

使用连字符代替空格来分解连接单词。其他语言使用CamelCase / snake case / et al ..为此。

注意：这是不特定或仅限于浏览器前缀......

编辑：OP澄清 - 他不想知道领先的连字符表示什么...... See Mathieu's answer它几乎涵盖了它。

Answer 4

破折号表示它特定于特定浏览器并被视为非标准扩展名。

Answer 5

- 前缀表示它不是官方CSS规范的一部分，而是供应商特定的标记。通常会让人们开始使用最终在CSS规范中的功能，但还没有准备好。你应该避免依赖它们来做任何重要事情。

所以-moz-例如意味着它特定于基于Gecko的浏览器（如Mozilla Firefox）

Answer 6

这些被称为“供应商前缀”。导致浏览器名称的连字符仅针对那些浏览器。这用于实验性CSS属性。

CSS中的主要连字符意味着什么？

6 个答案: