От автора: на днях вечером Амит Патель упомянул, что вы можете присвоить тегам HTML script свойство display: block с помощью CSS, а затем отредактировать этот код инлайном с атрибутом contentEditable. Это означает, что вы можете увидеть все обновления в браузере по мере ввода. Вскоре после этого Мариус Гундерсен ответил, что вы можете сделать это и с тегом style.
Все это для меня такая странная концепция, что мне просто нужно было сделать демо, чтобы посмотреть, сработает ли это:
И это так странно! Все, что вам нужно сделать, это добавить атрибут contentEditable в тег style и убедиться, что он установлен в display: block:
<p>content goes here</p> <style contenteditable> p { color: black; }
</style>style { display: block;
}Зачем нам так делать? Ну, я не совсем уверен. Но это, безусловно, изящная демонстрация. Это также напоминает мне о столь странной и яркой демонстрации, которую Джейк Албоу сделал не так давно, которая, как оказалось, одна из моих любимых демо всех времен:
Автор: Robin Rendle
Источник: https://css-tricks.com/
Редакция: Команда webformyself.