5

在这篇博文中，我发现了以下 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-...。在这种情况下，它们似乎是指主要浏览器的布局引擎，但它们通常是什么意思？

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

4

6 回答 6

9

它们是供应商特定的 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-
于 2013-01-17T16:14:14.300 回答
7

答案可以在CSS 规范中找到：

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

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

和：

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

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

于 2013-01-17T16:23:03.827 回答
4

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

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

编辑： OP 澄清 - 他不想知道前导连字符表示什么...... 请参阅 Mathieu 的回答，它几乎涵盖了它。

于 2013-01-17T16:15:17.683 回答
0

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

于 2013-01-17T16:14:06.677 回答
0

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

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

于 2013-01-17T16:14:20.320 回答
0

这些就是所谓的“供应商前缀”。通向浏览器名称的连字符仅针对这些浏览器。这用于实验性 CSS 属性。

于 2013-01-17T16:14:51.317 回答