Обновите CSS веб-сайта без обновления страницы

Я создал страницу с помощью CSS. Теперь мне нужно перейти с редактора на браузер и обновить всю страницу, просто чтобы увидеть каждое небольшое изменение. Но я не хочу обновлять страницу, потому что у меня есть анимация.

Итак, есть ли что-нибудь, что я могу использовать, что мой сайт обновляется автоматически после обновления CSS?
Может быть, с помощью JavaScript, jQuery, Ajax или чего-то еще?

Вот вы: http://cssrefresh.frebsite.nl/

CSSrefresh - это небольшой беспрепятственный файл javascript, который отслеживает CSS-файлы, включенные в вашу веб-страницу. Как только вы сохраняете CSS-файл, изменения вступают в силу напрямую, без необходимости обновлять браузер.

Просто вставьте файл javascript, и он работает!

Но обратите внимание: это работает только тогда, когда у вас есть файлы на сервере!

Изменить: LiveStyle

Если вы разрабатываете с помощью Sublime Text и Google Chrome или Apple Safari, вам следует использовать Emmet LiveStyle . Это более мощный Live CSS-Reloader.
Теперь я использую его вместо CSS Refresh .

Если вам нужна дополнительная информация об этом замечательном плагине, прочтите сообщение журнала Smashing Magazine.

С помощью jQuery вы можете создать функцию, которая перезагружает внешние таблицы стилей.

/**
 * Forces a reload of all stylesheets by appending a unique query string
 * to each stylesheet URL.
 */
function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}

Взгляните на http://livereload.com/ .

Он работает как плагин браузера для OS X и Windows. Мне это нравится, потому что мне не нужно встраивать дополнительный javascript, который я мог бы случайно зафиксировать в своем управлении версиями.

Я считаю плагины / расширения браузера самым простым решением. Они не требуют изменения кода на отдельных сайтах. И их можно использовать для любого сайта в сети - что полезно, если я очень быстро модифицирую что-то в памяти, чтобы скрыть панель инструментов или временно исправить ошибку; как только закончил с ним работать, я могу нажать клавишу, и весь CSS вернется в нормальное состояние.

После установки (большинство) перезагружаемых плагинов / расширений CSS не перезагружают CSS автоматически. Но обычно работают с чем-то таким же простым, как кнопка на панели инструментов, пункт контекстного меню и / или простое нажатие клавиши для перезагрузки CSS. Я считаю, что этот метод в любом случае менее подвержен ошибкам и намного менее сложен, чем некоторые из существующих автоматизированных решений.

Некоторые примеры (не стесняйтесь предлагать другие):

Хром:

• tin.cr (включает автоматическую перезагрузку и может сохранять изменения в исходных файлах в браузере)
• CSS Обновить

Fire Fox:

• CSS Reloaded
• CSS Обновить

Вот мой маленький проект. Пожалуйста, попробуйте
автоматическую перезагрузку CSS на Github

Да, вы можете управлять переходным CSSотверстием jQuery:

$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );

Вы также можете использовать этот toggleClassметод.

http://api.jquery.com/toggleClass/

http://jqueryui.com/demos/switchClass/

Firebug для FireFox.

Это плагин в прикрепленном / отдельном окне. Изменения в HTML / CSS появляются мгновенно, элементы выделяются.

Преимущество перед взломами JS в том, что вы не можете случайно скопировать это в свой производственный экземпляр.

Вы ищете Live Reload:

Он доступен как расширение для браузера и его легко реализовать.

http://livereload.com/

Новый редактор кода с открытым исходным кодом, скобки , имеет функцию Live Development, в которой вы можете редактировать CSS в редакторе, и это сразу же будет отражено в браузере Chrome. В настоящее время он работает только для редактирования CSS, но скоро появится редактирование HTML!

Firebug для Firefox - мой предпочтительный метод: https://addons.mozilla.org/de/firefox/addon/firebug/ Вы можете редактировать HTML и CSS на лету, быстро деактивировать правила CSS (не удаляя их), добавлять или удалять HTML и так далее. Если вы не хотите изменять свой дизайн, это ваш выбор. Вы даже можете сохранить изменения в локальной копии, но я почти никогда не использую эту функцию.

Если вы используете Firefox, вы можете установить панель инструментов веб-разработчика 1.2.2 из надстройки Firefox, которая имеет возможность перезагрузить связанные таблицы стилей.

Попробуйте использовать CSS Brush , плагин Chrome для создания CSS в реальном времени. Вам не нужно писать весь CSS в текстовом редакторе, возвращаться в браузер и перезагружать его, лучше писать CSS в реальном времени, как если бы вы делали это в текстовом редакторе. Здесь у вас будет больше функций, чем в текстовом редакторе, например, контекстное меню, использование повторяющихся свойств, выбор полного пути CSS или отфильтрованного пути элемента прямо со страницы.

Это может помочь -> chaicode

Это живой редактор CSS, Javascript и HTML с открытым исходным кодом. github