在Firefox开发者工具中自动将CSS“longhand”转换为“速记”

Question

在Firebug中，CSS会自动从longhand转换为速记。

示例：

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

}

然后由Firebug转换为：

div {
    padding: 10px 0;
}

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

是否有可能让新的Firefox开发者工具自动将简写CSS转换为速记CSS（如Firebug的做法）？

Answer 1

不，这是不可能的。 Firefox Developer Tools显示的属性与样式表中每个规则中声明的属性完全相同;从这个意义上讲，它不会显示属性本身，它会显示声明。

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

这是设计上的，并且为了简洁起见而防止出现自动重写longhands到shorthands的混淆（即，padding-top: 10px; padding-bottom: 10px 等同于{{ 1}}）。

Answer 2

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

另一方面，

Firebug输出{{​​3}}返回的内容，它输出CSS规则的序列化并尽可能将longhands转换为shorthands。因此，Firebug与Firefox DevTools相反，并且始终显示缩小版的CSS规则是适用的，并且没有办法向他们展示他们的创作方式。

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