लोड स्पीड सुधारण्यासाठी एकाधिक CSS निवडक गट
यशस्वी संकेतस्थळावर कार्यक्षमता हा महत्वाचा घटक आहे. ती साइट ऑनलाइन प्रतिमा कसे वापरते यामध्ये कार्यक्षम असावी हे साइट अभ्यागतांसाठी चांगली कामगिरी करेल आणि त्यांच्या डिव्हाइसवर त्वरीत लोड करेल याची खात्री करण्यात मदत करेल. कार्यक्षमतेने आपल्या संपूर्ण प्रक्रियेचा एक भाग देखील असावा, ज्यामुळे आपल्याला साइटची प्रगती वेळोवेळी आणि बजेटवर ठेवण्यास मदत होईल.
सरतेशेवटी, एखाद्या वेबसाईटच्या सृजन आणि दीर्घकालीन यशस्वीतेच्या सर्व पैलूंमध्ये कार्यक्षमता ही भूमिका निभावते, त्या साइटच्या सीएसएस शीटसाठी लिहिलेल्या शैलींचा समावेश करणे. झुकणे तयार करण्यात सक्षम असल्याने, स्वच्छ सीएसएस फाईल्स आदर्श आहेत आणि आपण हे साध्य करू शकणारे मार्ग म्हणजे एकापेक्षा जास्त सीएसएस सिलेक्टर्स एकत्र करून.
गटबद्ध करण्याचे निवडक
जेव्हा आपण सीएसएस सिलेक्टर्स समूह करता, तेव्हा आपण आपल्या स्टाइल शीटमध्ये स्टाईलची पुनरावृत्ती न करता विविध शैलीत समान शैली लागू करता. दोन किंवा तीन किंवा त्यापेक्षा जास्त सीएसएस नियमांऐवजी, जे सर्व एकाच गोष्ट करतात (उदा., लाल रंगाचे काहीतरी सेट), आपल्याकडे एक सिंगल सीएसएस नियम आहे जो आपल्या पृष्ठासाठी पूर्ण करतो.
हे "निवडकर्त्यांचे वर्गीकरण" हे पृष्ठास लाभदायक होण्याचे अनेक कारण आहेत. प्रथम ऑफेट, आपली शैली पत्रक लहान होईल आणि अधिक त्वरीत लोड होईल कबूल केल्याप्रमाणे, लोडिंग साइट्स धीमे करण्याच्या वेळी मुख्य शीख नसलेल्या स्टाईलशीट्स नसतात. सीएसएस फाईल्स टेक्स्ट फाईल्स आहेत, त्यामुळे अगदी लांबच लांब सी.एस.एस. शीट्स अप्रतिम प्रतिमाच्या तुलनेत लहान, फाईल-साइजनुसार आहेत. तरीही, प्रत्येक लहान संख्येची गणना करा, आणि जर आपण आपल्या सीएसएस चे काही आकार दाबले आणि किती वेगाने पृष्ठे लोड केली तर नेहमीच चांगली गोष्ट आहे
सर्वसाधारणपणे, साइट्सवरील सरासरी लोड वेग 3 सेकंदापेक्षा कमी आहे; 3 ते 7 सेकंदांबद्दल सरासरी आहे, आणि 7 सेकंदांहून अधिक फक्त खूप धीमे आहेत. या कमी संख्येचा अर्थ असा की, आपल्या साइटसह ते प्राप्त करण्यासाठी, आपल्याला शक्य ते सर्व करण्याची आवश्यकता आहे! म्हणूनच आपण आपली साइट गृहीत CSS निवडकर्त्यांचा वापर करुन जलद गतीने ठेवण्यात मदत करू शकता.
सीएसएस निवडकर्त्यांचा गट कसा आहे?
सीएसएस निवडकांना आपल्या शैलीच्या शीटमध्ये एकत्रित करण्यासाठी, आपण शैलीमध्ये एकाधिक गट निवडक विभक्त करण्यासाठी स्वल्पविराम वापरत आहात. खालील उदाहरणामध्ये, शैली p आणि div घटक प्रभावित करते:
div, p {रंग: # f00; }कॉमा मुळात म्हणजे "आणि" म्हणून हा सिलेअर सर्व परिच्छेद घटकांना आणि सर्व विभाग घटकांना लागू होतो. स्वल्पविराम गहाळ झाल्यास, त्याऐवजी सर्व भागाच्या घटक असतील जे एका विभागीय मुलाचे आहेत. तो एक वेगळा प्रकारचा निवडकर्ता आहे, त्यामुळे हे स्वल्पविराम खरोखरच निवडकर्त्याचा अर्थ बदलतो!
कोणत्याही प्रकारचे निवडकर्ता कोणत्याही अन्य निवडकर्त्याशी गटात समाविष्ट केला जाऊ शकतो. या उदाहरणात, एक क्लास बॉक्टर आयडी निवडकर्त्याशी गटात समाविष्ट केला आहे:
p.red, #sub {color: # f00; }तर ही शैली "लाल" च्या क्लास विशेषतासह कोणत्याही परिच्छेदावर लागू होते, आणि "उप" चे आयडी ऍट्रिब्यूट असलेल्या कोणत्याही घटकास (कारण आम्ही कोणत्या प्रकारची निर्दिष्ट केली नाही).
तुम्ही एकापेक्षा एक निवड समिती सदस्यांना एकत्र करू शकता, ज्यामध्ये एकच शब्द आणि निवडक निवडक आहेत. या उदाहरणात चार भिन्न निवडकर्ते समाविष्ट आहेत:
पी, .red, #sub, div a: link {color: # f00; }तर हा सीएसएस नियम पुढीलप्रमाणे लागू होईल:
- कोणताही परिच्छेद घटक
- "लाल" वर्गासह कोणताही घटक
- "उप" असलेल्या आयडीसह कोणताही घटक
- एखाद्या विभागातील दशकातील अँकर घटकांचा "दुवे" छद्म वर्ग.
तो शेवटचा निवडकर्ता एक मिश्रित निवडकर्ता आहे. आपण पाहू शकता की हे सहजपणे या सीएसएस नियमांमधील इतर निवडकांशी जोडले जाऊ शकते. त्या नियमासह, आम्ही या 4 निवडकर्त्यांवर # एफ 00 (जे लाल आहे) चा रंग सेट करत आहोत, जे समान परिणाम प्राप्त करण्यासाठी 4 वेगवेगळ्या निवडकांना लिहिण्यास श्रेयस्कर आहे.
गटबद्ध निवडकर्त्यांचा आणखी एक फायदा म्हणजे, जर तुम्हाला काही बदल करण्याची आवश्यकता असेल, तर आपण बहुविध विषयाऐवजी एकच सीएसएस नियम संपादित करू शकता. याचाच अर्थ असा की भविष्यात साइटला कायम राखण्यासाठी या पध्दतीमुळे तुमचे पृष्ठ वजन आणि वेळ वाचते.
कोणतीही निवडकर्ता गटबद्ध केला जाऊ शकतो
वरील उदाहरणात आपण बघू शकता त्याप्रमाणे कोणत्याही वैध निवडकर्ता एखाद्या गटात ठेवता येऊ शकतो आणि सर्व गटबद्ध घटकांशी जुळणार्या दस्तऐवजातील सर्व घटक त्या शैली मालमत्तेवर आधारित असलेली शैली असेल.
काही लोक कोडमध्ये सुवाच्यतेसाठी गटबद्ध घटकांची सूची वेगळ्या ओळींवर पसंत करतात. वेबसाइटवर दिसणारी आणि लोड गती समानच असते. उदाहरणार्थ, आपण स्वल्पविरामाने वेगळ्या केलेल्या कोडांच्या एका ओळीमध्ये एक शैली प्रॉपर्टी एकत्र करू शकता:
th, td, p.red, div # firstred {रंग: लाल; }
किंवा आपण स्पष्टतेसाठी स्वतंत्र ओळीवरील शैलींची सूची करू शकता:
व्या,
टीडी,
p.red,
div # firstred
{
रंग: लाल;
}
आपण एकाधिक सीएसएस सिलेक्ट करणार्या गटासाठी वापरत असलेल्या कोणत्याही पद्धतीमुळे आपल्या साइटची गती वाढते आणि शैली दीर्घकालीन व्यवस्थापित करणे सोपे करतात.
जेनिफर क्रिनिन द्वारे मूळ लेख. 5/8/17 रोजी जेरेमी गिरर्ड द्वारा संपादित