CSS3 का उपयोग करके कॉलम द्वारा लेआउट

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



सबसे पहले, आंख पाठ की पंक्तियों को मानती है जिसमें 8 से 12 शब्द बेहतर होते हैं। दूसरे, आप कॉलम को बेहतर तरीके से व्यवस्थित कर सकते हैं और पृष्ठ पर सफेद स्थान की मात्रा को कम कर सकते हैं। लंबे समय तक यह मुद्रण का एक असाधारण लाभ था। वेब पर, मुझे हर तरह से सब कुछ करना पड़ा। लेकिन अब CSS3 आपको जावास्क्रिप्ट का उपयोग किए बिना कॉलम लेआउट बनाने की अनुमति देता है।

कॉलम मॉडल

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



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



फिलहाल, व्यक्तिगत कॉलम (उदाहरण के लिए, व्यक्तिगत कॉलम का रंग) के गुणों को निर्धारित करना संभव नहीं है। आइए आशा करते हैं कि कार्यान्वयन के लिए प्रस्तावित सभी मौजूदा गुणों को लागू करने के बाद, कॉलम प्रबंधन गुण दिखाई देंगे।

स्तंभों की संख्या और चौड़ाई

एक स्तंभ तत्व बनाने के लिए, आपको गुण -स्तंभ और / या स्तंभ-चौड़ाई सेट करनी होगी।

स्तंभ गिनती

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

.column

{

-वेबकिट-कॉलम-गिनती : 2 ;

-मोज़-कॉलम-गिनती : 2 ;

}

स्तंभ-चौड़ाई

जैसा कि ऊपर उल्लेख किया गया है, आप कॉलम की संख्या निर्दिष्ट किए बिना कॉलम की चौड़ाई निर्धारित कर सकते हैं, और ब्राउज़र इसे गतिशील रूप से गणना करेगा। स्तंभ की चौड़ाई को CSS: em, px,% में उपलब्ध किसी भी इकाई के साथ निर्दिष्ट किया जा सकता है।

.column

{

-वेबकिट-कॉलम-चौड़ाई : 15em ;

-मोज़-कॉलम-गिनती : 15em ;

}

बेशक, आप कॉलम-चौड़ाई और स्तंभ-ऊँचाई को जोड़ सकते हैं:

.column

{

-वेबकिट-कॉलम-गिनती : 2 ;

-मोज़-कॉलम-गिनती : 2 ;



-वेबकिट-कॉलम-चौड़ाई : 15em ;

-मोज़-कॉलम-चौड़ाई : 15em ;

}

अंतराल और शासक

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



कॉलम रिक्ति वही है जो लिखा है, कॉलम के बीच खाली खाली स्थान का आकार, सीएसएस इकाइयों में दर्शाया गया है।

colomn-गैप

W3C विनिर्देश 1em में डिफ़ॉल्ट अंतराल मान को परिभाषित करता है, उदाहरण में हम इसका उपयोग करेंगे:

.column

{

-वेबकिट-कॉलम-गैप : 1em ;

-मोज़-कॉलम-गैप : 1em ;

}

स्तंभ-शासन

छपाई से लाइन भी आ गई। प्रारंभ में, शासक स्तंभों के बीच की पतली रेखाएँ होती हैं जो पढ़ने को आसान बनाती हैं या अलग-अलग कहानियाँ साझा करती हैं। CSS3 तीन अलग-अलग शासक अनुकूलन गुण प्रदान करता है: स्तंभ-नियम-आकार , स्तंभ-नियम-शैली और स्तंभ-नियम-रंग , या आप सभी तीन गुणों को निर्दिष्ट करने के लिए स्तंभ-नियम का उपयोग कर सकते हैं।



जैसा कि आपने अनुमान लगाया होगा, सभी सामान्य इकाइयों, शैलियों और रंगों का उपयोग किया जा सकता है:

.column

{

-वेबकिट-कॉलम-नियम : 1em ठोस # 000 ;

-मोज़-कॉलम-नियम : 1em ठोस काला ;

}

चुटकुले का उपयोग करें

वर्तमान में, कॉलम संपत्ति परिवार WebKit या मोज़िला-आधारित ब्राउज़र द्वारा समर्थित है।



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

यदि स्तंभ ऊंचाई में सीमित हैं तो क्या होगा

ब्राउज़र पाठ को फिट करने के लिए कॉलम जोड़ देगा।



अतिप्रवाह बचाता है: छिपा हुआ ।

एक कॉलम में शासक प्रदर्शित करें

यदि पाठ एक कॉलम में फिट बैठता है, तो मोज़िला एक शासक को आकर्षित नहीं करता है, लेकिन WebKit आकर्षित करता है।

वेबकिट:



mozilla:

ऐसे गुण जो विनिर्देशन में हैं, लेकिन समर्थित नहीं हैं

ये कॉलम-ब्रेक और कॉलम-स्पैन गुण हैं।



पहले को एक संकेतक के रूप में इरादा किया जाता है जिसे आपको अगला कॉलम शुरू करने की आवश्यकता होती है। उदाहरण के लिए, h2 टैग से पहले।

.कल्चर H2

{

कॉलम-ब्रेक-से पहले : हमेशा ;

}

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

.लकम H १

{

कॉलम-स्पैन : सभी ;

}

निष्कर्ष

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

---

विषय पर:

W3C विशिष्टता: www.w3.org/TR/css3-multicol

लेख का मैंने अनुवाद किया, लेकिन जब मेरी टिप्पणियों की संख्या पाठ के साथ तुलनीय हो गई, तो मैंने खुद लिखा: www.kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts

उदाहरणों का एक अच्छा सेट: www.quirksmode.org/css/multicolumn.html

मेरा उदाहरण: unconnected.info/multicolumn.htm (मेरी साइट habraeffekts से डरती है, अगर यह खुला नहीं है, ओह उम खेद)

मेरे उदाहरण का स्नैपशॉट: http://www.peeep.us/a1660973 (धन्यवाद कुजावक )