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