在 Firefox 开发者工具中自动将 CSS “简写”转换为“简写”

Posted 2023-03-06

【中文标题】在 Firefox 开发者工具中自动将 CSS “简写”转换为“简写”

【英文标题】：Auto convert CSS "longhand" into "shorthand" in Firefox Developer Tools

【发布时间】：2018-10-13 12:44:21

【问题描述】：

在 Firebug 中，CSS 会自动从简写转换为简写。

例子：

div 
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;

然后会被 Firebug 转换成：

div 
    padding: 10px 0;

但是，现在当我使用 Firefox 开发者工具时，没有自动 CSS 速记转换。

是否有可能让新的 Firefox 开发者工具自动将普通 CSS 转换为速记 CSS（就像 Firebug 一样）？

【问题讨论】：

2 和 3 对于 Stack Overflow 来说过于宽泛和主观。 Firebug 无论如何都是 EOL，所以如果你想坚持下去，那么你将不会得到任何更新。 3 的唯一答案是最适合您的。都试一试。或者......如果你真的喜欢它，就坚持使用 Firebug。

这两个代码块不等效。

我更新了示例代码，希望每个人都能理解我的要求。我可以尝试所有不同的开发工具 - 看看哪个最适合我（！）......但我真正想要的是一个原因列表（客观）为什么“x codeinspector”比“y codeinspector”更好”。没有理由重新发明***

但“更好”是主观的。您可能更喜欢 Firebug 将简写压缩为简写的方式，但其他人可能更喜欢几乎每个浏览器的内置工具所采用的所见即所得方法。

法拉利在速度方面比运输车好。在装载能力方面，运输车优于法拉利。由于“Z”，“X”优于“Y”。我确定 *** 上的某个人有我正在寻找的答案。

【参考方案1】：

这在 Firefox DevTools 中是不可能的。 DevTools 按照设计在输入属性声明时显示它们。这样做的一个原因是因为它们指示了用户更改了哪些声明（通过声明左侧的绿色小线）。

另一方面，Firebug 输出 Cs-s-rule.cssText API 返回的内容，它输出 CSS 规则的序列化，并在可能的情况下将简写转换为简写。因此，Firebug 与 Firefox 开发工具相反，总是显示 CSS 规则的缩短版本是适用的，并且无法显示它们的创作方式。

因此，如果您想获得 CSS 规则的简短版本，您需要通过 javascript 调用其 cssText getter。

【参考方案2】：

不，这是不可能的。 Firefox 开发者工具完全按照样式表中每个规则中声明的方式显示属性；从这个意义上说，它不显示属性本身，它显示声明。

如果规则有一个padding 速记声明，检查器会反映该速记（并允许您将该速记扩展为它的速记，以便您可以单独操作它们）。如果规则有 padding 的四个速记声明中的两个，则检查器仅反映这两个速记。

这是设计使然，可防止为简洁起见而自动将速记重写为速记造成的那种混淆（即，padding-top: 10px; padding-bottom: 10px不等同于padding: 10px 0） .

【讨论】：

感谢有关声明的解释（！）我更新了代码示例。我想要自动转换为速记，因为我经常使用它，所以我错过了萤火虫功能。 - 你使用什么代码检查器，你为什么选择它？

@guruguldmand：我只是为每个浏览器使用内置的。

请注意，Firebug 实际上只显示了它通过内部 Firefox API document.styleSheets[x].cssRules[y].style.cssText 检索到的内容。此 API 在可能的情况下返回 serialized version of the CSS rule with longhands merged into shorthands。因此 Firebug 没有产生不等价的输出。这意味着，只有在指定了所有四个 padding-* 速记时，它们才会被重写为速记。例如，请参阅jsfiddle.net/6787L25t。因此，您应该删除括号中的注释。