А вы знали, что тегам style и script HTML можно присвоить свойство display: block?

А вы знали, что тегам style и script HTML можно присвоить свойство display: block?

От автора: на днях вечером Амит Патель упомянул, что вы можете присвоить тегам 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.