Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
6 г. назад

Обновление стилей CSS без перезагрузки страницы - Reload CSS

Часто так бывает, что внося изменения в стили CSS, верстальщик постоянно обновляет страницу. Порою это сильно раздражает, особенно когда внесли изменения в HTML с помощью FireBug-а или инструментов разработчика в других браузерах. В итоге с коллегой JS программистом Игорем Демьяновым написали скрипт, который перезагружает с сервера файлы стилей, так называемый Reload CSS.

Reload CSS

Чтобы включить такой функционал у вас на сайте, требуется сделать 3 простых шага.

1. Подключить JS следующим кодом:

<script type="text/javascript" src="/templates/lisp/js/dev.js"></script>

2. В HTML код вставляем ссылку, в любое место. Лучше в начала или в конец:

<a href="#" onclick="DeveloperTool.Init().ReloadAllCSSThisPage()" class="dev-css">Обновить CSS</a>

3.Описываем стили. У меня лично такие, а там уже кто как хочет оформляет кнопку Reload CSS по своему:

.dev-css {
  position:fixed;
  left:1em;
  top:1em;
  padding:1em;
  border-radius:7px; 
  background-color: rgba(0, 0, 0, 0.6); 
  color:#FFF
}

Скачать файл dev.js

Комментарии

#HYBRID21.10.2010 14:53
Спасибо за интересное решение, думаю будет экономить тучу времени... потестим на досуге :) Ответить
#PaLyCH21.10.2010 15:15
К сожалению это устаревшее решение. Для Firefox есть плагин, даже два, один из них зовется также ReloadCSS. Но зато мой работает по всех браузерах :))) Ответить

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

Наверх