mefody.dev

Редактор CSS, написанный на CSS



Вчера наткнулся на «тут» Мириам Сюзанн, где она показала интересный способ сделать редактор 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/