Я создал страницу с помощью CSS. Теперь мне нужно перейти с редактора на браузер и обновить всю страницу, просто чтобы увидеть каждое небольшое изменение. Но я не хочу обновлять страницу, потому что у меня есть анимация.
Итак, есть ли что-нибудь, что я могу использовать, что мой сайт обновляется автоматически после обновления CSS?
Может быть, с помощью JavaScript, jQuery, Ajax или чего-то еще?
Ответы:
Вот вы: http://cssrefresh.frebsite.nl/
CSSrefresh - это небольшой беспрепятственный файл javascript, который отслеживает CSS-файлы, включенные в вашу веб-страницу. Как только вы сохраняете CSS-файл, изменения вступают в силу напрямую, без необходимости обновлять браузер.
Просто вставьте файл javascript, и он работает!
Но обратите внимание: это работает только тогда, когда у вас есть файлы на сервере!
Если вы разрабатываете с помощью 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. Я считаю, что этот метод в любом случае менее подвержен ошибкам и намного менее сложен, чем некоторые из существующих автоматизированных решений.
Некоторые примеры (не стесняйтесь предлагать другие):
Хром:
Fire Fox:
Вот мой маленький проект. Пожалуйста, попробуйте
автоматическую перезагрузку CSS на Github
Да, вы можете управлять переходным CSSотверстием jQuery:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
Вы также можете использовать этот toggleClassметод.
Firebug для FireFox.
Это плагин в прикрепленном / отдельном окне. Изменения в HTML / CSS появляются мгновенно, элементы выделяются.
Преимущество перед взломами JS в том, что вы не можете случайно скопировать это в свой производственный экземпляр.
Вы ищете Live Reload:
Он доступен как расширение для браузера и его легко реализовать.
Новый редактор кода с открытым исходным кодом, скобки , имеет функцию Live Development, в которой вы можете редактировать CSS в редакторе, и это сразу же будет отражено в браузере Chrome. В настоящее время он работает только для редактирования CSS, но скоро появится редактирование HTML!
Firebug для Firefox - мой предпочтительный метод: https://addons.mozilla.org/de/firefox/addon/firebug/ Вы можете редактировать HTML и CSS на лету, быстро деактивировать правила CSS (не удаляя их), добавлять или удалять HTML и так далее. Если вы не хотите изменять свой дизайн, это ваш выбор. Вы даже можете сохранить изменения в локальной копии, но я почти никогда не использую эту функцию.
Попробуйте использовать CSS Brush , плагин Chrome для создания CSS в реальном времени. Вам не нужно писать весь CSS в текстовом редакторе, возвращаться в браузер и перезагружать его, лучше писать CSS в реальном времени, как если бы вы делали это в текстовом редакторе. Здесь у вас будет больше функций, чем в текстовом редакторе, например, контекстное меню, использование повторяющихся свойств, выбор полного пути CSS или отфильтрованного пути элемента прямо со страницы.