सीएसएस कैस्केडिंग स्टाइलशीट्स के लिए खड़ा है जो आधुनिक दिन वेब डिज़ाइनिंग का एक महत्वपूर्ण पहलू है। यदि आप एक वेब डिज़ाइनर हैं और वर्डप्रेस थीम या ब्लॉगर टेम्पलेट्स को डिज़ाइन करने के बारे में जानते हैं, तो आप अब सीएसएस को अनदेखा नहीं कर सकते हैं। हालांकि, यदि आपके पास ब्लॉग है और बेहतर प्रदर्शन और त्वरित लोडिंग के लिए सीएसएस फ़ाइलों को अनुकूलित करना चाहते हैं, तो यहां आपके लिए आवश्यक सभी टूल्स हैं।

अपने ब्लॉग टेम्पलेट की सीएसएस फ़ाइल कैसे खोजें

यदि आपका ब्लॉग वर्डप्रेस पर है तो सीएसएस फ़ाइल आदर्श रूप से WP-content / themes / yourtheme के अंतर्गत थीम फ़ोल्डर में रखी जाती है । सटीक स्थान जानने के लिए, अपना ब्लॉग खोलें और पृष्ठ स्रोत देखें। नीचे दिखाए गए अनुसार आपको अपनी थीम के सीएसएस का एक लिंक मिलेगा

यदि आपका ब्लॉग ब्लॉगर पर है, तो ब्लॉगर डैशबोर्ड खोलें और "लेआउट" टैब पर जाएं। "HTML संपादित करें" और चेकबॉक्स "विजेट टेम्पलेट का विस्तार करें" का चयन करें। इसके बाद, प्रारंभिक बॉडी टैग के बाद परिभाषित नोटपैड फ़ाइल में सीएसएस कोड कॉपी करें।

उस फ़ाइल की एक प्रति डाउनलोड करें और इस ट्यूटोरियल में वर्णित संशोधनों को करें। यह बेहतर होगा यदि आप स्टाइलशीट का बैकअप लेते हैं, यदि चीजें गलत होती हैं, तो आप बैकअप का उपयोग कर अपनी साइट के डिज़ाइन को पुनर्स्थापित कर सकते हैं।

सीएसएस कोड अनुकूलित करें

अपने सीएसएस कोड प्रारूपित करें

किसी भी सीएसएस कोड के अनुकूलन की दिशा में पहला कदम उचित प्रारूपण है। आपको स्टाइल तत्वों और विशेषताओं को ध्यान से प्रारूपित करना चाहिए ताकि उन्हें समझना आसान हो। इसके अलावा, कोड लिखा जाना चाहिए ताकि वे अन्य वर्गों या आईडी के साथ ओवरलैप न हों। कोड को मैन्युअल रूप से स्वरूपित करना कठिन काम है और आप प्रारंभ करने के लिए प्रारूप सीएसएस टूल का उपयोग कर सकते हैं।

स्टाइल शीट की प्रतिलिपि बनाएँ जिसे आप प्रारूपित करना चाहते हैं और इसे टेक्स्ट बॉक्स में पेस्ट करें। इसके बाद, दाएं पैनल से स्वरूपण के पसंदीदा नियमों का चयन करें।

उदाहरण के लिए: आप प्रत्येक div टैग की सीएसएस संपत्ति के बाद एक नई लाइन डालना चाह सकते हैं। आप अर्धविराम के बाद रखे गए सभी सफेद रिक्त स्थान भी हटाना चाह सकते हैं। उन सभी नियमों को सेट करें जिन्हें आप प्रोग्राम करना चाहते हैं और फिर "प्रारूप सीएसएस" बटन दबाएं। सभी निर्दिष्ट नियम लागू किए जाएंगे और नीचे दिखाए गए अनुसार कोड स्वरूपित किया जाएगा:

अनावश्यकताओं को हटाने के लिए सीएसएस अनुकूलित करें

अब जब आपने पठनीयता के लिए अपना कोड स्वरूपित किया है, तो यह कुछ अनुकूलन के लिए समय है। ऑनलाइन सीएसएस अनुकूलक पर जाएं और पूरे कोड को दिए गए टेक्स्ट बॉक्स में पेस्ट करें। यदि आप चाहें तो आप अपनी सीएसएस फ़ाइल का यूआरएल भी दर्ज कर सकते हैं।

इस उपकरण का उपयोग निम्नलिखित उद्देश्यों के लिए किया जा सकता है:

  • सभी आरजीबी रंग मानों को हेक्साडेसिमल में परिवर्तित करें जिससे इस प्रकार ओवरहेड और बढ़ती दक्षता कम हो जाती है।
  • सभी टिप्पणियों और सफेद रिक्त स्थान हटा दें।
  • आधुनिक मेट्रिक्स के लिए सीमा मान अनुकूलित करें। उदाहरण के लिए: विशेषता सीमा: 2 पीएक्स 5 पीएक्स 2 पीएक्स 5 पीएक्स सीमा में बदल दिया गया है: 2 पीएक्स 5 पीएक्स;
  • पूर्ण मूल्यों को सापेक्ष लोगों में परिवर्तित करें। उदाहरण के लिए: विशेषता फ़ॉन्ट-आकार: 18 पीएक्स; फ़ॉन्ट आकार में बदला जा सकता है: 2em;
  • एक ही विशेषता में एकाधिक पृष्ठभूमि, फ़ॉन्ट, मार्जिन, पैडिंग, सूची विशेषताओं को परिवर्तित करता है।

अपनी सीएसएस फ़ाइल को साफ करें और आकार कम करें

अब त्रुटियों के लिए अपने सीएसएस कोड को साफ करने और फ़ाइल आकार को कम करने का समय है। सीएसएस के आकार को कम करना महत्वपूर्ण है क्योंकि यह आपके ब्लॉग के पृष्ठों के लोड समय को प्रभावित करता है। स्वच्छ सीएसएस पर जाएं और सीएसएस कोड पेस्ट करें जिसे आपने पहले चरण में अनुकूलित किया था। संपीड़न मोड को उच्चतम के रूप में चुनें और नीचे दिखाए गए विकल्पों का चयन करें

स्वच्छ सीएसएस सीएसएस टिडी पर आधारित है और इसका उपयोग शॉर्टेंड गुणों, संपीड़ित रंगों और फ़ॉन्ट भारों को मर्ज करने के लिए किया जा सकता है। तेजी से लोडिंग के लिए सीएसएस कोड को संपीड़ित करने के लिए एक समान टूल सीएसएस ड्राइव है।

कुछ सुझाव

आपके ब्लॉग के टेम्पलेट के लिए सीएसएस कोड लिखते समय आपको कुछ टिप्स और युक्तियां ध्यान में रखनी चाहिए:

1. टैग से पहले पूरे कोड को चिपकाने के बजाय हमेशा बाहरी स्टाइलशीट का उपयोग करें।

2. पुनरावृत्ति से बचने के लिए सार्वभौमिक कक्षाओं का प्रयोग करें। उदाहरण के लिए: आप कई वर्गों पर एक ही विशेषता का उपयोग करने के बजाय बाएं किसी भी तत्व को फ़्लोट करने के लिए एक साधारण वर्ग div.floatleft {float: left;} का उपयोग कर सकते हैं।

3. बग फिक्सिंग के लिए ब्राउज़र विशिष्ट सीएसएस फ़ाइलों का उपयोग करें। इसका अर्थ यह है कि, यदि आप एक बग को देखते हैं जो केवल एक विशेष ब्राउज़र (आमतौर पर इंटरनेट एक्सप्लोरर 6 या पुराने संस्करण) में होता है, तो उस बग को ठीक करने के लिए एक अलग स्टाइल शीट का उपयोग करें। यह आपकी मुख्य स्टाइल शीट को साफ और साफ रखता है।

वर्डप्रेस ब्लॉगर्स के लिए : सीएसएस कोड को अनुकूलित करने के अलावा, आपको यह देखना होगा कि ब्लॉग के पेज लोड समय को कैसे कम किया जाए और आपको वर्डप्रेस डेटाबेस को कैसे साफ करना चाहिए।

क्या आपने अभी तक अपने ब्लॉग टेम्पलेट के सीएसएस को अनुकूलित किया है? सीएसएस कोड अनुकूलित करने के लिए आपके पसंदीदा उपकरण क्या हैं? टिप्पणी अनुभाग में अपने विचार साझा करें।