Auto convert CSS “longhand” into “shorthand” in Firefox Developer Tools

Question

In Firebug, CSS would automatically be converted from longhand into shorthand.

Example:

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

}

would then be converted by Firebug into:

div {
    padding: 10px 0;
}

However, now when I use Firefox Developer Tools, there is no auto CSS shorthand conversion.

Is it possible to get the new Firefox Developer Tools to automatically convert longhand CSS into shorthand CSS (like how Firebug does)?

Answer 1

No, it's not possible. Firefox Developer Tools displays properties exactly as they are declared in each rule in the stylesheet; in that sense, it doesn't display properties per se , it displays declarations .

If the rule has a padding shorthand declaration, the inspector reflects that shorthand (and allows you to expand that shorthand into its longhands so you can manipulate them individually). If the rule has two of four longhand declarations for padding , the inspector reflects just those two longhands.

This is by design, and prevents the sort of confusion that automatically rewriting longhands into shorthands for the sake of brevity creates (namely, the fact that padding-top: 10px; padding-bottom: 10px is not equivalent to padding: 10px 0 ).

Answer 2

This is not possible in the Firefox DevTools. It's by design that the DevTools display the property declarations as they were entered. One reason for that is because they indicate which declarations were changed by the user (via a small green line at the left side of the declaration).

Firebug, on the other hand, output what's returned by the CSSRule.cssText API , which outputs a serialization of the CSS rule and turns longhands into shorthands where possible. So, Firebug did the opposite of the Firefox DevTools and always displayed the shortened version of a CSS rule were applicable and there was no way to show them the way they were authored.

So, if you want to get a short version of your CSS rules, you need to call its cssText getter via JavaScript.