क्या मुझे प्रत्येक स्क्रीन आकार के लिए एक बड़ी सीएसएस मीडिया क्वेरीज़ को अलग-अलग फाइलों में विभाजित करना चाहिए?

Question

मैं सभी स्क्रीन आकारों के लिए सामग्री वितरित करने के लिए एक उत्तरदायी डिज़ाइन वेबसाइट पर काम कर रहा हूं। मेरे पास 5 अलग-अलग "चरणों" के लिए मीडिया क्वेरी है, और सीएसएस फ़ाइल लगभग 30 Kb है।

क्या इसे अलग फ़ाइलों में विभाजित करना और उन्हें इसके समान बनाना बेहतर होगा:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

या मुझे उन्हें एक सीएसएस फ़ाइल में रखना चाहिए?

अद्यतन: मैं बस जोड़ना चाहता था, मेरी मुख्य चिंता ब्राउज़र / डिवाइस पेज खोलने / प्रतिपादन की गति थी, विकास में आसानी नहीं थी।

Comments

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

— केविन व्हीलर

Answer 1

मुझे लगता है कि यह वास्तव में इस बात पर निर्भर करता है कि आपको विकास के लिए सबसे आसान क्या मिल रहा है और आपको एक सुव्यवस्थित स्टाइलशीट रखने में मदद मिलती है।

केवल वास्तविक नकारात्मक पहलू जो मैं बंटवारे के बारे में सोच सकता हूं, वह यह है कि आपके सभी स्टाइलशीट में एक तत्व की विशेषता दिखाई देनी चाहिए, आपको इसे बदलने के लिए 5 अलग-अलग फ़ाइलों को अपडेट करना होगा (बजाय इसके कि यह एक जगह पर साइड-बाय-साइड दिखाई दे)।

इस पोस्ट पर उत्तर के अनुसार, ब्राउज़र सभी स्टाइलशीट को ध्यान से डाउनलोड करेगा, इसलिए रिज़ॉल्यूशन पर विभाजन बैंडविड्थ-सेवर नहीं है: /programming/16657159/when-using-media-queries-does-a -phone लोड गैर-प्रासंगिक-प्रश्नों और छवियों

Comments

आप जिस पोस्ट से जुड़े हैं, क्या आप जानते हैं कि "सीएसएसओएम की सीमा है" से उसका क्या मतलब है?

— असंतुष्टगीतगुट

CSS Object Model - dev.w3.org/csswg/cssom - मेरा मानना ​​है कि यह परिभाषित करता है कि CSS को कैसे संभाला जाना चाहिए, और इसलिए मुझे लगता है कि वह जिस सीमा को संदर्भित करता है वह ऐसा मॉडल नहीं होगा जो ऐसी शैलियों को अधिक बैंडविड्थ की बचत में संभालता है मार्ग।

— रिचर्ड बी

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

— डोरल

Answer 2

यह थोड़ा इस बात पर निर्भर करता है कि आप क्या हासिल करना चाहते हैं: क्या आप अपना पेज लोड तेज़ी से करने की कोशिश कर रहे हैं या आप विकास को आसान बनाने की कोशिश कर रहे हैं?

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

