Search code examples
cssfirefoxbrowserfirefox-developer-toolscode-inspection

Auto convert CSS "longhand" into "shorthand" in Firefox Developer Tools

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.

Screenshot from "Firefox Developer Tools"

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

Solution

  • 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.