Редагований, візуальний блок стилів CSS

38

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

Чи знаєте ви, що тег по суті своїй є блоковим елементом? Він так само, як і інші елементи може бути відображений на сторінці зі всім вмістом! Більш того, не відображено у вигляді звичного всім демо-коду, а в якості простого візуального редактора фактичних стилів CSS використовуються на сторінці.
Виявляється все дуже просто, використовуючи атрибут HTML5 contenteditableв тезі , додамо йому можливість редагувати фактичні стилі на сторінці. Для цього досить помістити зі всім вмістом між тегами


, що збереже пробіли для зручного читання і редагування.

Напевно у багатьох виникне закономірне питання: «а де можна використовувати дане рішення на практиці?» Саме просте і логічне, це при організації будь-демо-сторінки, надати користувачам можливість правити стилі, що називається, не відходячи від каси, за принципом відомих всім онлайн-редакторів коду. Так само дуже зручно, при формуванні та редагування стилів знову створюваних сторінок, працюючи безпосередньо в браузері, досить додати блок

 з робітниками стилями і вперед, редагуйте візуально спостерігаючи всі зміни.

Ідея: Arley McBlain

З повагою, Андрій

Буду вдячний, якщо поділитеся посиланням на запис з друзями в своїх соц. мережах