मैंने CSS के साथ एक पेज बनाया है। अब मुझे अपने संपादक से अपने ब्राउज़र में बदलना होगा और पूरे पृष्ठ को रीफ्रेश करना होगा, बस हर छोटे से बदलाव पर एक नज़र डालना होगा। लेकिन मैं पेज को रिफ्रेश नहीं करना चाहता, क्योंकि मेरे पास कुछ एनिमेशन हैं।
तो क्या ऐसी कोई चीज़ है जिसका उपयोग मैं अपनी साइट अपडेट सीएसएस अपडेट के बाद अपने आप कर सकता हूं?
शायद जावास्क्रिप्ट के साथ, jQuery, Ajax या कुछ और?
जवाबों:
यहाँ आप हैं: http://cssrefresh.frebsite.nl/
CSSrefresh एक छोटी, अबाधित जावास्क्रिप्ट फ़ाइल है जो आपके वेबपेज में शामिल CSS- फाइलों पर नजर रखती है। जैसे ही आप CSS-file को सेव करते हैं, आपके ब्राउज़र को रिफ्रेश किए बिना बदलाव सीधे लागू हो जाते हैं।
बस जावास्क्रिप्ट फ़ाइल डालें और यह काम करता है!
लेकिन ध्यान दें: यह केवल तब काम करता है जब आपके पास सर्वर पर फाइलें होती हैं!
यदि आप Sublime Text और Google Chrome या Apple Safari के साथ विकसित होते हैं , तो आपको Emmet LiveStyle का उपयोग करना चाहिए । यह एक अधिक शक्तिशाली Live CSS-Reloader है।
अब मैं इसका इस्तेमाल CSS Refresh के बजाय करता हूँ ।
यदि आप इस भयानक प्लगइन के बारे में अधिक जानकारी चाहते हैं, तो कृपया पोस्ट को स्मैशिंग पत्रिका द्वारा पढ़ें
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/ पर एक नजर डालें ।
यह ओएस एक्स और विंडोज़ के लिए एक ब्राउज़र प्लगइन के रूप में काम करता है। मुझे यह पसंद है क्योंकि मुझे अतिरिक्त जावास्क्रिप्ट को एम्बेड करने की आवश्यकता नहीं है जो मैं गलती से अपने संस्करण नियंत्रण में कर सकता हूं।
मुझे ब्राउज़र प्लगइन्स / एक्सटेंशन सबसे आसान समाधान लगता है। उन्हें आपके व्यक्तिगत साइटों पर किसी भी कोड परिवर्तन की आवश्यकता नहीं है। और उन्हें वेब पर किसी भी साइट के लिए इस्तेमाल किया जा सकता है - जो उपयोगी है अगर मैं एक टूलबार को छिपाने या अस्थायी रूप से बग को ठीक करने के लिए वास्तविक इन-मेमोरी को कुछ संशोधित करता हूं; एक बार इसे समाप्त करने के बाद, मैं एक कुंजी दबा सकता हूं और सभी सीएसएस वापस सामान्य हो गया है।
एक बार स्थापित होने के बाद, (अधिकांश) सीएसएस पुनः लोड प्लगइन्स / एक्सटेंशन सीएसएस को फिर से लोड नहीं करते हैं। लेकिन आमतौर पर एक टूलबार बटन, एक संदर्भ मेनू आइटम, और / या सीएसएस को पुनः लोड करने के लिए एक साधारण कुंजी प्रेस के रूप में कुछ के साथ काम करते हैं। मुझे लगता है कि यह तरीका वैसे भी कम त्रुटि वाला है, और बहुत कम जटिल है तो कुछ स्वचालित समाधान वहां से निकलते हैं।
कुछ उदाहरण (कुछ अन्य लोगों का सुझाव देने के लिए स्वतंत्र महसूस):
क्रोम:
फ़ायरफ़ॉक्स:
यहाँ मेरा छोटा प्रोजेक्ट है। कृपया इसे जीथब पर सीएसएस ऑटो पुनः लोड करने का प्रयास करें
हाँ आप के CSSमाध्यम से हेरफेर कर सकते हैं jQuery:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
आप toggleClassविधि का उपयोग भी कर सकते हैं ।
फायरफॉक्स के लिए फायरबग।
यह एक संलग्न / अलग विंडो में एक प्लगइन है। HTML / CSS में परिवर्तन तुरंत दिखाई देते हैं, तत्वों को हाइलाइट किया जाता है।
JS हैक्स पर फायदा यह है कि आप इस गलती को अपने प्रोडक्शन इंस्टेंस पर कॉपी नहीं कर सकते हैं।
आप लाइव रीलोड देख रहे हैं:
यह एक ब्राउज़र एक्सटेंशन के रूप में उपलब्ध है और इसे लागू करना आसान है
नए ओपन-सोर्स कोड एडिटर, ब्रैकेट्स में लाइव डेवलपमेंट फीचर है, जहां आप एडिटर में सीएसएस को एडिट कर सकते हैं और यह तुरंत क्रोम ब्राउजर में दिखाई देगा। यह वर्तमान में केवल CSS संपादन के लिए काम करता है, लेकिन HTML संपादन जल्द ही आ रहा है!
फ़ायरफ़ॉक्स के लिए फ़ायरबग मेरी पसंदीदा विधि है: https://addons.mozilla.org/de/firefox/addon/firebug/ आप HTML और CSS को मक्खी पर संपादित कर सकते हैं, जल्दी से CSS नियमों को निष्क्रिय कर सकते हैं (उन्हें हटाए बिना), HTML जोड़ें या और इसी तरह। यदि आप अपने डिजाइन को मोड़ना नहीं चाहते हैं तो यह आपकी पसंद है। आप स्थानीय प्रतिलिपि में परिवर्तन भी सहेज सकते हैं, लेकिन मैं शायद ही कभी उस सुविधा का उपयोग करूं।
सीएसएस ब्रश का उपयोग करके देखें , सीएसएस लाइव बनाने के लिए एक क्रोम प्लगइन। आपको एक पाठ संपादक में सभी सीएसएस लिखने की ज़रूरत नहीं है, ब्राउज़र पर वापस आएं और इसे फिर से लोड करें, बल्कि सीएसएस लाइव लिखें जैसे कि आप एक पाठ संपादक में कर रहे थे। आपके पास पाठ संपादक की तुलना में अधिक सुविधाएँ होंगी जैसे संदर्भ-संवेदनशील-मेनू, डुप्लिकेट गुणों का उपयोग करना, पूर्ण सीएसएस पथ का चयन करना या पृष्ठ से सीधे किसी तत्व का फ़िल्टर्ड पथ।