CSS ile bir sayfa oluşturdum. Şimdi, her küçük değişikliğe göz atmak için, editörümden tarayıcıma geçmeli ve tüm sayfayı yenilemeliyim. Ama bazı animasyonlarım olduğu için sayfayı yenilemek istemiyorum.
Bir CSS güncellemesinden sonra sitemin otomatik olarak güncellenmesi için kullanabileceğim herhangi bir şey var mı?
Belki JavaScript, jQuery, Ajax veya başka bir şeyle?
Yanıtlar:
İşte buradasınız : http://cssrefresh.frebsite.nl/
CSSrefresh, web sayfanıza dahil edilen CSS dosyalarını izleyen küçük, engelleyici olmayan bir javascript dosyasıdır. Bir CSS dosyasını kaydettiğiniz anda, değişiklikler tarayıcınızı yenilemeniz gerekmeden doğrudan uygulanır.
Sadece javascript dosyasını ekleyin ve işe yarıyor!
Ancak not: Yalnızca bir sunucuda dosyalarınız olduğunda çalışır!
Sublime Text ve Google Chrome veya Apple Safari ile geliştirirseniz Emmet LiveStyle kullanmalısınız . Bu, daha güçlü bir Canlı CSS Yeniden Yükleyicidir.
Şimdi CSS Yenileme yerine kullanıyorum .
Bu harika eklenti hakkında daha fazla bilgi istiyorsanız, lütfen Gönderiyi Smashing Magazine tarafından okuyun.
JQuery ile harici stil sayfalarını yeniden yükleyen bir işlev oluşturabilirsiniz.
/**
* 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/ adresine bir göz atın .
OS X ve Windows için bir tarayıcı eklentisi olarak çalışır. Hoşuma gitti çünkü sürüm oluşturma denetimime yanlışlıkla işleyebileceğim ek javascript eklemem gerekmiyor.
Tarayıcı eklentilerinin / uzantılarının en kolay çözüm olduğunu düşünüyorum. Sitelerinizde herhangi bir kod değişikliği gerektirmezler. Ve web üzerindeki herhangi bir site için kullanılabilirler - bu, bir araç çubuğunu gizlemek veya bir hatayı geçici olarak düzeltmek için çok hızlı bir şekilde bellek içi bir şeyi değiştirirsem yararlıdır; onunla uğraşmayı bitirdikten sonra bir tuşa basabilirim ve tüm CSS normale döner.
Yüklendikten sonra, (çoğu) CSS yeniden yüklenen eklentiler / uzantılar, CSS'yi otomatik olarak yeniden yüklemez. Ancak genellikle araç çubuğu düğmesi, bağlam menüsü öğesi ve / veya CSS'yi yeniden yüklemek için basit bir tuşa basma gibi basit bir şeyle çalışın. Bu yöntemin zaten daha az hataya eğilimli olduğunu ve bazı otomatik çözümlerden çok daha az karmaşık olduğunu görüyorum.
Bazı örnekler (başkalarını önermekten çekinmeyin):
Krom:
Firefox:
İşte benim küçük projem. Lütfen Github'da CSS Otomatik yeniden yüklemeyi deneyin
Evet, CSSüzerinden değiştirebilirsinizjQuery :
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
toggleClassYöntemi de kullanabilirsiniz .
FireFox için Firebug.
Ekli / ayrı bir pencerede bulunan bir eklentidir. HTML / CSS'de yapılan değişiklikler anında görünür, öğeler vurgulanır.
JS hack'lerine göre avantajı, bunu yanlışlıkla üretim örneğinize kopyalayamamanızdır.
Canlı Yeniden Yüklemeyi arıyorsunuz:
Bir tarayıcı uzantısı olarak mevcuttur ve uygulaması kolaydır
Yeni açık kaynak kod düzenleyici, köşeli parantezler , CSS'yi düzenleyicide düzenleyebileceğiniz bir Canlı Geliştirme özelliğine sahiptir ve anında krom tarayıcıya yansıtılacaktır. Şu anda yalnızca CSS düzenleme için çalışıyor, ancak HTML düzenleme yakında geliyor!
Firefox için Firebug tercih ettiğim yöntem: https://addons.mozilla.org/de/firefox/addon/firebug/ HTML ve CSS'yi anında düzenleyebilir, CSS kurallarını hızla devre dışı bırakabilir (bunları silmeden), HTML ekleyebilir veya kaldırabilirsiniz ve bunun gibi. Tasarımınızı değiştirmek istemiyorsanız, bu sizin seçiminiz. Değişiklikleri yerel bir kopyaya bile kaydedebilirsiniz, ancak bu özelliği neredeyse hiç kullanmıyorum.
Canlı CSS oluşturmak için bir krom eklentisi olan CSS Brush'ı kullanmayı deneyin . Tüm CSS'yi bir metin düzenleyicide yazmanız, tarayıcıya geri dönmeniz ve yeniden yüklemeniz gerekmez, bunun yerine CSS'yi bir metin düzenleyicide yapıyormuş gibi canlı olarak yazın. Burada, bağlama duyarlı menü gibi bir metin düzenleyiciden daha fazla özelliğe sahip olacaksınız, yinelenen özellikleri kullanın, tam CSS yolunu veya doğrudan sayfadan bir öğenin filtrelenmiş yolunu seçin.