• Главная  
• Вредные советы  
• Обновление стилей CSS без перезагрузки страницы — Reload CSS

Обновление стилей 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
}

Пользуйтесь на здороввье!