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


81

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

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


1
Вы можете использовать
набор

Привет всем. Теперь я ищу то же самое, но изменения в файлах HTML! Кто угодно?

@Karen, пожалуйста, задайте новый вопрос, поскольку для этого потребуется совершенно другой ответ.
AMK

1
+1 за рекомендацию @TWCrap. Я делаю это все время.
Пэррис

Ответы:


81

Вот вы: 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.


8
это хорошо, но не забудьте удалить его перед развертыванием веб-сайта в производственной среде, иначе вы создадите небольшую ненужную нагрузку на сервер.
Bazzz 02

1
@dTDesign, если это правильный ответ, зачем там баунти?
AMK

Я не так давно на этом форуме. Сначала попробовал, что это такое, и получил значок. И я не отмечаю это, потому что ему нужен какой-то ответ, его отмеченная причина требует большего внимания. Мой ответ - не единственный правильный.
Майкл Шмидт

@dTDesign должен работать с eclipse? потому что я уже тестировал и, похоже, не работает, или я должен разместить js на сервере, а не локально?
mcmwhfy

2
@mcmwhfy: вставьте js ПОСЛЕ css, и он работает только на сервере. он также работает с xampp или чем-то в этом роде ...
Майкл Шмидт

11

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

сначала спасибо за ваш ответ, я пробую предложение от dTDesign, потому что я выгляжу немного проще, потому что я не знаком с jquery ... но еще раз спасибо

4

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

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


4

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

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

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

Хром:

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

Fire Fox:



2

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

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

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

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

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


танки. но это то же самое, что и Себасс ван Боксель. Я не знаком с jquery ... но еще раз спасибо :)

2

Firebug для FireFox.

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

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



1

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


1

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


0

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


0

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


0

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

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


Предоставленная ссылка не работает.
Baumannzone
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.