विषय
- उत्तरदायी चित्र
- प्रदर्शन
- सशर्त और आलसी लोडिंग
- उत्तरदायी टाइपोग्राफी
- जावास्क्रिप्ट में मीडिया प्रश्न
- प्रगतिशील वृद्धि
- ख़ाका
- सीएसएस ग्रिड लेआउट
- आखिरकार
उत्तरदायी वेब डिज़ाइन अविश्वसनीय रूप से सरल लगता है। लेआउट के लिए लचीले ग्रिड का विकल्प चुनें, लचीले मीडिया (छवियों, वीडियो, आईफ्रेम) का उपयोग करें, और किसी भी व्यूपोर्ट पर सामग्री को सर्वोत्तम रूप से व्यवस्थित करने के लिए इन मापों को अपडेट करने के लिए मीडिया क्वेरी लागू करें। व्यवहार में हमने सीखा है कि यह वास्तव में इतना आसान नहीं है। हर परियोजना के दौरान आने वाली छोटी-छोटी समस्याएं हमें अपना सिर खुजलाती हैं, और कभी-कभी हमारे डेस्क पर नाखूनों की खाइयों को भी तराशती हैं।
जब से मैंने रिस्पॉन्सिव डिज़ाइन वीकली न्यूज़लेटर को क्यूरेट करना शुरू किया है, मुझे वेब समुदाय के कई सदस्यों के साथ बात करने और उनके अनुभव सुनने का सौभाग्य प्राप्त हुआ है। मैं वास्तव में यह जानना चाहता था कि समुदाय वास्तव में क्या सीखना चाहता है, इसलिए मैंने पाठकों के लिए एक सर्वेक्षण परिचालित किया। यहाँ शीर्ष परिणाम हैं:
- उत्तरदायी चित्र
- प्रदर्शन सुधारना
- उत्तरदायी टाइपोग्राफी
- जावास्क्रिप्ट में मीडिया प्रश्न
- प्रगतिशील वृद्धि
- ख़ाका
उन विषयों को ध्यान में रखते हुए, मैंने अपने कुछ उद्योग जगत के नेताओं से उनके विचार पूछने के लिए पॉडकास्ट की एक श्रृंखला चलाई। उनके जवाबों में, एक बात एकमत थी: रोमांचक और उन्नत तकनीकों के बारे में चिंता करना शुरू करने से पहले मूल बातें प्राप्त करने पर ध्यान दें। चीजों को मूल बातों पर वापस ले जाकर, हम सभी के लिए एक मजबूत इंटरफ़ेस बनाने में सक्षम होते हैं, जब डिवाइस या उपयोगकर्ता के संदर्भ की अनुमति मिलती है तो सुविधाओं पर लेयरिंग करते हैं।
'तो ... इन उन्नत तकनीकों के बारे में क्या?' मैंने सुना है आप पूछते हैं। मुझे लगता है कि स्टीफन हे ने इसे सबसे अच्छा बताया जब उन्होंने कहा: 'अंतिम आरडब्ल्यूडी तकनीक किसी भी उन्नत आरडब्ल्यूडी तकनीकों का उपयोग न करके शुरू करना है। संरचित सामग्री से शुरू करें और अपना रास्ता बनाएं। केवल एक ब्रेकपॉइंट जोड़ें जब डिज़ाइन टूट जाए और सामग्री इसे निर्देशित करे और ... बस।'
इस लेख में, मैं बुनियादी बातों के साथ शुरू करूंगा और उन उन्नत तकनीकों के निर्माण के लिए स्थिति की अनुमति के अनुसार जटिलता की परतें जोड़ूंगा। आएँ शुरू करें।
उत्तरदायी चित्र
द्रव मीडिया RWD का एक महत्वपूर्ण हिस्सा था जब इसे पहली बार एथन मार्कोटे द्वारा परिभाषित किया गया था। चौड़ाई: 100%; , अधिकतम-चौड़ाई: १००%; आज भी काम करता है, लेकिन प्रतिक्रियाशील छवि परिदृश्य बहुत अधिक जटिल हो गया है। स्क्रीन आकार, पिक्सेल घनत्व और समर्थन के लिए उपकरणों की बढ़ती संख्या के साथ हम अधिक नियंत्रण चाहते हैं।
उत्तरदायी छवि समुदाय समूह (आरआईसीजी) द्वारा तीन मुख्य चिंताओं को परिभाषित किया गया था:
- छवि का किलोबाइट आकार हम तार पर भेज रहे हैं
- छवि का भौतिक आकार हम उच्च DPI उपकरणों को भेज रहे हैं
- व्यूपोर्ट के विशेष आकार के लिए कला दिशा के रूप में छवि फसल
Yoav Weiss, Indiegogo की मदद से, ब्लिंक कार्यान्वयन पर अधिकांश काम कर चुका है - Google का वेबकिट का कांटा, और जब तक आप इसे पढ़ रहे होंगे तब तक इसे क्रोम और फ़ायरफ़ॉक्स में भेज दिया जाएगा। सफारी 8 srcset शिप करेगा, हालांकि आकार विशेषता केवल रात के निर्माण में है और चित्र> अभी तक लागू नहीं किया गया है।
हमारी वेब विकास प्रक्रिया में कुछ भी नया आने से इसे शुरू करना मुश्किल हो सकता है। आइए चरण दर चरण एक उदाहरण के माध्यम से चलते हैं।
img !-- सभी गैर-चित्र समर्थित ब्राउज़रों के लिए फ़ॉलबैक छवि घोषित करें --> src="horse-350.webp" !-- srcset में सभी छवि आकार घोषित करें। प्रत्येक छवि की चौड़ाई के ब्राउज़र को सूचित करने के लिए w डिस्क्रिप्टर का उपयोग करके छवि की चौड़ाई शामिल करें।--> srcset="horse-350.webp 350w, हॉर्स-500.webp 500w, हॉर्स-1024.webp 1024w, हॉर्स.webp 2000w "!-- आकार हमारे साइट लेआउट के ब्राउज़र को सूचित करते हैं। यहां हम कह रहे हैं कि किसी भी व्यूपोर्ट के लिए जो 64ems और बड़ा है, एक ऐसी छवि का उपयोग करें जो व्यूपोर्ट के 70% हिस्से पर कब्जा कर ले -> आकार = "(न्यूनतम-चौड़ाई: 64em) 70vw, !-- यदि व्यूपोर्ट ऐसा नहीं है बड़ा, फिर किसी भी व्यूपोर्ट के लिए जो कि 37.5ems और बड़ा है, उस छवि का उपयोग करें जो व्यूपोर्ट के 95% हिस्से पर कब्जा करता है -> (न्यूनतम-चौड़ाई: 37.5em) 95vw, !-- और यदि व्यूपोर्ट उससे छोटा है, तो उपयोग करें एक छवि जो 100% व्यूपोर्ट पर कब्जा करती है-> 100vw" !-- हमेशा ऑल्ट टेक्स्ट होता है।--> alt="A हॉर्स" />
प्रदर्शन के दृष्टिकोण से यह मायने नहीं रखता कि आप आकार विशेषता में न्यूनतम-चौड़ाई या अधिकतम-चौड़ाई का उपयोग करते हैं - लेकिन स्रोत क्रम मायने रखता है। ब्राउज़र हमेशा पहले मिलान आकार का उपयोग करेगा।
साथ ही, याद रखें कि हम आकार विशेषता को सीधे हमारे डिज़ाइन के विरुद्ध परिभाषित करने के लिए हार्ड-कोडिंग कर रहे हैं। इससे आगे बढ़ने में समस्या हो सकती है। उदाहरण के लिए, यदि आप अपनी साइट को फिर से डिज़ाइन करते हैं, तो आपको सभी img> या चित्र> पर फिर से जाना होगा और आकारों को फिर से परिभाषित करना होगा। यदि आप सीएमएस का उपयोग कर रहे हैं, तो इसे आपकी निर्माण प्रक्रिया के हिस्से के रूप में दूर किया जा सकता है।
वर्डप्रेस में पहले से ही मदद करने के लिए एक प्लगइन है। यह WP मानक छवि किस्मों पर srcset को परिभाषित करता है और आपको केंद्रीय स्थान में आकार घोषित करने की अनुमति देता है। जब पृष्ठ डेटाबेस से उत्पन्न होता है, तो यह img> पर किसी भी उल्लेख को स्वैप कर देता है और उन्हें चित्र मार्कअप से बदल देता है।
बुनियादी
- इस बारे में सोचें कि क्या आपको वास्तव में एक छवि शामिल करने की आवश्यकता है। क्या छवि मूल सामग्री है, या यह सजावटी है? एक कम छवि का अर्थ होगा तेज़ लोड समय
- ImageOptim का उपयोग करके उन छवियों को अनुकूलित करें जिन्हें शामिल करने की आपको आवश्यकता है
- अपने सर्वर या .htaccess फ़ाइल पर अपनी छवियों के लिए समाप्ति शीर्षलेख सेट करें ('प्रदर्शन' के अंतर्गत विवरण देखें)
- पिक्चरफिल चित्रों के लिए पॉलीफिल समर्थन प्रदान करता है
उन्नत
- jQuery के आलसी लोड प्लगइन का उपयोग करके अपनी छवियों को आलसी लोड करें
- सुविधा का पता लगाने के लिए HTMLImageElement.Sizes और HTMLPictureElement का उपयोग करें।
- जीथब पर पाया गया उन्नत पिक्चरफिल WP प्लगइन, आपको कस्टम छवि चौड़ाई और आकार मान परिभाषित करने की अनुमति देगा
प्रदर्शन
हमारे पृष्ठों पर सबसे तेज़ कथित प्रदर्शन प्राप्त करने के लिए, हमें सर्वर से पहली प्रतिक्रिया के भीतर हमारे पृष्ठ के शीर्ष भाग को प्रस्तुत करने के लिए आवश्यक सभी HTML और CSS की आवश्यकता होती है। वह जादुई संख्या 14kb है और यह पहले राउंड-ट्रिप समय (RTT) के भीतर अधिकतम भीड़भाड़ वाली खिड़की के आकार पर आधारित है।
गार्जियन में फ्रंटएंड टेक्निकल लीड पैट्रिक हैमन और उनकी टीम ने फ्रंटएंड और बैकएंड तकनीकों के मिश्रण का उपयोग करके 1000ms बैरियर को तोड़ने में कामयाबी हासिल की है। गार्जियन का दृष्टिकोण यह सुनिश्चित करना है कि आवश्यक सामग्री - लेख - उपयोगकर्ता को जितनी जल्दी हो सके और 14kb मैजिक नंबर के भीतर वितरित किया जाए।
आइए प्रक्रिया को देखें:
- उपयोगकर्ता किसी समाचार के Google लिंक पर क्लिक करता है
- लेख के लिए डेटाबेस को एक एकल अवरोधन अनुरोध भेजा जाता है। कोई संबंधित कहानियों या टिप्पणियों का अनुरोध नहीं किया जाता है
- HTML को क्रिटिकल सीएसएस युक्त लोड किया गया है
- सिर में>
- एक 'सरसों को काटें' प्रक्रिया शुरू की जाती है और उपयोगकर्ता की डिवाइस सुविधाओं के आधार पर किसी भी सशर्त तत्व को लोड किया जाता है
- लेख से संबंधित या उसका समर्थन करने वाली कोई भी सामग्री (संबंधित लेख छवियां, लेख टिप्पणियां और इसी तरह) आलसी जगह में भरी हुई हैं
इस तरह महत्वपूर्ण प्रतिपादन पथ को अनुकूलित करने का मतलब है कि सिर> 222 लाइन लंबा है। हालांकि, उपयोगकर्ता को देखने के लिए महत्वपूर्ण सामग्री अभी भी 14kb प्रारंभिक पेलोड के भीतर आती है जब gzipped। यह वह प्रक्रिया है जो उस 1000ms रेंडरिंग बैरियर को तोड़ने में मदद करती है।
सशर्त और आलसी लोडिंग
सशर्त लोडिंग उपयोगकर्ता के अनुभव को उनकी डिवाइस सुविधा के आधार पर बेहतर बनाती है। मॉडर्निज़र जैसे उपकरण आपको इन सुविधाओं के लिए परीक्षण करने की अनुमति देते हैं, लेकिन ध्यान रखें कि सिर्फ इसलिए कि एक ब्राउज़र कहता है कि यह समर्थन प्रदान करता है, इसका मतलब हमेशा पूर्ण समर्थन नहीं होता है।
एक तकनीक तब तक लोड करना बंद करना है जब तक कि उपयोगकर्ता उस सुविधा का उपयोग करने का इरादा नहीं दिखाता। इसे सशर्त माना जाएगा। आप सामाजिक आइकनों में लोड करना तब तक रोक सकते हैं जब तक कि उपयोगकर्ता माउस पर होवर या स्पर्श न कर ले, या आप छोटे व्यूपोर्ट पर एक आईफ्रेम Google मानचित्र लोड करने से बच सकते हैं जहां उपयोगकर्ता एक समर्पित मैपिंग एप्लिकेशन से लिंक करना पसंद कर सकता है। एक और तरीका है 'सरसों को काटें' - इस पर विवरण के लिए ऊपर दिए गए बॉक्सआउट को देखें।
आलसी लोडिंग को उस चीज़ के रूप में परिभाषित किया जाता है जिसे आप हमेशा पृष्ठ पर लोड करने का इरादा रखते हैं - ऐसी छवियां जो लेख, टिप्पणियों या अन्य संबंधित लेखों का एक हिस्सा हैं - लेकिन उपयोगकर्ता को सामग्री का उपभोग शुरू करने के लिए वहां होने की आवश्यकता नहीं है।
बुनियादी
- फ़ाइलों के लिए gzipping सक्षम करें और सभी स्थिर सामग्री के लिए समाप्ति शीर्षलेख सेट करें (netm.ag/expire-260)
- आलसी लोड jQuery प्लगइन का प्रयोग करें। यह व्यूपोर्ट के पास आने पर, या एक निश्चित अवधि के बाद छवियों को लोड करता है
उन्नत
- Fastly या CloudFlare सेट करें। सामग्री वितरण नेटवर्क (सीडीएन) आपकी स्थिर सामग्री को आपके स्वयं के सर्वर की तुलना में तेजी से उपयोगकर्ताओं तक पहुंचाते हैं, और कुछ निःशुल्क स्तर होते हैं
- समानांतर http अनुरोधों जैसी http2 सुविधाओं का लाभ उठाने के लिए http2-सक्षम ब्राउज़रों के लिए SPDY सक्षम करें
- सामाजिक गणना आपके सामाजिक चिह्नों को सशर्त लोड करने की अनुमति देती है
- स्टेटिक मैप्स एपीआई का उपयोग करने से आप छवियों के लिए इंटरएक्टिव गूगल मैप्स को स्विच आउट कर सकेंगे। netm.ag/static-260 . पर ब्रैड फ्रॉस्ट के उदाहरण पर एक नज़र डालें
- अजाक्स पैटर्न शामिल करें डेटा-पहले, डेटा-बाद या डेटा-प्रतिस्थापन विशेषता से सामग्री स्निपेट लोड करेगा
उत्तरदायी टाइपोग्राफी
टाइपोग्राफी आपकी सामग्री को पचाने में आसान बनाने के बारे में है। उत्तरदायी टाइपोग्राफी इसका विस्तार विभिन्न प्रकार के उपकरणों और व्यूपोर्ट में पठनीयता सुनिश्चित करने के लिए करती है। जॉर्डन मूर मानते हैं कि टाइप एक ऐसी चीज है जिस पर वह हिलने को तैयार नहीं हैं। यदि आपको आवश्यकता हो तो एक या दो चित्र छोड़ें, लेकिन सुनिश्चित करें कि आपके पास बढ़िया प्रकार है।
स्टीफन हे एचटीएमएल फ़ॉन्ट आकार को 100 प्रतिशत पर सेट करने का सुझाव देते हैं (पढ़ें: इसे वैसे ही छोड़ दें) क्योंकि प्रत्येक ब्राउज़र या डिवाइस निर्माता किसी विशेष रिज़ॉल्यूशन या डिवाइस के लिए उचित रूप से पठनीय डिफ़ॉल्ट बनाता है। अधिकांश डेस्कटॉप ब्राउज़र के लिए यह 16px है।
दूसरी ओर, मूर कुछ सामग्री तत्वों के लिए न्यूनतम फ़ॉन्ट आकार निर्धारित करने के लिए REM इकाई और HTML फ़ॉन्ट-आकार का उपयोग करता है। उदाहरण के लिए, यदि आप चाहते हैं कि किसी लेख की बायलाइन हमेशा 14px हो, तो उसे HTML तत्व पर आधार फ़ॉन्ट-आकार के रूप में सेट करें और .byline {font-size: 1rem;} सेट करें। जैसे ही आप बॉडी को स्केल करते हैं: font-size: व्यूपोर्ट के अनुरूप आप .by-line स्टाइल को प्रभावित नहीं करेंगे।
एक अच्छी पठन पंक्ति की लंबाई भी महत्वपूर्ण है - 45 से 65 वर्णों का लक्ष्य रखें। एक बुकमार्कलेट है जिसका उपयोग आप अपनी सामग्री की जांच के लिए कर सकते हैं। यदि आप अपने डिजाइन के साथ कई भाषाओं का समर्थन कर रहे हैं, तो लाइन की लंबाई भी भिन्न हो सकती है। मूर सुझाव देते हैं कि :lang(de) article {max-width: 30em} किसी भी मुद्दे को कवर करने के लिए उपयोग करें।
लंबवत लय बनाए रखने के लिए, सामग्री ब्लॉक, ul>, ol>, blockquote>, table>, blockquote> और इसी तरह, अपनी लाइन-ऊंचाई के समान मार्जिन-बॉटम सेट करें। यदि छवियों के परिचय से लय बाधित होती है तो आप इसे Baseline.js या BaselineAlign.js जोड़कर ठीक कर सकते हैं।
बुनियादी
- अपने फ़ॉन्ट को 100 प्रतिशत बॉडी पर आधारित करें
- सापेक्ष ईएम इकाइयों में काम करें
- अपने डिज़ाइन में लंबवत लय बनाए रखने के लिए अपने मार्जिन को अपनी लाइन ऊंचाई पर सेट करें
उन्नत
- एन्हांस.जेएस या आस्थगित फ़ॉन्ट लोडिंग के साथ फ़ॉन्ट लोडिंग प्रदर्शन में सुधार करें
- शब्दार्थ शीर्षकों के लिए Sass @includes का उपयोग करें।
- अक्सर हमें साइडबार विजेट में h5 शैली का उपयोग करने की आवश्यकता होती है जिसके लिए h2 मार्कअप की आवश्यकता होती है। आकार को नियंत्रित करने और नीचे दिए गए कोड के साथ अर्थपूर्ण बने रहने के लिए दाढ़ी वाले टाइपोग्राफिक मिक्सिन का उपयोग करें:
.साइडबार h2 { @include हेडिंग-5 }
जावास्क्रिप्ट में मीडिया प्रश्न
जब से हम मीडिया प्रश्नों के माध्यम से विभिन्न व्यूपोर्ट्स में लेआउट को नियंत्रित करने में सक्षम हुए हैं, तब से हम इसे अपने जावास्क्रिप्ट को चलाने में जोड़ने का एक तरीका ढूंढ रहे हैं। कुछ व्यूपोर्ट चौड़ाई, ऊंचाई और ओरिएंटेशन पर जावास्क्रिप्ट को सक्रिय करने के कुछ तरीके हैं, और कुछ स्मार्ट लोगों ने Enquire.js और Simple State Manager जैसे कुछ उपयोग में आसान देशी JS प्लगइन्स लिखे हैं। आप इसे मैचमीडिया का उपयोग करके स्वयं भी बना सकते हैं। हालांकि, आपके पास समस्या है कि आपको अपने मीडिया प्रश्नों को अपने सीएसएस और जावास्क्रिप्ट में डुप्लिकेट करने की आवश्यकता है।
आरोन गुस्ताफसन के पास एक साफ-सुथरी तरकीब है, जिसका अर्थ है कि आपको अपने सीएसएस और अपने जेएस में अपने मीडिया प्रश्नों का प्रबंधन और मिलान करने की आवश्यकता नहीं है। यह विचार मूल रूप से जेरेमी कीथ से आया था और इस उदाहरण में गुस्ताफसन ने इसे पूर्ण रूप से लागू किया है।
getActiveMQ (netm.ag/media-260) का उपयोग करके, div#getActiveMQ-watcher को बॉडी एलिमेंट के अंत में इंजेक्ट करें और इसे छुपाएं। फिर CSS के भीतर #getActiveMQ-watcher {font-family: break-0;} पहले मीडिया क्वेरी के लिए, font-family: break-1; दूसरे के लिए, फ़ॉन्ट-परिवार: ब्रेक -2; तीसरे और इतने पर।
यह देखने के लिए कि व्यूपोर्ट का आकार बदल गया है या नहीं, स्क्रिप्ट watchResize() (netm.ag/resize-260) का उपयोग करती है, और फिर सक्रिय फ़ॉन्ट-फ़ैमिली को वापस पढ़ती है। अब आप इसका उपयोग JS एन्हांसमेंट को हुक करने के लिए कर सकते हैं जैसे dl> में टैब्ड इंटरफ़ेस जोड़ना, जब व्यूपोर्ट अनुमति देता है, लाइटबॉक्स के व्यवहार को बदलना, या डेटा तालिका के लेआउट को अपडेट करना। getActiveMQ कोडपेन को netm.ag/active-260 पर देखें।
बुनियादी
- विभिन्न व्यूपोर्ट के लिए जावास्क्रिप्ट को भूल जाइए। उपयोगकर्ताओं को सामग्री और वेबसाइट फ़ंक्शन इस तरह प्रदान करें कि वे इसे सभी व्यूपोर्ट में एक्सेस कर सकें। हमें कभी भी जावास्क्रिप्ट की आवश्यकता नहीं होनी चाहिए
उन्नत
- मीडिया प्रश्नों की पूर्वनिर्धारित सूची के रूप में ब्रेकअप का उपयोग करके और getActiveMQ-watcher के लिए फ़ॉन्ट परिवारों की सूची के निर्माण को स्वचालित करके गुस्ताफसन की विधि का विस्तार करें।
प्रगतिशील वृद्धि
प्रगतिशील वृद्धि के बारे में एक आम गलत धारणा यह है कि लोग सोचते हैं, 'ओह, मैं इस नई सुविधा का उपयोग नहीं कर सकता', लेकिन वास्तव में, यह विपरीत है। प्रोग्रेसिव एन्हांसमेंट का मतलब है कि आप एक सुविधा प्रदान कर सकते हैं यदि यह केवल एक या यहां तक कि किसी भी ब्राउज़र में समर्थित नहीं है, और समय के साथ नए संस्करण आने पर लोगों को एक बेहतर अनुभव मिलेगा।
यदि आप किसी भी वेबसाइट के मुख्य कार्य को देखते हैं, तो आप उसे HTML के रूप में वितरित कर सकते हैं और सर्वर की ओर से सभी प्रसंस्करण कर सकते हैं। भुगतान, प्रपत्र, पसंद, साझाकरण, ईमेल, डैशबोर्ड - यह सब किया जा सकता है। एक बार बुनियादी कार्य बन जाने के बाद हम उसके ऊपर भयानक तकनीकों को परत कर सकते हैं, क्योंकि हमारे पास उन लोगों को पकड़ने के लिए सुरक्षा जाल है जो गिरते हैं। हमने जिन उन्नत दृष्टिकोणों के बारे में यहां बात की है उनमें से अधिकांश प्रगतिशील वृद्धि पर आधारित हैं।
ख़ाका
लचीला लेआउट कहना आसान है, लेकिन इसके कई अलग-अलग दृष्टिकोण हैं। :nth-child() चयनकर्ता का उपयोग करके कम मार्कअप के साथ सरल ग्रिड लेआउट बनाएं।
/* ग्रिड के लिए मोबाइल की पहली चौड़ाई घोषित करें */ .grid-1-4 {float:left; चौड़ाई: 100%; } /* जब व्यूपोर्ट कम से कम 37.5em हो तो ग्रिड को 50% प्रति तत्व पर सेट करें */ @media (न्यूनतम-चौड़ाई: 37.5em) { .grid-1-4 {चौड़ाई: 50%; } /* पहले के बाद हर दूसरे तत्व में फ्लोट को साफ करें। यह ग्रिड में तीसरे, 5वें, 7वें, 9वें... को लक्षित करता है।*/ .grid-1-4:nth-of-type(2n+1) { clear: left; } } @मीडिया (न्यूनतम-चौड़ाई: 64em) {.ग्रिड-1-4 {चौड़ाई: 25%; } /* पिछला स्पष्ट हटाएं*/ .grid-1-4:nth-of-type(2n+1) { clear: none; } /* पहले के बाद प्रत्येक चौथे तत्व फ्लोट को साफ़ करें। यह ग्रिड में 5वें, 9वें... को लक्षित करता है।*/ .grid-1-4:nth-of-type(4n+1) { clear: left; } }
स्थिति का उपयोग करने के लिए अलविदा कहें और अपने लेआउट के लिए तैरें। जबकि उन्होंने आज तक हमारी अच्छी सेवा की है, लेआउट के लिए उनका उपयोग एक आवश्यक हैक रहा है। अब हमारे पास ब्लॉक में दो नए बच्चे हैं जो हमारी सभी लेआउट समस्याओं - फ्लेक्सबॉक्स और ग्रिड को ठीक करने में मदद करेंगे।
फ्लेक्सबॉक्स व्यक्तिगत मॉड्यूल के लिए बहुत अच्छा है, प्रत्येक मॉड्यूल के भीतर सामग्री के टुकड़ों के लेआउट को नियंत्रित करता है। ऐसे लेआउट हैं जिन्हें हम वितरित करने का प्रयास करते हैं जिन्हें फ्लेक्सबॉक्स का उपयोग करके अधिक आसानी से प्राप्त किया जा सकता है, और यह उत्तरदायी साइटों के साथ और भी अधिक सच है। इस पर अधिक जानकारी के लिए, फ्लेक्सबॉक्स या फ्लेक्सबॉक्स पॉलीफिल के लिए सीएसएस ट्रिक्स गाइड देखें।
सीएसएस ग्रिड लेआउट
मैक्रो लेवल लेआउट के लिए ग्रिड अधिक है। ग्रिड लेआउट मॉड्यूल आपको अपने सीएसएस के भीतर अपने लेआउट का वर्णन करने का एक शानदार तरीका देता है। हालांकि यह अभी भी मसौदा चरण में है, मैं इस लेख को राहेल एंड्रयू द्वारा सीएसएस ग्रिड लेआउट पर सुझाता हूं।
आखिरकार
आपके प्रतिक्रियाशील अभ्यास को बढ़ाने के लिए ये कुछ सुझाव हैं। किसी भी नए उत्तरदायी कार्य के लिए, एक कदम पीछे हटें और सुनिश्चित करें कि आपको मूल बातें सही हैं। अपनी सामग्री, एचटीएमएल और उन पर परत के बेहतर अनुभवों से शुरू करें और आप अपने डिजाइन कहां ले जा सकते हैं इसकी कोई सीमा नहीं होगी।
यह लेख मूल रूप से के अंक २६० में प्रकाशित हुआ था शुद्ध पत्रिका.
