एकाधिक सीएसएस चयनकर्ता समूह

लोड स्पीड में सुधार करने के लिए एकाधिक सीएसएस चयनकर्ता समूह

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

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

समूह चयनकर्ताओं

जब आप सीएसएस चयनकर्ता समूह करते हैं, तो आप अपनी स्टाइल शीट में शैलियों को दोहराए बिना कई शैलियों को एक ही शैलियों को लागू करते हैं। दो या तीन या उससे अधिक सीएसएस नियम होने के बजाय, जिनमें से सभी एक ही काम करते हैं (उदाहरण के लिए, लाल रंग का रंग सेट करें), आपके पास एक ही सीएसएस नियम है जो आपके पृष्ठ के लिए पूरा करता है।

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

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

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

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

div, पी {रंग: # एफ 00; }

अल्पविराम का मूल रूप से अर्थ है "और"। तो यह चयनकर्ता सभी अनुच्छेद तत्वों और सभी विभाजन तत्वों पर लागू होता है। यदि अल्पविराम गुम हो गया था, तो यह सभी अनुच्छेद तत्व होंगे जो विभाजन के बच्चे हैं। यह एक बहुत ही अलग प्रकार का चयनकर्ता है, इसलिए यह अल्पविराम वास्तव में चयनकर्ता का अर्थ बदलता है!

चयनकर्ता के किसी भी रूप को किसी भी अन्य चयनकर्ता के साथ समूहीकृत किया जा सकता है। इस उदाहरण में, एक वर्ग चयनकर्ता को आईडी चयनकर्ता के साथ समूहीकृत किया जाता है:

पी.एड, # एसब {रंग: # एफ 00; }

तो यह शैली किसी भी अनुच्छेद पर "लाल" के वर्ग विशेषता के साथ लागू होती है, और कोई भी तत्व (चूंकि हमने किस प्रकार निर्दिष्ट नहीं किया है) जिसमें "सब" की आईडी विशेषता है।

आप चयनकर्ताओं समेत किसी भी चयनकर्ता को समूहबद्ध कर सकते हैं जो सिंगल शब्द और कंपंड चयनकर्ता हैं। इस उदाहरण में चार अलग-अलग चयनकर्ता शामिल हैं:

पी, .red, #sub, div a: link {color: # f00; }

तो यह सीएसएस नियम निम्नलिखित पर लागू होगा:

वह अंतिम चयनकर्ता एक यौगिक चयनकर्ता है। आप देख सकते हैं कि यह आसानी से इस सीएसएस नियम में अन्य चयनकर्ताओं के साथ संयुक्त है। उस नियम के साथ, हम इन 4 चयनकर्ताओं पर # f00 (जो लाल है) का रंग सेट कर रहे हैं, जो एक ही परिणाम प्राप्त करने के लिए 4 अलग चयनकर्ताओं को लिखना बेहतर है।

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

किसी भी चयनकर्ता को समूहीकृत किया जा सकता है

जैसा कि आप उपर्युक्त उदाहरणों से देख सकते हैं, किसी भी वैध चयनकर्ता को समूह में रखा जा सकता है, और सभी समूहीकृत तत्वों से मेल खाने वाले दस्तावेज़ में सभी तत्वों की शैली शैली के आधार पर समान शैली होगी।

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

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

या आप स्पष्टता के लिए अलग-अलग पंक्तियों पर शैलियों को सूचीबद्ध कर सकते हैं:

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

कई सीएसएस चयनकर्ताओं को समूहित करने के लिए आप जिस भी विधि का उपयोग करते हैं, वह आपकी साइट को गति देता है और शैलियों को दीर्घकालिक प्रबंधित करना आसान बनाता है।

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