CSS pane: живой редактор CSS на любой странице, без DevTools
Стандартный воркфлоу экспериментов с CSS: открываешь DevTools, кликаешь Elements, находишь узел, правишь inline-стиль, перезагружаешь — и всё пропало. У JustZix v2.13.40+ есть CSS pane — плавающая textarea, внедрённая в страницу, с живым внедрением <style>. Печатаешь CSS, видишь изменение через 200 мс, содержимое сохраняется между перезагрузками во вкладке. Никакого DevTools, никакого F5.
Что это конкретно
CSS pane — это маленькое перетаскиваемое окно на странице (fixed, z-index 2147483640) с заголовком (цветная точка + имя) и textarea внутри. То, что ты печатаешь, проходит через debounce 200 мс в <style id="jz-pane-style-{id}"> в <head> — ты сразу видишь эффект. Содержимое живёт в sessionStorage этой вкладки — перезагрузи страницу, содержимое останется; закрой вкладку, оно пропало (намеренно: pane — это блокнот, не постоянный архив).
Твой первый pane за 30 секунд
- Открой опции JustZix → выбери папку, группу или правило с совпадением URL.
- Нажми «CSS panes (0)» → модальное окно со списком. Нажми «+ Добавить новый CSS pane».
- Введи имя («Тест»), выбери цвет для точки — сохраняется автоматически.
- Посети страницу, совпадающую со scope. В правом верхнем углу (якорь по умолчанию) появляется pane.
- Напечатай
body { background: red; }— фон страницы становится красным через 200 мс.
Живой предпросмотр — debounce и очистка
Debounce 200 мс существует, чтобы быстрая печать не спамила reflow. На практике это незаметно — через 0,2 с изменение видно. Чтобы очистить все стили: очисти textarea. Pane внутренне записывает пустую строку в <style>, так что и очистка мгновенна.
Селекторы: пиши их так же, как в настоящем правиле. !important часто нужен, потому что у хост-сайта свои стили. Pane ты используешь в основном для тестирования — когда результат тебе нравится, скопируй CSS в настоящее правило (вкладка CSS на карточке правила) для постоянного использования.
Хранение по вкладке (sessionStorage)
Всё, что ты печатаешь, попадает в sessionStorage['jz_pane_{id}_content'] текущей вкладки. Последствия:
- F5 / навигация во вкладке — содержимое сохраняется. Pane перемонтируется, textarea перечитывает из хранилища.
- Новая вкладка с тем же scope — pane появляется пустым. Каждая вкладка — отдельный блокнот.
- Закрытие вкладки — содержимое потеряно. Никакого «я случайно потерял полчаса работы» — закрытие = сознательный отказ от блокнота.
Когда ты сделал что-то, что хочешь сохранить — перенеси это в обычное CSS-правило в опциях. Pane — не место для долгосрочного хранения кода.
Мульти-pane — 3 окна на одной странице
У тебя может быть любое количество CSS panes в одном scope. Каждый — отдельный <style> в head, каждый владеет своим содержимым в sessionStorage. На практике:
- Pane 1: «Переопределение шапки» — эксперименты с верхней панелью.
- Pane 2: «Скрыть рекламу» — разные варианты антирекламных селекторов.
- Pane 3: «Фикс форм» — ширины инпутов, размеры шрифта меток.
Каждый — со своим цветом точки (зелёный, красный, синий). Визуально с первого взгляда ясно, что у тебя 3 независимых набора стилей.
Иерархия scope (папка → группа → правило)
Pane можно привязать к папке, группе или правилу:
| Scope | Когда появляется pane | Сценарий применения |
|---|---|---|
| Папка | URL совпадает с folder.urlPatterns | CSS-эксперименты по всему магазину |
| Группа | Совпадение папки + URL-фильтр группы | Эксперименты по секции (например, checkout) |
| Правило | Папка + группа + URL-фильтр правила | Эксперименты на конкретной странице |
Наследование: в виде группы ты видишь собственные panes + унаследованные от папки. В виде правила — собственные + группы + папки. Как правила CSS/JS — полная иерархия.
Поделиться с коллегой
Panes проходят через тот же механизм синхронизации, что и правила. Сгенерируй ссылку для импорта → получатель получит и твои panes. Сценарий применения:
- Фронтенд-консультант заходит в магазин клиента, экспериментирует в pane «Редизайн шапки».
- Нажимает «Поделиться» — ссылка действует 24 ч.
- Клиент открывает ссылку в своём Chrome → импортирует → pane «Редизайн шапки» появляется у него.
- Клиент видит результат в своей вкладке. Одобряет? Консультант копирует содержимое pane в постоянное CSS-правило.
Ловушки
- sessionStorage может быть заблокирован (iframe в sandbox, приватный режим и т.д.) — содержимое не сохранится, но живое внедрение всё равно работает.
- CSS pane — не CodeMirror — простая textarea, без подсветки синтаксиса в MVP. Апгрейд до CodeMirror запланирован, но для использования как блокнот этого достаточно.
- Pane может закрывать важные элементы страницы — перетащи его за заголовок в другой угол. Позиция сохраняется по окну браузера (chrome.storage), так что другие вкладки её запоминают.
- 3+ pane на маленьком вьюпорте могут перекрываться. Snap-соединения (перетаскивание одного pane на другой) создают «группу» — сдвинь один, группа следует.
Что делать дальше
CSS pane — первый из 4 типов «окон на странице» JustZix. Следующие два — JS pane (JavaScript Run-on-demand) и JS Console (REPL с историей ↑↓). О них мы написали в отдельных статьях.
Установи JustZix и перестань держать DevTools открытыми только ради того, чтобы набросать селектор время от времени.
Оцени эту статью
Оценок пока нет — оцени первым.