Редактируемый, визуальный блок стилей CSS

Знаете ли вы, что тег <style>по сути своей является таким же блочным элементом? Он так же, как и другие элементы может быть отображен на странице со всем содержимым!
Более того, отображен не в виде привычного всем демо-кода, а в качестве простейшего визуального редактора фактических стилей CSS используемых на странице.

Оказывается всё очень просто, используя атрибут HTML5 contenteditableв теге <style>, добавим ему возможность редактировать фактические стили на странице. Для этого достаточно поместить <style> со всем содержимым между тегами <pre></pre>, что сохранит пробелы для удобного чтения и редактирования.
 

 
Наверняка у многих возникнет закономерный вопрос: «а где можно использовать данное решение на практике?» Самое простое и логичное, это при организации любой демо-страницы, предоставить пользователям возможность править стили, что называется не отходя от кассы, по принципу известных всем онлайн-редакторов кода. Так же очень удобно, при формировании и редактировании стилей вновь создаваемых страниц, работая непосредственно в браузере, достаточно добавить блок <pre> с рабочими стилями и вперёд, редактируйте визуально наблюдая все изменения.

Источник: Arley McBlain

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: