Я создал страницу с 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. Я нахожу, что этот метод в любом случае менее подвержен ошибкам и гораздо менее сложен, чем некоторые из автоматизированных решений.
Некоторые примеры (не стесняйтесь предлагать некоторые другие):
Chrome:
Firefox:
Вот мой маленький проект. Пожалуйста, попробуйте Перезагрузка CSS в Github
Да, вы можете манипулировать CSS с помощью jQuery:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
Вы также можете использовать метод toggleClass.
Firebug для FireFox.
Это плагин в прикрепленном/отдельном окне. Изменения в HTML/CSS появляются мгновенно, элементы выделяются.
Преимущество над хаками JS заключается в том, что вы не можете скопировать это случайно на ваш экземпляр производства.
Вы ищете Live Reload:
Он доступен как расширение для браузера и легко реализуется
Новый редактор кода с открытым кодом brackets имеет функцию Live Development, где вы можете редактировать CSS в редакторе, и он сразу же будет отражен в браузере Chrome. В настоящее время он работает только для редактирования CSS, но редактирование HTML скоро!
Firebug для Firefox - мой предпочтительный метод: https://addons.mozilla.org/de/firefox/addon/firebug/ Вы можете редактировать HTML и CSS на лету, быстро деактивировать правила CSS (не удаляя их), добавлять или удалять HTML и т.д. Если вы не настроите свой дизайн, это ваш выбор. Вы даже можете сохранить изменения в локальной копии, но я почти никогда не использую эту функцию.
Это может помочь → chaicode
Его живой редактор CSS, Javascript и HTML, который является open source и wip. github
Если вы используете Firefox, вы можете установить Web Developer Toolbar 1.2.2 из дополнения Firefox, у которого есть опция перезагрузки связанных стилей.
Попробуйте использовать CSS Brush, хром-плагин для создания CSS в реальном времени. Вам не нужно писать все CSS в текстовом редакторе, возвращаться в браузер и перезагружать его, а писать в формате CSS так, как если бы вы делали это в текстовом редакторе. У вас будет больше возможностей, чем текстовый редактор, например контекстно-зависимое меню, использование повторяющихся свойств, выбор полного пути CSS или отфильтрованный путь элемента непосредственно со страницы.