Style Editor

Редактор Стилей позволит вам:

• просматривать и редактировать все таблицы стилей, находящиеся на странице
• создать новые таблицы стилей с нуля, и применять их к странице
• импортировать существующие таблицы стилей и применять их к странице

Чтобы открыть редактор стилей выберите опцию "Редактор стилей" из меню "Разработка" (который является подменю в меню "Инструменты"). Инструменты появятся в нижней части окна браузера, с активной панелью редактора стилей:

Редактор Стилей делится на две основные половины: таблицы стилей - панель слева, и редактор - справа.

Панель таблицы стилей

Панель стилей слева, перечисляет все таблицы стилей в текущем документе. Вы можете быстро включать и выключать стили листа нажав на против него значок глаза. Вы можете сохранить любые изменения, внесенные в таблицу стилей на локальном компьютере, нажав кнопку Сохранить в правом нижнем углу возли каждого листа в списке.

Панель редактора

Справа находится панель редактора. Где вы можите видеть и редактировать исходный код выбранного листа стилей. Любые изменения, которые вы делаете, немедленно применяются к странице. Это позволяет легко экспериментировать, просматривать, а также изменять тестировать. После того как Вы удовлетворены вашими изменениями, Вы можете сохранить копию локально, нажав кнопку Сохранить в нижнем правом углу листа в панели таблица стилей.

Редактор предоставляет номера строк и подсветку синтаксиса, что облечает читать вам CSS. Он также поддерживает ряд сочетания клавиш.

Редактор Стилей автоматически де-минимизирует таблицы стилей, которые он обнаруживает, не влияя на оригинал. Что делает его гораздо легче для работаты на страницах, которые были оптимизированы.

Редактор Стилей поддерживает автозаполнение. Просто начните печатать, и он будет предлагать вам перечень предложений.

Вы можете включить автозаполнение в настройках Редактора Стилей

Боковая панель @media

С Firefox 33 и далее, Редактор Стилей отображает боковую панель на правой стороне, где текущий лист содержит какие-либо @media правлила. Боковая панель содержит список правил и ссылку на строки таблицы, где правило определено. Щелкните элемент, чтобы перейти к этому правилу в листе.Состояние текста остаётся серым, если запрос @media в настоящее время не применяется.

Боковая панель @media особенно хорошо работает с высокой скоростью отклика конструктора для создания и отладки мобильных макетов:

Создание и импортирование таблицы стилей

Вы можете создать новую таблицу стилей, нажав на кнопку Создать на панели инструментов. После чего начать ввод CSS в отрывшемся редакторе и видеть, как новые стили в реальном времени применяются так же, как изменяются в других таблицах.

Вы можете загрузить таблицу стилей с диска и применить его на страницу, нажав на кнопку Импорт.

Источник карты поддержки

Веб-разработчики часто создают CSS файлы, используя препроцессор как Sass, Less, или Stylus. Эти инструменты создания CSS файлов с более богатым и выразительным синтаксисам. Если это сделать, будучи в состоянии просматривать и редактировать созданный CSS не так полезен, потому что код, который вы поддерживать синтаксис препроцессора, а не генерирует CSS. Так вы должны были бы изменить сгенерированный CSS, затем вручную работать, как с первоисточником.

Источник карты имеет инструменты для карты вернутся из полученных CSS к первоначальному синтаксису, так что они могут отображать, и позволяют редактировать файлы в оригинальном синтаксисе. С Firefox 29 и далее, Редактор Стиль могу понять исходные карты CSS.

Это означает, что если вы используете, например, Sass, то редактор Стиль покажу вам, и вы сможете редактировать, Sass файлы, а не CSS, который генерируется из них:

Для этого, чтобы работать, вы должны:

• использовать CSS препроцессора, который понимает Источник Карта Редакция 3 предложение. В настоящее время это означает, Sass 3.3.0 или выше, или 1.5.0 версию Меньше. Другие препроцессоры активно работаем над добавлением поддержки или его рассмотрения.
• на самом деле поручить препроцессор для генерации исходного карту, например, пропусканием --sourcemap аргумент Sass инструмента командной строки.

Просмотр первоисточников

Теперь, если вы выберете "Показать оригинальные источники" в настройках редактора стилей, ссылки рядом с правилом CSS в правилах просмотра будет ссылаться к первоисточникам в редакторе стилей

Редактирование первоисточников

Вы также можете редактировать первоисточники в редакторе стилей и видеть результаты сразу на странице. Чтобы это сделать есть два варианта.

Во-первых, настроить препроцессор так следит за оригиналом и автоматически восстанавливает CSS при изменении исходного кода. С Sass вы можете сделать это, просто передавая  в этой опции:

sass index.scss:index.css --sourcemap --watch

Затем сохраните оригинал в редакторе стилей, нажав на кнопку "Сохранить" рядом с файлом, и сохранение его на исходный файл.

Теперь, когда вы вносите изменения в исходный файл в редакторе стилей CSS регенерируется, и вы можете видеть изменения сразу.

Сочетания клавиш

Редактор исходного сочетания

This table lists the default shortcuts for the source editor.

In the Editor Preferences section of the developer tools settings, you can choose to use Vim, Emacs, or Sublime Text key bindings instead.

To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.

From Firefox 33 onwards, the key binding preference is exposed in the Editor Preferences section of the developer tools settings, and you can set it there instead of about:config.