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