Я створив сторінку з 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:
Він доступний як розширення браузера і простий у впровадженні
Новий редактор коду з відкритим кодом, в дужках , має функцію Live Development, де ви можете редагувати CSS в редакторі, і це негайно відображатиметься в браузері chrome. На даний момент це працює лише для редагування CSS, але редагування HTML скоро!
Firebug для Firefox - це мій найкращий метод: https://addons.mozilla.org/de/firefox/addon/firebug/ Ви можете редагувати HTML і CSS на льоту, швидко дезактивувати правила CSS (не видаляючи їх), додати або видалити HTML і так далі. Якщо ви не хочете налаштовувати свій дизайн, це ваш вибір. Ви навіть можете зберегти зміни в локальній копії, але я майже ніколи не використовую цю функцію.
Спробуйте використати CSS Brush , хромовий плагін для створення CSS live. Вам не потрібно писати весь CSS у текстовому редакторі, повертатися до браузера та перезавантажувати його, а писати CSS у прямому ефірі, ніби ви робите це в текстовому редакторі. Тут ви матимете більше функцій, ніж текстовий редактор, наприклад контекстне меню, використовувати повторювані властивості, вибрати повний шлях CSS або відфільтрований шлях елемента безпосередньо зі сторінки.