प्रस्तुत सीएसएस ग्रिड संरेखण स्तर 3

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



एक मूल समाधान प्रस्तुत करने का वादा करके, मैं थोड़ा चालाक था क्योंकि यह समाधान नए W3C CSS ग्रिड संरेखण स्तर 3 मानक का उपयोग कर रहा है, जिसे नवंबर की शुरुआत में TPAC 2010 इवेंट में पेश किया गया था।



हेबर पर एक कार्य प्रकाशित करना , मैं डेवलपर्स से समाधान देखना चाहता था और यह समझने की कोशिश करना चाहता था कि नया मानक हमारे जीवन को कैसे आसान बना सकता है।

सीएसएस ग्रिड संरेखण स्तर 3

सबसे पहले, यह समझाने के लायक है कि यह किस तरह का मानक है। CSS Grid Alignment Level 3 एक नया लेआउट मॉडल है जिसे CSS3 मानक के भाग के रूप में प्रस्तावित किया गया है। सिद्धांत रूप में, नए मानक को जटिल, वेब पेज लेआउट मॉडल सहित विभिन्न निर्माण के लिए एक सरलीकृत, मानकीकृत तरीका पेश करना चाहिए।



यदि आप मेरे द्वारा प्रस्तावित समस्या को हल करने के विकल्पों को देखते हैं, तो आपको बहुत सी हैक और सीएसएस ऑपरेटरों के उपयोग उनके इच्छित उद्देश्य के लिए नहीं दिखाई देंगे। हल करने के लिए, हमने फ्लोट का उपयोग किया: बाएं, नकारात्मक मार्जिन मान, स्थिति: सापेक्ष, अतिप्रवाह: छिपा हुआ। डेवलपर्स के लिए, यह इतना सामान्य हो गया है कि मुझे यकीन है कि कई लोग पेज लेआउट मॉडल को एक सामान्य चीज बनाते समय इस तरह के फैसले पर विचार करते हैं।



हालाँकि, मुझे लगता है कि कई लोग वेब मानकों के विकास के साथ समस्या को हल करने के लिए अधिक सरल, सहज तरीके देखना चाहेंगे। और CSS Grid Alignment Level 3 एक ऐसा तरीका प्रदान करता है। एक उदाहरण पर विचार करें:







ऐसे लेआउट को नए मानक का उपयोग करके निम्नलिखित कोड प्राप्त किया जा सकता है:







नए मानक के बिना इस कार्य को हल करने के लिए आप क्या करेंगे? ब्याज की गणना, मार्जिन, फ्लोट आदि के साथ काम करना। नया मानक पूरी तरह से अलग शैली प्रदान करता है।



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



इसके अलावा, ध्यान दें कि नए सीएसएस ग्रिड संरेखण स्तर 3 मानक के साथ, आपको नेस्टेड ब्लॉक के आदेश का पालन करने की आवश्यकता नहीं है, लेआउट मार्कअप में टैग के आदेश पर निर्भर नहीं करता है।

मुक्त स्थान के लिए अनुकूलन

नए मानक की एक महत्वपूर्ण विशेषता पृष्ठ पर मुक्त स्थान के अनुकूलन के लिए समर्थन है। दूसरे शब्दों में, रबर टंकण की समस्या का एक लचीला समाधान प्रस्तावित है।



एक उदाहरण लेआउट है, जो मानता है कि पहले कॉलम में न्यूनतम सामग्री के बराबर न्यूनतम चौड़ाई होगी, अधिकतम सामग्री के बराबर अधिकतम चौड़ाई होगी, दूसरा कॉलम न्यूनतम सामग्री से अधिकतम संभव मूल्य तक रबर होगा।







इस मामले में कोड इस प्रकार होगा:







ग्रिड-पंक्ति-संरेखित और ग्रिड-स्तंभ-संरेखण पर ध्यान दें - यह ग्रिड के अंदर ब्लॉक के संरेखण को निर्दिष्ट करने की क्षमता है।



Fr और minmax क्या हैं?



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



उदाहरण के लिए, minmax (300px, 500px)। ये फ़ंक्शन के पूर्ण मान हैं। ग्रेटर लचीलेपन को संबंधित न्यूनतम सामग्री और अधिकतम सामग्री द्वारा प्रदान किया जाता है, जो ब्लॉक और अधिकतम में तत्व की न्यूनतम चौड़ाई के मूल्यों को लेते हैं।



