सीएसएस मार्कअप का भविष्य

CSS3 पर एक पुस्तक के लेखक, पीटर गैस्टन ने सीएसएस लेआउट के भविष्य नामक एक लेख प्रकाशित किया, जिसका एक अनुवाद विशेष रूप से नीचे प्रस्तुत किए गए हैबे के पाठकों के लिए है।

CSS की सभी अद्भुत क्षमताओं के बावजूद, वे पेज लेआउट के मूलभूत सिद्धांतों को लागू करने के लिए पर्याप्त नहीं हैं। हालाँकि, अधिक गतिशील पृष्ठ बनाने के लिए अतिरिक्त सुविधाएँ पहले से ही दिखाई देने लगी हैं।

कई वर्षों के वादों के बाद, CSS3 ने आखिरकार शैलियों में उत्कृष्ट प्रदर्शन किया है। उन्होंने हमारे शस्त्रागार में नए उपकरणों का एक पूरा सेट जोड़ा, हमें गोल कोनों, ग्रेडिएंट्स, पारदर्शिता, तत्व परिवर्तन, एनीमेशन और बहुत कुछ प्रदान किया। हमारी आँखों को और क्या खुश कर सकता है?

अगला सीएसएस मुद्दा मार्कअप है। अब तक, हमने इसे नकारात्मक इंडेंटेशन के साथ फ्लोटिंग ब्लॉक, रिलेटिव पोजिशन और ट्रिक्स का उपयोग करके किया है, और यह सब लागू करना मुश्किल था, ताकि परिणाम मानक दो- या तीन-कॉलम मार्कअप जैसा दिखे।

W3C कंसोर्टियम और ब्राउज़र निर्माता इन मुद्दों के बारे में जानते हैं और कई समाधानों पर काम कर रहे हैं। उनमें से नेता (आश्चर्यजनक रूप से नहीं) इंटरनेट एक्सप्लोरर है। ऐसा लगता है कि IE10 CSS मार्कअप के नए युग का अग्रदूत होगा जो आपको पहले अप्राप्य सुविधाओं का उपयोग करके महान, गतिशील और आकर्षक साइट बनाने की अनुमति देगा।

इस लेख में, लेखक विभिन्न मार्कअप विधियों पर विचार करता है जो मैं विकास के व्यक्तिगत चरणों में उपयोग करना चाहता हूं, पहले से ही विशुद्ध रूप से सैद्धांतिक रूप से लागू किया गया है। हम भविष्य में उन सभी का उपयोग करने में सक्षम नहीं हो सकते हैं (कम से कम वर्तमान रूप में नहीं), लेकिन आपको सीएसएस मार्कअप के भविष्य को समझने के लिए इन तरीकों पर एक नज़र डालनी चाहिए।

लाउडस्पीकरों

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

div { column-count: 3; } 

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

 div { column-width: 140px; } 

