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课程，但我以前从未在CSS中见过类似 -webkit-... 的连字符。在这种情况下，它们似乎是指主要浏览器的布局引擎，但一般来说它们有什么含义呢？

当我谷歌这个问题时，所有的结果都与浏览器中的文本连字符有关 :-/

- RubenGeert

---

请见https://dev59.com/B3HYa4cB1Zd3GeqPMo7Q - TylerH

还有相关内容：https://dev59.com/aGsz5IYBdhLWcg3wDz0A - TylerH

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;
}

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

CSS中经常使用的前缀包括:

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

- Ragnarokkr

---

@Ragnaokkr：谢谢！但在这个例子中它们完全是多余的，对吧？它们通常会覆盖非供应商特定属性（比如最后的 background-size: cover;）吗？ - RubenGeert

@pythonforspss.org 是的，它们是冗余的，但你必须用不同的眼光看待它们。当浏览器读取CSS并发现一个它不认识的属性时，会简单地忽略它，但会使用它支持的属性。例如，如果我使用你的例子并在Firefox中加载CSS，前缀为“-webkit-”和“-o-”将不被识别，但“-moz”会被识别并被使用。如果我指定这些前缀版本，不支持标准版本的浏览器可以回退到自己的自定义版本。 - Ragnarokkr

有点奇怪的是，最不兼容的浏览器IE在这个例子中竟然缺失了！ - RubenGeert

并非所有其他浏览器支持的属性都被 IE 支持（它使用滤镜代替），因此找出 IE 缺失但其他浏览器不缺失的属性并不那么困难。 - Ragnarokkr

Answer 2

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

以下是摘自规范的内容： 以破折号（-）或下划线（_）开头的关键字和属性名是保留给供应商特定扩展使用的。这些供应商特定的扩展应使用以下格式之一： '-' + 供应商标识符 + '-' + 有意义的名称 '_' + 供应商标识符 + '-' + 有意义的名称

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

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

- Tchoupi

Answer 3

连字符用来代替空格以分开连接词。其他语言使用驼峰命名法/蛇形命名法等方法。

注意：这不仅适用于浏览器前缀...

编辑：楼主澄清-他想知道前导连字符表示什么... 请参见Mathieu的答案，它几乎涵盖了所有内容。

- rlemon

---

我看到这适用于像 border-width 这样的东西。但 -webkit- 或 -o- 呢？那些连字符呢？ - RubenGeert

这个问题是关于连字符一般情况下不带前导连字符的（明确地）。如果你问我，那些只是语法糖。但我相信有人会有更好的答案来解释为什么浏览器前缀要以连字符开头。 - rlemon

连字符是真正的程序员使用的，因为不涉及到Shift键。而且每个人都知道真正的程序员是最懒的人。连字符可以减少工作量50%! - NullPoiиteя

哇，他们真的真的做到了！谢谢空指针！ - rlemon

@rlemon：顺便提一下，你发现得真好，我会编辑问题标题的。 - RubenGeert

哎呀，糟糕了 - 这刚刚让我的答案无效了 :( 嘿嘿。 - rlemon

Answer 4

破折号意味着它是特定于某个浏览器的，并被认为是非标准扩展。

- Lee Meador

Answer 5

前缀 - 表示它不是正式的CSS规范的一部分，而是供应商特定的标签。通常它存在是为了让人们开始尝试那些最终会在CSS规范中出现但目前还没有准备好的功能。您应该避免依赖它们做任何重要的事情。

例如，-moz- 表示它是特定于基于Gecko的浏览器（如Mozilla Firefox）

- PhonicUK

Answer 6

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

- chipcullen