наверх





Очень интересный HTML пример редактирования online CSS кода. На самом деле, это просто!


В HTML5 появилось такой интересный атрибут, как contenteditable. Многие о нем не знают, а если знают, то не знают где его можно использовать. На самом деле, использовать данный атрибут можно где угодно, например в онлайн редактирование кода CSS. Чем это может быть удобно? Например, обычной демонстрацией определенной вещицы. Пользователь захотел опробовать какую-нибудь вещь, которую увидел на сайте, зашел на демонстрационную страницу и посмотрел, как эта вещь будет выглядеть. Можно и еще массу вещей найти, где можно использовать данный атрибут.

Итак, как же отредактировать CSS код сайта на ходу? Существует тег <style>, который должен помещаться внутрь тегов <head>, и в нем должны быть прописаны свойства. А можно подключить стили как отдельный файл. Ну так вот, тег <style> можно вынести за пределы тегов <head> и поместить где угодно. И, что бы можно было отредактировать стили, нужно добавить к стилям атрибут contenteditable:

<style contenteditable>
style {
        display: block;
}
</style>


И не забудьте обязательно указать, что стили это блочный элемент.




Просмотр демо-варианта


Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.