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

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

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

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

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

Идея: Arley McBlain

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

Буду признателен, если поделитесь ссылкой на запись с друзьями в своих соц. сетях

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru