सीएसएस चयनकर्ताओं में कॉमा क्या है?

एक साधारण कॉमा कोडिंग को सरल बनाता है

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

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

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

कॉमा और सीएसएस

आपने सोचा होगा कि सीएसएस चयनकर्ता वाक्यविन्यास में कॉमा किस भूमिका निभाता है। वाक्यों में, अल्पविराम स्पष्टता लाता है-कोड-सेपरेटर को नहीं। एक सीएसएस चयनकर्ता में अल्पविराम एक ही शैलियों के भीतर कई चयनकर्ताओं को अलग करता है।

उदाहरण के लिए, आइए नीचे कुछ सीएसएस देखें।

वें {रंग: लाल; }
टीडी {रंग: लाल; }
पी.रेड {रंग: लाल; }
div # firstred {color: red; }

इस वाक्यविन्यास के साथ, आप कह रहे हैं कि आप लाल टैग के साथ वें टैग, टीडी टैग, अनुच्छेद टैग चाहते हैं, और आईडी के साथ div टैग सभी को स्टाइल रंग लाल होने के लिए पहले किया गया था।

यह पूरी तरह से स्वीकार्य सीएसएस है, लेकिन इस तरह लिखने के लिए दो महत्वपूर्ण दोष हैं:

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

इन दोषों से बचने के लिए, और अपनी सीएसएस फ़ाइल को व्यवस्थित करने के लिए, हम अल्पविरामों का उपयोग करने का प्रयास करेंगे।

अलग चयनकर्ताओं को अल्पविराम का उपयोग करना

4 अलग-अलग सीएसएस चयनकर्ताओं और 4 नियमों को लिखने के बजाय, आप व्यक्तिगत चयनकर्ताओं को अल्पविराम से अलग करके इन सभी शैलियों को एक नियम संपत्ति में जोड़ सकते हैं। यहां बताया गया है कि यह कैसे किया जाएगा:

वें, टीडी, पी.एड, div # firstred {रंग: लाल; }

अल्पविराम चरित्र मूल रूप से चयनकर्ता के अंदर "और" शब्द के रूप में कार्य करता है। तो यह टी एच टैग और टीडी टैग और अनुच्छेद टैग क्लास लाल के साथ और आईडी के साथ div टैग पर लागू होता है। यह वही है जो हमारे पास पहले था, लेकिन 4 सीएसएस नियमों की आवश्यकता के बजाय, हमारे पास एकाधिक चयनकर्ताओं के साथ एक नियम है। कॉमा चयनकर्ता में करता है, यह हमें एक नियम में एकाधिक चयनकर्ताओं की अनुमति देता है।

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

सिंटेक्स भिन्नता

कुछ लोग प्रत्येक चयनकर्ता को अपनी लाइन पर अलग करके सीएसएस को और अधिक सुगम बनाने का विकल्प चुनते हैं, इसे सब एक जैसा ऊपर लिखने के बजाय। ऐसा ही किया जाएगा:

वें,
टीडी,
p.red,
div # firstred
{
लाल रंग;
}

ध्यान दें कि आप प्रत्येक चयनकर्ता के बाद कॉमा डालते हैं और फिर अगली चयनकर्ता को अपनी लाइन पर तोड़ने के लिए "एंटर" का उपयोग करते हैं। अंतिम चयनकर्ता के बाद आप अल्पविराम नहीं जोड़ते हैं।

अपने चयनकर्ताओं के बीच अल्पविरामों का उपयोग करके, आप एक और कॉम्पैक्ट स्टाइल शीट बनाते हैं जो भविष्य में अपडेट करना आसान है और आज पढ़ने में आसान है!

जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा 5/8/17 को संपादित किया गया