यदि आप चाहते हैं कि आपके सर्वोत्तम दांव की तुलना में तेज़ लोडिंग पृष्ठ अनुरोधों की मात्रा को कम से कम कर दे, क्योंकि एक अनुरोध ओवरहेड काफी बड़ा है। इसके अलावा आप अपने लिए एक विकास संस्करण रख सकते हैं और वेब पर एक न्यूनतम सीएसएस की सेवा कर सकते हैं (मुझे लगता है कि यूयूआई एक अच्छा तरीका है: http://www.refresh-sf.com/yui/ )।

आगे मैं स्वयं css को ऑप्टिमाइज़ करने की कोशिश करूँगा। आप उन वर्गों को मिलाने का प्रयास कर सकते हैं जो बहुत समान हैं, उदाहरण के लिए:

.bold-and-italic { font-weight: bold; text-style: italic; }

में परिवर्तित किया जा सकता है:

.bold { font-weight: bold; }
.italic { text-style: italic; }

केवल एक चीज आप से थोड़ा एचटीएमएल बदलना होगा है <span class="bold-and-italic">foo bar</span>में<span class="bold italic">foo bar</span>

मैं आपको बूटस्ट्रैप ( http://getbootstrap.com ) पर एक नज़र डालने का सुझाव दे सकता हूं , इन लोगों ने कक्षाओं को कई 'सब-क्लास' में विभाजित करने में बहुत अच्छा काम किया है।

आशा है कि ये आपकी मदद करेगा।

Comments

शैली के नाम पर कक्षाएं खराब रूप हैं। यदि आप उस पर जा रहे हैं तो एक शैली विशेषता भी डाल सकते हैं। वर्गों को तार्किक नाम देना बेहतर है। जैसे.important

— d

Answer 3

यह शायद केवल एक सीएसएस फ़ाइल के लिए सबसे अच्छा है, लेकिन इसे छोटा और छोटा करने के लिए। यह मानते हुए कि आपका 30KB ऐसा करने से पहले है, तो आपको फ़ाइल का आकार लगभग 5KB तक मिनिमाइज़ेशन (सफ़ेद स्पेस रिमूवल) और जिपिंग के साथ मिल जाएगा।

बंटवारा शायद आपको कुछ और स्पीडअप मिलेगा, लेकिन केवल कुछ शर्तों के तहत।

• आपको यह सुनिश्चित करना होगा कि प्रत्येक समय केवल एक स्टाइलशीट भरी जाए - अन्यथा आपको दो या दो से अधिक HTTP अनुरोधों की आवश्यकता होगी, जो अपने आप में एक ओवरहेड है, जो कम से कम आंशिक रूप से छोटे फ़ाइल आकार से लाभ को नकार देगा। ऐसा करने के लिए, यह केवल स्टाइलशीट को विभाजित करने और विभिन्न मीडिया विशेषताओं के साथ कई -टैग सम्मिलित करने के लिए पर्याप्त नहीं है <link>, ब्राउजर <link>मीडिया प्रश्नों की परवाह किए बिना सभी एड स्टाइलशीट लोड करने के लिए लगता है (इस जानकारी के लिए @cimmanon के लिए धन्यवाद, यह नहीं पता था) ।
• स्टाइल शीट के बीच साझा किए गए सीएसएस नियमों की संख्या छोटी होनी चाहिए - अन्यथा प्रत्येक मल्टी स्टाइलशीट में सभी सामान्य नियमों को शामिल करने की आवश्यकता होगी और इस प्रकार मूल का आकार लगभग होगा।
• आप एक सीएसएस प्रीप्रोसेसर (या कुछ इसी तरह) का उपयोग करते हैं, इसलिए 5 स्टाइलशीट में समान कोड टुकड़े होना प्रबंधनीय है।

इसके अलावा: समय से पहले अनुकूलन न करें। केवल तभी करें जब आपको प्रदर्शन की समस्या हो।

Comments

यह ध्यान देने योग्य है कि यदि आप <link rel="stylesheet" />अपनी सभी मीडिया क्वेरी विशिष्ट फ़ाइलों के लिए टैग का उपयोग कर रहे हैं , तो आप ब्राउज़र को डाउनलोड करने से नहीं रोक पाएंगे। आपको व्यूपोर्ट आयामों की जांच करने और उचित स्टाइल शीट को इंजेक्ट करने के लिए सर्वर की तरफ या जावास्क्रिप्ट का उपयोग करते हुए ब्राउज़र सूँघना होगा। इनमें से कोई भी अच्छा विकल्प नहीं है।

— cimmanon

मैं थोड़ा आश्चर्यचकित हूं, लेकिन आप सही हैं - मैंने सोचा था कि <link>-tag में मीडिया-विशेषता को जोड़ने से गैर-मिलान वाली शैलियों को लोड करने से रोका जा सकता है। ब्राउज़र ऐसा क्यों करते हैं? यह निश्चित रूप से स्टाइलशीट्स को विभाजित नहीं करने का एकमात्र सबसे महत्वपूर्ण कारण है ।

— जोस्ट

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

— MrCarrot

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

— d

Answer 4

आपको मीडिया के प्रश्नों के आधार पर अपनी CSS फाइलों को विभाजित करना चाहिए क्योंकि CSS फाइलें ब्लॉकिंग रेंडर हैं।

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

यह async को जावास्क्रिप्ट स्क्रिप्ट टैग में जोड़ने के लिए भी जाता है; पूर्व .: <script src='myfile.js' async></script>।

DOM को आपके JS फाइल के लोड होने का इंतज़ार नहीं करना है। यदि आपके DOM के निर्माण में किसी भी तरह के जावास्क्रिप्ट की आवश्यकता नहीं है, तो केवल async जोड़ें।

Comments

मैंने यह दावा किया है कि यदि आप वास्तव में अपने async लिपियों को संभावित देरी प्रदान करने के लिए नहीं चाहते हैं, तो उन्हें async का उपयोग करने के बजाय window.onload घटना पर निष्पादित करें।

— केविन व्हीलर

Answer 5

मैं यह कहना चाहूंगा।

उत्पादन के लिए, उन्हें हमेशा एक फ़ाइल में रखें; इसका कारण यह है कि यह ब्राउज़र के लिए अधिक कुशल है, और विकास से उत्पादन तक बढ़ते समय यह आपकी प्राथमिक रुचि (IMO) होनी चाहिए।

विकास मछली की एक अलग केतली है। मैं मीडिया के प्रश्नों को विभाजित करना चाहता हूं ताकि वे जो भी तत्व हों, जैसे:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

जैसा कि आम तौर पर अगर मैं एक तत्व को बदल रहा हूं, तो मुझे सीएसएस के लिए पूरे स्थान पर शिकार नहीं करना है (हालांकि आप grep जैसी किसी चीज का उपयोग कर सकते हैं ...)।

लेकिन , एक बात मैं कहूंगा कि यह साइट पर ही विचार करने के लायक है, विकास प्रक्रिया और नरम। यदि आप वास्तव में सोचते हैं कि यह स्क्रीन आकार-आधारित फ़ाइलों में उन्हें अलग करने के लायक होगा, तो इसे दें। साइट की एक प्रति बनाएँ (यदि संभव हो), तो कॉपी के साथ एक नाटक करें - यदि यह आसान बनाता है, तो इसका उपयोग करें। आपको वेबसाइट को विकसित करने के लिए एक आकार-फिट-सभी प्रतिमान का पालन करने की आवश्यकता नहीं है।

Answer 6

सरल: 1 स्टाइलशीट का उपयोग करें और सीएसएस शैलियों को खोजने और बदलने में आसान बनाने के लिए उनमें केवल टिप्पणियां जोड़ें जैसे:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

यदि आप चाहते हैं कि आप कई शैलियों का उपयोग कर सकें और उन्हें प्रत्येक विशिष्ट आकार के लिए कॉल कर सकें।

Answer 7

मैं बल्कि बूटस्ट्रैप को देखूंगा । यह 1 CSS फ़ाइल है जिसमें सभी CSS हैं। यह लगभग 99% ब्राउज़रों पर काम करता है और बेहद संवेदनशील है।

लाइव डेमो पर एक ज़ूम इन ( Ctrl += ज़ूम इन, Ctrl -= ज़ूम आउट, Ctrl 0= सामान्य) पर क्लिक करें या अपने मोबाइल पर खोलें कि यह कैसे दिखाई देता है।

Comments

वह पहले से ही CSS के 30kb लिख चुके हैं, बूटस्ट्रैप पर स्विच करना कैसे फायदेमंद हो सकता है?

— स्टीव सैंडर्स

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

— Regardt Ogies Myburgh