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

Question

在这篇博客文章中,我发现了以下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课程,但我从未-webkit-...在CSS中看过连字符.在这种情况下,它们似乎是指主浏览器的布局引擎,但它们通常意味着什么？

谷歌搜索时,所有结果都以浏览器中的文本连字为目标: - /

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规范中找到:

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

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

和:

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

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