एक नए आयाम का उपयोग, अंश, और भी अधिक लचीलापन देता है। एक अंश इस स्थान के लिए आवेदन करने वाले सभी ब्लॉकों के बीच मुक्त स्थान का एक अंश है। यही है, दो ऐसे ब्लॉक हैं, फिर ब्लॉक का 1 एफआर खाली स्थान का आधा है।



इस प्रकार, निम्नलिखित उदाहरण हमें बताता है कि ग्रिड में 4 कॉलम होने चाहिए:

1. 100 पीपीआई
2. मुक्त स्थान का एक हिस्सा
3. अधिकतम सामग्री के लिए आवश्यक चौड़ाई
4. न्यूनतम सामग्री की न्यूनतम चौड़ाई के साथ लचीला स्तंभ, अधिकतम - मुक्त स्थान का एक हिस्सा

चूंकि दो कॉलम 2 और 4 मुक्त स्थान के पृथक्करण में भाग लेते हैं, इसलिए पहले कॉलम के 100 पिक्सल और तीसरे कॉलम में अधिकतम सामग्री की चौड़ाई को घटाकर मुक्त स्थान का आधा हिस्सा दूसरे के लिए पेश किया जाएगा।

HTML स्वतंत्रता

मानक का पाठ एक उदाहरण की जांच करता है जो HTML मार्कअप में ब्लॉकों के क्रम से लेआउट परिणाम की स्वतंत्रता के महत्व को दर्शाता है। उदाहरण के लिए, नीचे दिए गए दो विकल्प CSS बदलने के परिणाम हैं, लेकिन HTML मार्कअप नहीं।







विवरण के लिए खंड 2.3 स्रोत स्वतंत्रता देखें।

समस्या हल करना

नए मानक की मदद से मैंने पहले प्रस्तुत की गई समस्या का क्या समाधान है?







वास्तव में - बहुत स्पष्ट रूप से और सुरुचिपूर्ण ढंग से:







यहाँ क्या परिभाषित किया गया है पर विचार करें:

1. 2 कॉलम और 2 पंक्तियों के साथ एक ग्रिड को परिभाषित किया गया है, और दोनों पंक्तियों और स्तंभों को अपेक्षाकृत मुक्त स्थान के बराबर शेयरों पर कब्जा करना चाहिए;
2. ब्लॉक ए के लिए, यह कहा जाता है कि यह पहली पंक्ति में दूसरी पंक्ति के विस्तार के साथ दूसरी पंक्ति में स्थित है। इसके अलावा, ब्लॉक ए को पंक्ति के नीचे संरेखित करना चाहिए;
3. ब्लॉक बी के लिए, यह कहा जाता है कि यह पहली पंक्ति के पहले कॉलम में स्थित है, और इसे एक परत संख्या = 10 सौंपा गया है;
4. ब्लॉक सी के लिए, यह कहा जाता है कि यह पहली पंक्ति के दूसरे कॉलम में स्थित है, और पंक्ति के शीर्ष पर गठबंधन किया गया है, इसके साथ ही एक नकारात्मक मार्जिन मूल्य भी लागू किया जाएगा;
5. ब्लॉक डी के लिए, यह कहा जाता है कि यह दूसरी पंक्ति के दूसरे कॉलम में स्थित है, और कॉलम के दाहिने किनारे और पंक्ति के शीर्ष पर गठबंधन किया गया है;
6. ब्लॉक ई के लिए, यह कहा जाता है कि यह पहली पंक्ति के पहले स्तंभ में स्थित है जबकि दो पंक्तियों और दो स्तंभों तक फैला है, जबकि स्तंभों के केंद्र और पंक्तियों के केंद्र के साथ संरेखित किया गया है। इसके अलावा, इसे एक परत संख्या = 5 सौंपा गया है।

इस समाधान की तुलना करें, जो केवल लेआउट की शर्तों के साथ संचालित होता है, जिस समाधान के साथ आज की पेशकश की जाती है, जिसमें वाम, शीर्ष, मार्जिन और अन्य की कई संपत्तियों के स्पष्ट प्रतिशत में हेरफेर करके स्थिति, फ्लोट और अतिप्रवाह की स्थापना की जाती है। मेरी राय में, सब कुछ बहुत बेहतर हो गया है।

निष्कर्ष

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



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