Обновление стилей CSS без перезагрузки страницы — Reload CSS
Часто так бывает, что внося изменения в стили CSS, верстальщик постоянно обновляет страницу. Порою это сильно раздражает, особенно когда внесли изменения в HTML с помощью FireBug-а или инструментов разработчика в других браузерах.
В итоге с коллегой JS программистом Игорем Демьяновым написали скрипт, который перезагружает с сервера файлы стилей без перезагрузки страницы, так называемый Reload CSS.
Чтобы включить обновление стилей CSS у вас на сайте без перезагрузки, требуется сделать 3 простых шага.
1. Подключить JS следующим кодом:
var DeveloperTool={
Init:function(){
this.headObj =
document.getElementsByTagName('html')[0].getElementsByTagName('head')[0];
return this;
},
ReloadAllCSS : function(headObj) {
console.log("DT:ReloadAllCSS");
var links = headObj.getElementsByTagName('link');
for (var i=0 ; i < links.length ; i++){
var link = links[i];
this.ReloadCSSLink(link);
}
return this;
},
ReloadCSSLink : function(item) {
var value = item.getAttribute('href');
var cutI = value.lastIndexOf('?');
if (cutI != -1)
value = value.substring(0, cutI);
item.setAttribute('href', value + '?t=' + new Date().valueOf());
return this;
},
ReloadAllCSSThisPage : function() {
this.ReloadAllCSS(this.headObj);
return this;
}
};
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;
background-color : rgba(0, 0, 0, .6);
color : #FFF
}
Пользуйтесь на здороввье!