Автоматическое преобразование CSS "longhand" в "shorthand" в инструментах разработчика Firefox

Question

В Firebug CSS автоматически конвертируется из сокращенных в сокращенные.

Пример:

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

}

будет преобразован Firebug в:

div {
    padding: 10px 0;
}

Однако теперь, когда я использую Firefox Developer Tools, нет автоматического преобразования сокращений CSS.

Можно ли получить новые инструменты разработчика Firefox для автоматического преобразования рукописного CSS в сокращенный CSS (например, как это делает Firebug)?

Answer 1

Это невозможно в Firefox DevTools. По замыслу DevTools отображают объявления свойств по мере их ввода. Одна из причин этого заключается в том, что они указывают, какие объявления были изменены пользователем (через маленькую зеленую линию в левой части объявления).

Firebug, с другой стороны, выводит то, что возвращает CSSRule.cssText API , который выводит сериализацию правила CSS и превращает длинные строки в короткие, где это возможно. Таким образом, Firebug делал противоположное Firefox DevTools и всегда отображал укороченную версию правила CSS, которая была применима, и не было никакого способа показать им, как они были созданы.

Итак, если вы хотите получить краткую версию ваших правил CSS, вам нужно вызвать его cssText getter через JavaScript.

Answer 2

Нет, это невозможно. Инструменты разработчика Firefox отображают свойства в точности так, как они объявлены в каждом правиле в таблице стилей; в этом смысле он не отображает свойства per se , он отображает объявлений .

Если у правила есть сокращенное объявление padding, инспектор отражает это сокращение (и позволяет вам расширить это сокращение в его длинные строки, чтобы вы могли манипулировать ими по отдельности). Если в правиле есть два из четырех длинных объявлений для padding, инспектор отражает только эти две длинные руки.

Это сделано по замыслу и предотвращает путаницу, которую создает автоматическое переписывание длинных рук в короткие для краткости (а именно, тот факт, что padding-top: 10px; padding-bottom: 10px является , а не эквивалентен padding: 10px 0).