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

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

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

Ответы

Ответ 1

Здесь вы находитесь: 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

Ответ 2

С помощью 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);
    });
}

Ответ 3

Посмотрите http://livereload.com/.

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

Ответ 4

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

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

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

Chrome:

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

Firefox:

Ответ 7

Firebug для FireFox.

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

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

Ответ 8

Вы ищете Live Reload:

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

http://livereload.com/

Ответ 9

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

Ответ 10

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

Ответ 11

Это может помочь → chaicode

Его живой редактор CSS, Javascript и HTML, который является open source и wip. github

Ответ 12

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

Ответ 13

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