CSS中的前导连字符是啥意思？ [关闭]

Posted 2023-02-18

【中文标题】CSS中的前导连字符是啥意思？ [关闭]

【英文标题】：What do leading hyphens mean in CSS? [closed]CSS中的前导连字符是什么意思？ [关闭]

【发布时间】：2013-01-01 05:49:10

【问题描述】：

在this blog post我发现了以下CSS sn-p：

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-... 中的连字符。在这种情况下，它们似乎是指主要浏览器的布局引擎，但它们一般是什么意思？

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

【问题讨论】：

也可以查看***.com/questions/16291483/…

也相关：***.com/questions/8131846/…

【参考方案1】：

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

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

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

【讨论】：

我看到这适用于border-width。但是-webkit- 或-o- 呢？那些连字符呢？

关于连字符的问题通常不是前导连字符（明确地）。如果你问我，这些是语法糖。但我相信有人会对为什么浏览器前缀以连字符开头有更好的答案

Hypens 适合真正的编码人员，因为不涉及 shift 键。每个人都知道，真正的程序员是世上最懒惰的人。连字符将工作量减少了 50%！

哇-他们-真的-真的-做！-谢谢-空指针！

@rlemon：顺便说一句，我会编辑问题标题。

【参考方案2】：

答案在CSS specifications：

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

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

和：

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

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

【参考方案3】：

它们是供应商特定的 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-

【讨论】：

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

@pythonforspss.org 是的，它们是多余的，但你必须以不同的眼光看待它们。当浏览器读取 CSS 并找到它无法识别的属性时，只需忽略它，但会使用它支持的属性。例如，如果我使用您的示例并在 Firefox 中加载 CSS，则前缀 -webkit- 和 -o- 将无法识别，但 -moz 是并且将被使用。如果我指定这些前缀版本，不支持 standard 版本的浏览器可以回退到它自己的自定义版本。

有点奇怪，最不兼容的浏览器，IE是这个例子中唯一缺少的！

并非其他浏览器支持的所有属性都被 IE 支持（它使用过滤器代替），那么找到 IE 的缺失属性而不是其他浏览器的属性并不难。

【参考方案4】：

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

【参考方案5】：

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

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

【参考方案6】：

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