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

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

От автора: на днях вечером Амит Патель упомянул, что вы можете присвоить тегам HTML script свойство display: block с помощью CSS, а затем отредактировать этот код инлайном с атрибутом contentEditable. Это означает, что вы можете увидеть все обновления в браузере по мере ввода. Вскоре после этого Мариус Гундерсен ответил, что вы можете сделать это и с тегом style.

Все это для меня такая странная концепция, что мне просто нужно было сделать демо, чтобы посмотреть, сработает ли это:

И это так странно! Все, что вам нужно сделать, это добавить атрибут contentEditable в тег style и убедиться, что он установлен в display: block:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Зачем нам так делать? Ну, я не совсем уверен. Но это, безусловно, изящная демонстрация. Это также напоминает мне о столь странной и яркой демонстрации, которую Джейк Албоу сделал не так давно, которая, как оказалось, одна из моих любимых демо всех времен:

Автор: Robin Rendle

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree