Редактор стилів - Інструменти розробника Firefox,MDN

Редактор Стіл дозволить вам:

переглядати та редагувати всі таблиці стилів на сторінці
створити нові таблиці стилів з нуля, та застосовувати їх до сторінки
імпортувати існуючі таблиці стилів та застосовувати їх до сторінки

Редактор стилів ділиться на три основні частини:

Починаючи з Firefox 33 і далі існує третій компонент Редактора Стилів: медіа бічна панель.

Панель таблиці стилів

Панель стилів ліворуч перераховує всі таблиці стилів у поточному документі. Ви можете швидко вмикати і вимикати стилі аркуша, натиснувши на нього значок ока. Ви можете зберегти будь-які зміни , внесені в таблицю стилів на локальному комп'ютері , натиснувши кнопку Зберегти в нижньому правому куті біля кожного аркуша в списку.

Редактор стилів автоматично де - мінімізує таблиці стилів , які він виявляє , не впливаючи на оригінал. Що робить його набагато легшим для роботи на сторінках, які були оптимізовані.

Редактор Стилів підтримує автозаповнення. Просто почніть друкувати, і він пропонуватиме вам перелік пропозицій.

Ви можете увімкнути автозаповнення у Style Editor settings.

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

З Firefox 33 і далі, Редактор Стилів відображає бічну панель з правого боку , де поточний аркуш містить будь-які @media правила. Бічна панель містить список правил та посилання на рядки таблиці, де правило визначено. Клацніть елемент, щоб перейти до цього правила в аркуші. Стан тексту залишається сірим, якщо запит медіа не застосовується.

Бокова панель медіа особливо добре працює з Responsive Design View для створення та налагодження мобільних макетів :

Створення та імпортування таблиці стилів

Ви можете завантажити таблицю стилів з диска та застосувати його на сторінку , натиснувши кнопку Імпорт.

Джерело картки підтримки

Веб-розробники часто створюють CSS файли, використовуючи препроцесор як Sass, Less або Stylus. Ці інструменти створення CSS файлів з більш багатим та виразним синтаксисом. Якщо це зробити , будучи в змозі переглядати і редагувати створений CSS не так корисний, тому що код, який ви підтримувати синтаксис препроцесора , а не генерує CSS . Так ви повинні були б змінити згенерований CSS, потім вручну працювати, як з першоджерелом .

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

Для цього, щоб працювати, ви повинні:

використовувати CSS препроцесора, який розуміє Source Map Revision 3 proposal. В даний час це означає Sass 3.3.0 або вище, або 1.5.0 version of Less. . Інші препроцесори активно працюємо над додаванням підтримки чи його розгляду.
насправді доручити препроцесор для генерації вихідного карту , наприклад, пропусканням --sourcemap аргумент Sass інструмент командного рядка.

Перегляд першоджерел

Редагування першоджерел

По-перше, налаштувати препроцесор так слідкує за оригіналом і автоматично відновлює CSS при зміні вихідного коду. З Sass ви можете зробити це, просто передаючи в цій опції: