Вчера наткнулся на «тут» Мириам Сюзанн, где она показала интересный способ сделать редактор CSS на самом CSS. Идея не совсем уж новая, Лия Веру давно в своих презентациях пользуется чем-то похожим, но захотелось реализовать такой редактор самому.
1. Для тега
style можно выставить display: block, тогда браузер отрисует его содержимое.2. Добавляем атрибут
contenteditable, чтобы можно было редактировать это содержимое.3. Добавляем ещё один атрибут
spellcheck="false", чтобы браузер не проверял наш CSS на грамматику. Я и так знаю, что CSS — не английский язык.4. Применяем свеженький
@scope, чтобы стили применялись только внутри нашего компонента. Увы, работать из-за этого будет только в Chrome пока, но это же для демок, не для продакшена.5. Добавляем нативную тёмную тему при помощи
color-scheme: dark, чтобы глазкам было приятно.6. Оборачиваем в CSS-контейнер, чтобы можно было встраивать демку в страницу.
Получаем нативный простенький редактор CSS с адаптивностью, поддержкой тёмной темы и не требующий никаких библиотек. 54 строчки CSS с пробелами.
https://mefody.dev/chunks/css-editor-in-css/
