कई सालों तक, सीएसएस फ्लोट वेबसाइट लेआउट बनाने में एक जटिल, अभी तक आवश्यक घटक रहा है। यदि आपका डिज़ाइन एकाधिक कॉलम के लिए बुलाया जाता है, तो आप फ्लोट पर बदल जाते हैं । इस विधि के साथ समस्या यह है कि, वेब डिज़ाइनर / डेवलपर्स ने जटिल साइट लेआउट बनाने में दिखाए गए अविश्वसनीय चालाकी के बावजूद, सीएसएस फ्लोट का वास्तव में इस तरह से उपयोग नहीं किया जाना था।
जबकि फ्लोट्स और सीएसएस पोजिशनिंग आने वाले कई वर्षों तक वेब डिज़ाइन में एक जगह है, सीएसएस ग्रिड और फ्लेक्सबॉक्स सहित नई लेआउट तकनीकें अब वेब डिज़ाइनर को अपनी साइट लेआउट बनाने के नए तरीके दे रही हैं। एक और नई लेआउट तकनीक जो बहुत सी संभावनाएं दिखाती है वह सीएसएस एकाधिक कॉलम है।
सीएसएस कॉलम अब कुछ सालों से आसपास रहे हैं, लेकिन पुराने ब्राउज़रों (मुख्य रूप से इंटरनेट एक्सप्लोरर के पुराने संस्करणों) में समर्थन की कमी ने कई वेब पेशेवरों को अपने उत्पादन कार्यों में इन शैलियों का उपयोग करने से रोक दिया है।
आईई के उन पुराने संस्करणों के समर्थन के अंत में, कुछ वेब डिज़ाइनर अब नए सीएसएस लेआउट विकल्पों, सीएसएस कॉलम के साथ प्रयोग कर रहे हैं, और यह पता लगा रहे हैं कि इन फ्लोट्स के साथ इन नए दृष्टिकोणों के साथ उनका इतना अधिक नियंत्रण है।
सीएसएस कॉलम की मूल बातें
जैसा कि इसके नाम से पता चलता है, सीएसएस एकाधिक कॉलम (जिसे CSS3 मल्टी-कॉलम लेआउट भी कहा जाता है) आपको सामग्री को कॉलम की एक निश्चित संख्या में विभाजित करने की अनुमति देता है। आपके द्वारा उपयोग किए जाने वाले सबसे बुनियादी सीएसएस गुण हैं:
- स्तंभ गिनती
- स्तंभ की खाई
कॉलम-गिनती के लिए, आप अपने इच्छित कॉलम की संख्या निर्दिष्ट करते हैं। कॉलम अंतर उन कॉलम के बीच गटर या रिक्ति होगी। ब्राउज़र इन मानों को ले जाएगा और आपके द्वारा निर्दिष्ट कॉलम की संख्या में सामग्री को समान रूप से विभाजित करेगा।
अभ्यास में सीएसएस एकाधिक कॉलम का एक आम उदाहरण टेक्स्ट सामग्री के एक ब्लॉक को कई स्तंभों में विभाजित करना होगा, जैसा कि आप समाचार पत्र लेख में देखेंगे। मान लें कि आपके पास निम्न HTML मार्कअप है (ध्यान दें कि उदाहरण के प्रयोजनों के लिए, मैं केवल एक पैराग्राफ की शुरुआत कर रहा हूं, जबकि अभ्यास में इस मार्कअप में सामग्री के कई पैराग्राफ होंगे):
आपके लेख का शीर्षक
यहां टेक्स्ट के कई पैराग्राफ की कल्पना करें ...
यदि आपने फिर इन सीएसएस शैलियों को लिखा है:
.content {-moz-column-count: 3; -वेबिट-कॉलम-गिनती: 3; कॉलम-गिनती: 3; -मोज़-कॉलम-अंतर: 30 पीएक्स; -webkit-column-gap: 30px; कॉलम-गैप: 30 पीएक्स; }यह सीएसएस नियम "सामग्री" विभाजन को उनके बीच 30 पिक्सेल के अंतर के साथ 3 बराबर कॉलम में विभाजित करेगा। यदि आप 3 के बजाय दो कॉलम चाहते थे, तो आप बस उस मान को बदल देंगे और ब्राउज़र समान रूप से सामग्री को विभाजित करने के लिए उन स्तंभों की नई चौड़ाई की गणना करेगा। ध्यान दें कि हम पहले विक्रेता-प्रीफिक्स्ड गुणों का उपयोग करते हैं, इसके बाद गैर-प्रीफ़िक्स्ड घोषणाएं होती हैं।
इस तरह से आसान है, इस तरह से इसका उपयोग वेबसाइट के उपयोग के लिए संदिग्ध है। हां, आप कई स्तंभों में सामग्री का एक गुच्छा विभाजित कर सकते हैं, लेकिन यह वेब के लिए सबसे अच्छा पढ़ने का अनुभव नहीं हो सकता है, खासकर यदि इन कॉलम की ऊंचाई स्क्रीन के "गुना" से नीचे आती है।
पूर्ण सामग्री को पढ़ने के लिए पाठकों को फिर ऊपर और नीचे स्क्रॉल करना होगा। फिर भी, सीएसएस कॉलम का प्रिंसिपल उतना ही आसान है जितना आप यहां देखते हैं, और इसका उपयोग कुछ अनुच्छेदों की सामग्री को विभाजित करने के बजाय बहुत कुछ करने के लिए किया जा सकता है - यह वास्तव में लेआउट के लिए उपयोग किया जा सकता है।
सीएसएस कॉलम के साथ लेआउट
मान लें कि आपके पास एक सामग्री क्षेत्र वाला वेबपृष्ठ है जिसमें सामग्री के 3 कॉलम हैं। यह एक बहुत ही सामान्य वेबसाइट लेआउट है, और उन 3 कॉलम को प्राप्त करने के लिए, आप आमतौर पर उन डिवीजनों को फ़्लोट करेंगे जो सीएसएस एकाधिक कॉलम के साथ, यह बहुत आसान है।
यहां कुछ नमूना HTML है:
नवीनतम समाचार
सामग्री यहां जाएगी ...
हमारे ब्लॉग से
सामग्री यहां जाएगी ...
आने वाली घटनाएं
सामग्री यहां जाएगी ...
इन एकाधिक स्तंभों को बनाने के लिए सीएसएस जो आपने पहले देखा था उसके साथ शुरू होता है:
.content {-moz-column-count: 3; -वेबिट-कॉलम-गिनती: 3; कॉलम-गिनती: 3; -मोज़-कॉलम-अंतर: 30 पीएक्स; -webkit-column-gap: 30px; कॉलम-गैप: 30 पीएक्स; }अब, चुनौती यह है कि, चूंकि ब्राउजर इस सामग्री को समान रूप से विभाजित करना चाहता है, इसलिए यदि इन डिवीजनों की सामग्री लंबाई अलग है, तो वह ब्राउज़र वास्तव में एक व्यक्तिगत विभाजन की सामग्री को विभाजित करेगा, इसकी शुरुआत एक कॉलम में शुरू होगी और फिर दूसरे में जारी रहें (आप इसे प्रयोग करने के लिए इस कोड का उपयोग करके देख सकते हैं और प्रत्येक विभाजन के अंदर सामग्री की विभिन्न लंबाई जोड़ सकते हैं)!
यही वह नहीं है जो आप चाहते हैं। आप इनमें से प्रत्येक डिवीजन को एक अलग कॉलम बनाना चाहते हैं और इससे कोई फर्क नहीं पड़ता कि एक अलग विभाजन की सामग्री कितनी बड़ी या छोटी हो सकती है, आप इसे कभी विभाजित नहीं करना चाहते हैं। आप इसे सीएसएस की एक अतिरिक्त पंक्ति जोड़कर प्राप्त कर सकते हैं:
.content div {display: इनलाइन-ब्लॉक; }यह उन डिवीजनों को मजबूर करेगा जो "सामग्री" के अंदर हैं, जो बरकरार रहें, भले ही ब्राउजर इसे कई कॉलम में विभाजित करे। इससे भी बेहतर, चूंकि हमने यहां कोई निश्चित चौड़ाई नहीं दी है, इसलिए ये कॉलम स्वचालित रूप से आकार बदलेंगे क्योंकि ब्राउजर का आकार बदलता है, जिससे उन्हें उत्तरदायी वेबसाइटों के लिए आदर्श एप्लिकेशन बना दिया जाता है। उस "इनलाइन-ब्लॉक" शैली के साथ, आपके प्रत्येक 3 डिवीजन सामग्री का एक अलग स्तंभ होगा।
कॉलम-चौड़ाई का उपयोग करना
"कॉलम-गिनती" के अलावा एक और संपत्ति है जिसका उपयोग आप कर सकते हैं, और अपनी लेआउट आवश्यकताओं के आधार पर, यह वास्तव में आपकी साइट के लिए बेहतर विकल्प हो सकता है। यह "स्तंभ-चौड़ाई" है। जैसा कि पहले दिखाया गया है, उसी HTML मार्कअप का उपयोग करके, हम इसके बजाय हमारे सीएसएस के साथ ऐसा कर सकते हैं:
.content {-moz-column-width: 500px; -वेबकिट-कॉलम-चौड़ाई: 500 पीएक्स; कॉलम-चौड़ाई: 500 पीएक्स; -मोज़-कॉलम-अंतर: 30 पीएक्स; -webkit-column-gap: 30px; कॉलम-गैप: 30 पीएक्स; }। सामग्री div {प्रदर्शन: इनलाइन-ब्लॉक; }जिस तरह से यह काम करता है वह यह है कि ब्राउज़र इस कॉलम के अधिकतम मान के रूप में इस "कॉलम-चौड़ाई" का उपयोग करता है। तो यदि ब्राउज़र विंडो 500 पिक्सल चौड़ी से कम है, तो ये 3 डिवीजन एक कॉलम में दिखाई देंगे, जो कि दूसरे के शीर्ष में से एक है। यह मोबाइल / छोटे स्क्रीन लेआउट के लिए उपयोग किया जाने वाला एक सामान्य लेआउट है।
चूंकि ब्राउजर चौड़ाई निर्दिष्ट कॉलम अंतराल के साथ 2 कॉलम फिट करने के लिए काफी बड़ी हो जाती है, ब्राउज़र स्वचालित रूप से एक कॉलम लेआउट से दो कॉलम तक जायेगा। स्क्रीन की चौड़ाई बढ़ाने और अंत में, आपको 3 कॉलम डिज़ाइन मिलेगा, जिसमें हमारे प्रत्येक 3 डिवीजन अपने स्वयं के कॉलम में प्रदर्शित होंगे। दोबारा, यह कुछ उत्तरदायी, बहु-डिवाइस अनुकूल लेआउट प्राप्त करने का एक शानदार तरीका है, और आपको लेआउट शैलियों को बदलने के लिए मीडिया प्रश्नों का उपयोग करने की भी आवश्यकता नहीं है!
अन्य कॉलम गुण
यहां शामिल संपत्तियों के अतिरिक्त, "कॉलम-नियम" के लिए गुण भी हैं, जिनमें रंग, शैली और चौड़ाई मान शामिल हैं जो आपको अपने कॉलम के बीच नियम बनाने की अनुमति देते हैं। यदि आप कुछ कॉलम को अपने कॉलम को अलग करना चाहते हैं तो इन सीमाओं के बजाय उपयोग किया जाएगा।
प्रयोग का समय
वर्तमान में, सीएसएस एकाधिक कॉलम लेआउट बहुत अच्छी तरह से समर्थित है। उपसर्गों के साथ, 9 4% से अधिक वेब उपयोगकर्ता इन शैलियों को देख पाएंगे, और असमर्थित समूह वास्तव में केवल इंटरनेट एक्सप्लोरर के पुराने संस्करण होंगे जो आप अब भी समर्थन नहीं दे रहे हैं।
इस स्तर के समर्थन के साथ अब, सीएसएस कॉलम के साथ प्रयोग शुरू करने और उत्पादन तैयार वेबसाइटों में इन शैलियों को तैनात करने का कोई कारण नहीं है। आप इस आलेख में प्रस्तुत HTML और CSS का उपयोग करके अपने प्रयोग शुरू कर सकते हैं और विभिन्न मूल्यों के साथ खेल सकते हैं यह देखने के लिए कि आपकी साइट की लेआउट आवश्यकताओं के लिए सबसे अच्छा क्या काम करेगा।