Редактор Стилей позволит вам:
{{EmbedYouTube("7839qc55r7o")}}
Чтобы открыть редактор стилей выберите опцию "Редактор стилей" из меню "Разработка" (который является подменю в меню "Инструменты"). Инструменты появятся в нижней части окна браузера, с активной панелью редактора стилей:
Редактор Стилей делится на три основные части:
Начиная с Firefox 33 и далее, существует третий компонент Редактора Стилей:медиа боковая панель.
Панель стилей слева, перечисляет все таблицы стилей в текущем документе. Вы можете быстро включать и выключать стили листа нажав на против него значок глаза. Вы можете сохранить любые изменения, внесённые в таблицу стилей на локальном компьютере, нажав кнопку Сохранить в правом нижнем углу возле каждого листа в списке.
Справа находится панель редактора. Где вы можете видеть и редактировать исходный код выбранного листа стилей. Любые изменения, которые вы делаете, немедленно применяются к странице. Это позволяет легко экспериментировать, просматривать, а также изменять тестировать. После того как вы удовлетворены вашими изменениями, вы можете сохранить копию локально, нажав кнопку Сохранить в нижнем правом углу листа в панели таблица стилей.
Редактор предоставляет номера строк и подсветку синтаксиса, что обличает читать вам CSS. Он также поддерживает номер ряда keyboard shortcuts.
Редактор Стилей автоматически де-минимизирует таблицы стилей, которые он обнаруживает, не влияя на оригинал. Что делает его гораздо легче для работы на страницах, которые были оптимизированы.
Редактор Стилей поддерживает автозаполнение. Просто начните печатать, и он будет предлагать вам перечень предложений.
Вы можете включить автозаполнение в Style Editor settings.
С Firefox 33 и далее, Редактор Стилей отображает боковую панель на правой стороне, где текущий лист содержит какие-либо медиавыражения. Боковая панель содержит список правил и ссылку на строки таблицы, где правило определено. Щёлкните элемент, чтобы перейти к этому правилу в листе.Состояние текста остаётся серым, если запрос медиа в настоящее время не применяется.
Боковая панель медиа особенно хорошо работает с Responsive Design View для создания и отладки мобильных макетов:
Вы можете создать новую таблицу стилей, нажав на кнопку Создать на панели инструментов. После чего начать ввод CSS в отрывшемся редакторе и видеть, как новые стили в реальном времени применяются так же, как изменяются в других таблицах.
Вы можете загрузить таблицу стилей с диска и применить его на страницу, нажав на кнопку Импорт.
{{EmbedYouTube("zu2eZbYtEUQ")}}
Веб-разработчики часто создают CSS файлы, используя препроцессор как Sass, Less, или Stylus. Эти инструменты создания CSS файлов с более богатым и выразительным синтаксисам. Если это сделать, будучи в состоянии просматривать и редактировать созданный CSS не так полезен, потому что код, который вы поддерживать синтаксис препроцессора, а не генерирует CSS. Так вы должны были бы изменить сгенерированный CSS, затем вручную работать, как с первоисточником.
Источник карты имеет инструменты для карты вернутся из полученных CSS к первоначальному синтаксису, так что они могут отображать, и позволяют редактировать файлы в оригинальном синтаксисе. С Firefox 29 и далее, Редактор Стиль могу понять исходные карты CSS.
Это означает, что если вы используете, например, Sass, то редактор Стиль покажу вам, и вы сможете редактировать, Sass файлы, а не CSS, который генерируется из них:
Для этого, чтобы работать, вы должны:
Теперь, если вы выберете "Показать оригинальные источники" в Style Editor settings, ссылки рядом с правилом CSS в Rules view будет ссылаться к первоисточникам в редакторе стилей
Вы также можете редактировать первоисточники в редакторе стилей и видеть результаты сразу на странице. Чтобы это сделать есть два варианта.
Во-первых, настроить препроцессор так следит за оригиналом и автоматически восстанавливает CSS при изменении исходного кода. С Sass вы можете сделать это, просто передавая в этой опции:
sass index.scss:index.css --sourcemap --watch
Затем сохраните оригинал в редакторе стилей, нажав на кнопку "Сохранить" рядом с файлом, и сохранение его на исходный файл.
Теперь, когда вы вносите изменения в исходный файл в редакторе стилей CSS регенерируется, и вы можете видеть изменения сразу.
{{ Page ("ru/docs/tools/Keyboard_shortcuts", "source-editor") }}
{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}