डिफ़ॉल्ट रूप से, स्तंभों के बीच का अंतर 1em है, लेकिन स्तंभ-अंतराल गुण का उपयोग करके इसे बदला जा सकता है। आप बॉर्डर प्रॉपर्टी के सिंटैक्स के समान कॉलम-नियम का उपयोग करके कॉलम के बीच डिवाइडिंग लाइन भी रख सकते हैं। नीचे दिया गया कोड एक धराशायी लाइन 2px चौड़ा बना देगा, और कॉलम के बीच इंडेंट को 28px (विभाजक बीच में होगा) भी सेट करेगा:

 div { column-gap: 28px; column-rule: 2px dotted #ccc; } 

यदि आप परिणाम देखना चाहते हैं, तो सीएसएस कॉलम कार्यान्वयन के एक उदाहरण पर एक नज़र डालें। तीन स्तंभों को देखने के लिए, आपको फ़ायरफ़ॉक्स, क्रोम, सफारी, ओपेरा 11.1 या IE10 प्लेटफ़ॉर्म पूर्वावलोकन (IE10PP) का उपयोग करना होगा । या नीचे स्क्रीनशॉट को देखें।



आप कॉलम के साथ अलग-अलग चीजें कर सकते हैं। उनके उपयोग का एक व्यावहारिक उदाहरण विकिपीडिया पर, नोट्स सेक्शन में है , जहाँ कॉलम-काउंट का उपयोग किया जाता है । फ़ायरफ़ॉक्स में, मल्टी- कॉलुमिंग को -moz- प्रीफ़िक्स के साथ, क्रोम और सफारी में -webkit- प्रीफ़िक्स के साथ, ओपेरा 11.1 और IE10PP में प्रीफ़िक्स के बिना लागू किया जाता है।

लचीला बॉक्स

लचीले बॉक्स लेआउट (फ्लेक्सबॉक्स) मॉड्यूल आपको ऊंचाई और चौड़ाई मूल्यों की गणना करने की आवश्यकता के बिना माता-पिता के भीतर तत्वों का स्वचालित रूप से आकार बदलने की अनुमति देता है। उदाहरण के लिए, कल्पना करें कि आपके दो बच्चे हैं और आप चाहते हैं कि वे माता-पिता (जिसमें एक अलग चौड़ाई हो) को भरें ताकि दोनों ब्लॉकों की चौड़ाई समान हो। यह प्रतिशत मूल्यों का उपयोग करके किया जा सकता है, हालांकि, सीमाओं और संकेत के मामले में, कार्य मुश्किल हो जाता है। FlexBox के साथ समाधान बहुत सरल है:

 .parent { display: box; } .child-one, .child-two { box-flex: 1; } 

यह कोड माता-पिता के अंदर क्षैतिज रूप से दो बच्चों को रखेगा और उन्हें समान चौड़ाई देगा। बॉक्स-फ्लेक्स मूल्य कार्य करता है, वास्तव में, एक अनुपात के रूप में, खाली क्षेत्र को ध्यान में रखा जाता है और इस मूल्य के अनुपात में बच्चों के बीच वितरित किया जाता है। यह समझने के लिए कि क्या दांव पर है, निम्नलिखित कोड पर विचार करें:

 .child-one { box-flex: 1; } .child-two { box-flex: 2; } 

जब माता-पिता के अंदर दो तत्व वितरित किए जाते हैं, .child-दो की चौड़ाई हर एक पिक्सेल -child-one के लिए दो पिक्सेल तक बढ़ जाएगी। यदि माता-पिता की चौड़ाई 260px होगी, और प्रत्येक बच्चा 100px, शेष 60px वितरित किया जाएगा ताकि .child-दो और 20 .child-one के लिए आवंटित किया जाए ।

इस अवधारणा को एक उदाहरण के रूप में FlexBox का उपयोग करके समझना आसान होगा (फ़ायरफ़ॉक्स, क्रोम, सफारी या IE10PP की आवश्यकता है)। अपनी ब्राउज़र विंडो का आकार बदलने की कोशिश करें और स्केलिंग पर ध्यान दें।

तत्वों के गतिशील आकार के अनुरूप, FlexBox भी आपको माता-पिता के गुणों को लागू करने की अनुमति देता है, जो सफेद स्थान के वितरण को नियंत्रित करता है, जो बाल तत्वों की स्थिति निर्धारित करता है। बॉक्स-संरेखित गुण बच्चों की चौड़ाई को प्रभावित करता है, और युग्मित बॉक्स-पैक गुण उनकी ऊंचाई को प्रभावित करता है। निम्नलिखित दिखाता है कि यह कैसे काम करता है:

 .parent { box-align: center; box-pack: center; display: box; height: 200px; width: 200px; } .child { box-flex: 0; height: 100px; width: 100px; } 

.Child तत्व का बॉक्स-फ्लेक्स गुण मान 0 है , इसलिए यह डायनामिक रूप से आकार परिवर्तन नहीं करता है, और यह मूल तत्व की ऊंचाई और चौड़ाई का भी आधा है, जो बदले में बॉक्स-संरेखित और का उपयोग करके केंद्रित है बॉक्स-पैक । यही है, बाल ब्लॉक लंबवत और क्षैतिज रूप से केंद्रित होगा।



फिलहाल, FlexBox फ़ायरफ़ॉक्स, क्रोम, सफारी और IE10PP में संबंधित ब्राउज़र उपसर्गों ( -moz- , -webkit- , और -ms- ) के साथ लागू किया गया है, और जेएस पॉलीफ़िल, फ्लेक्सी भी है जिसके साथ आप प्रयोग कर सकते हैं। याद रखें कि वाक्यविन्यास बदल गया है, अंतिम चश्मा में विवरण।

तालिका

IE10PP में नया ब्रांड टेबल लेआउट सिस्टम है। इसका उपयोग करने से पहले, आपको पंक्तियों और स्तंभों पर निर्णय लेने की आवश्यकता है। स्तंभों के लिए, आप लंबाई मान, ऑटो कीवर्ड और माप fr की एक नई इकाई ( अंश , सापेक्ष राशि के लिए कम) का उपयोग कर सकते हैं। इस उदाहरण पर एक नज़र डालें:

 div { display: grid; grid-columns: 1fr 3fr 1fr; grid-rows: 100px auto 12em; } 

यह कोड तीन स्तंभों की एक तालिका बनाएगा, जिनमें से केंद्रीय तीन बार व्यापक बाएं और दाएं, साथ ही तीन पंक्तियों में होगा, जहां शीर्ष 100px ऊंचाई पर होगा, नीचे 12em होगा, और मध्य लंबाई में स्वचालित रूप से विस्तार होगा, सामग्री की लंबाई के आधार पर।

अब जब हमारे पास एक तालिका है, तो हम इसमें सामग्री रख सकते हैं। HTML5 तत्वों का उपयोग करके, आप वास्तव में एक बहुत ही सरल पेज लेआउट बना सकते हैं:

 header { grid-column: 1; grid-column-span: 3; grid-row: 1; } nav { grid-column: 1; grid-row: 2; } article { grid-column: 2; grid-row: 2; } aside { grid-column: 3; grid-row: 2; } footer { grid-column: 1; grid-column-span: 3; grid-row: 3; } 

कोड को देखते हुए, आप देख सकते हैं कि पृष्ठ पर सामग्री क्रमशः ग्रिड-पंक्ति और ग्रिड-कॉलम गुणों का उपयोग करके पंक्तियों और स्तंभों में वितरित की जाती है। लेख तत्व को दूसरी पंक्ति के दूसरे कॉलम में रखा गया है - 3x3 तालिका का केंद्र। कॉलम-स्पैन प्रॉपर्टी का उपयोग हेडर और फुटर तत्वों के लिए भी किया जाता है, जो उन्हें तीनों कॉलमों में ले जाता है ( पंक्ति-स्पैन प्रॉपर्टी, जिसका उपयोग यहां नहीं किया गया था, समान रूप से कार्य करता है)।

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



उपरोक्त गुणों को IE10PP में पूरी तरह से लागू किया गया है, इसलिए आप अभी उनके साथ प्रयोग कर सकते हैं। हालांकि, कई संपत्तियों को अभी भी लागू नहीं किया गया है।

टेम्पलेट

टेबल व्यू का एक और तरीका है, टेम्पलेट लेआउट मॉड्यूल। यह थोड़ा अलग सिंटैक्स का उपयोग करता है, जहाँ आपको पहली बार एक वर्णमाला वर्ण और स्थिति की स्थिति का उपयोग करके ब्लॉक को एक पद निर्दिष्ट करने की आवश्यकता होती है:

 header { position: a; } nav { position: b; } article { position: c; } 

एक बार जब हम एक पद सौंप देते हैं, तो हम वर्णों के अनुक्रम का उपयोग करके मार्कअप बना सकते हैं। प्रत्येक अनुक्रम एक पंक्ति के बराबर है, और अनुक्रम में प्रत्येक वर्ण एक स्तंभ है। उदाहरण के लिए, एक पंक्ति और तीन स्तंभों से तालिका बनाने के लिए, आप इसका उपयोग कर सकते हैं:

 div { display: 'abc'; } 

इस मामले में, तीन समान रूप से वितरित तत्व एक क्षैतिज रेखा में प्रदर्शित होते हैं। लेकिन आप स्तंभों का विस्तार करने के लिए वर्णों को दोहरा सकते हैं, और लाइनों का विस्तार करने के लिए विभिन्न वर्णों में एक ही स्थिति में समान वर्णों का उपयोग कर सकते हैं। नीचे दिए गए उदाहरण में, नौसेना तत्व दो पंक्तियों को ओवरलैप करता है, और हेडर और लेख दो कॉलम ओवरलैप करता है (कोड को समानता के लिए स्वरूपित किया जाता है):

 div { display: 'baa' 'bcc'; } 

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

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

 header { grid-cell: a; } article { grid-cell: b; } div { display: grid; grid-template: 'a' 'b'; } 

कार्यक्षमता के संदर्भ में, यह कोड टेम्प्लेट लेआउट के गुणों के समान है, लेकिन अभी तक इसे लागू नहीं किया गया है (या यह कभी नहीं हो सकता है)।

पोजिशनिंग फ्लोटिंग ब्लॉक्स

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

 div { float: positioned; left: 200px; position: absolute; top: 100px; width: 250px; } 

यह कोड 250px चौड़ा तत्व बनाएगा, जो बाईं ओर 200px और माता-पिता के ऊपर 100px स्थित होगा। डिफ़ॉल्ट रूप से, माता-पिता के अंदर कोई भी अन्य सामग्री सभी पक्षों से पोस्ट किए गए तत्व के चारों ओर प्रवाहित होगी, लेकिन इसे रैप-प्रकार की संपत्ति के विभिन्न मूल्यों के साथ बदला जा सकता है, उदाहरण के लिए, जब पाठ तत्व के चारों ओर केवल ऊपर और नीचे बहता है:

 div { wrap-type: top-bottom; } 

आप तालिका में एक तत्व रखकर और सामग्री को चारों ओर से प्रवाहित करके स्थिति और तालिका लेआउट के गुणों को जोड़ सकते हैं:

 div { float: positioned; grid-column: 2; grid-row: 2; } 

यदि आपके पास IE10PP है, तो आप एक तैनात अस्थायी ब्लॉक का डेमो देख सकते हैं । यदि नहीं, तो परिणाम नीचे स्क्रीनशॉट में दिखाया गया है, वर्तमान सीएसएस क्षमताओं को लागू करना असंभव है।

बहिष्करण

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

 div { wrap-shape: circle(50%, 50%, 100px); } 

यह कोड 100px की त्रिज्या के साथ एक सर्कल बनाएगा, जो मूल तत्व में केंद्रित होगा। आप बहुभुज () फ़ंक्शन का उपयोग किसी स्थान द्वारा अलग किए गए समन्वित जोड़े को निर्दिष्ट करके किसी भी आकृति बनाने के लिए कर सकते हैं, उदाहरण के लिए एक त्रिकोण:

 div { wrap-shape: polygon(0,100px 100px,100px 50px,0); } 

जब पहले से ही एक दी गई आकृति है, तो आंतरिक सामग्री को दूसरे आवरण-आकार-मोड संपत्ति का उपयोग करके इस आंकड़े के आसपास सुव्यवस्थित किया जा सकता है:

 div { wrap-shape: circle(50%, 50%, 100px); wrap-shape-mode: around; } 

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

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

 .content { flow: foo; } .target1, .target2 { content: from(foo); } 

यहां, सामग्री को .content तत्व से लिया जाएगा, और फिर .target1 तत्व पर पहले वितरित किया जाएगा और यदि ब्लॉक सामग्री प्रदर्शित करने के लिए पर्याप्त नहीं है, तो यह .target2 में प्रदर्शित होना जारी रहेगा। सामग्री को ब्लॉक में डुप्लिकेट नहीं किया जाएगा, यह पहले में शुरू होगा और दूसरे में जारी रहेगा (यदि आवश्यक हो)। एक बेहतर समझ के लिए, बस नीचे दी गई छवि पर एक नज़र डालें।



वैसे, मार्कअप में उनके स्थान के बारे में लक्षित क्षेत्रों के लिए कोई आवश्यकता नहीं है। यदि आवश्यक हो, तो उन्हें पृष्ठ के विपरीत पक्षों पर रखा जा सकता है।

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

निष्कर्ष

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

इस प्रकार, यह अनुमान लगाया जा सकता है कि सिंटैक्स में कुछ बदलावों के साथ, ऊपर वर्णित सभी चीजें भविष्य में CSS3 में उपयोग की जाएंगी। ऐसा होने पर यह बहुत अच्छा है, क्योंकि, इस मामले में, नए तरीके आपको कुछ ही वर्षों में न्यूनतम लागत के साथ बहुत विचारशील साइट बनाने की अनुमति देंगे।