CSS3 के बहुरंगीपन का परिचय। हम कॉलम के साथ काम करते हैं

एकाधिक स्तंभों में किसी पृष्ठ पर पाठ की व्यवस्था कैसे करें? और क्या यह अपने आप हो सकता है? निश्चित रूप से, आप में से बहुत से लोग जो इस समस्या का सामना करने से पहले वेब विकास में शामिल रहे हैं या हुए हैं - और अक्सर ऐसे जटिल समाधानों के खिलाफ सामने आए हैं जिनमें चालाक शैलियों की आवश्यकता होती है या अतिरिक्त जावास्क्रिप्ट पुस्तकालयों का उपयोग करना (देखें, उदाहरण के लिए, jQuery के लिए कॉलमिनेजर प्लगइन )।

सामग्री का बहु-स्तंभ लेआउट (पृष्ठ के सामान्य बहु-स्तंभ लेआउट के कार्य के साथ भ्रमित नहीं होना, जो ग्रिड पर ब्लॉकों की व्यवस्था करने की समस्या के करीब है) ने लंबे समय से वेब मानकों की दुनिया में अपना रास्ता बना लिया है और अंत में, संबंधित CSS3 मल्टी मॉड्यूल के रूप में उम्मीदवार की सिफारिश की स्थिति तक पहुंच गया है। -कस्टम लेआउट , लेकिन ब्राउज़रों में भी काफी व्यापक समर्थन मिला: कहीं उपसर्गों के साथ (-moz- या -webkit-) और कहीं चालू (ओपेरा 11.1+) और नियोजित संस्करण (IE10 +), और तुरंत उपसर्गों के बिना।

टिप्पणी
Internet Explorer 10 के मामले में, यह स्वचालित रूप से HTML / CSS / JS का उपयोग करके विंडोज 8 के लिए मेट्रो-शैली अनुप्रयोगों को विकसित करते समय CSS3 मल्टी-कॉलम का उपयोग करने की क्षमता का मतलब है।

इस लेख के भाग के रूप में, मैं कोड को भ्रमित करने के लिए ब्राउज़र उपसर्गों का उपयोग नहीं करूंगा, लेकिन वास्तविक उपयोग में, फ़ायरफ़ॉक्स, सफारी और क्रोम के लिए उपसर्ग समर्थन जोड़ना न भूलें।

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



दूसरे, मल्टी-कॉलम डिस्प्ले, मीडिया क्वैरिज़ की क्षमताओं (और उत्तरदायी डिज़ाइन, उत्तरदायी डिज़ाइन ) के साथ अच्छी तरह से काम करता है, उदाहरण के लिए, अलग-अलग स्क्रीन आकारों के साथ, आप टेक्स्ट को अलग-अलग कॉलम में प्रारूपित कर सकते हैं:



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



इस अर्थ में, स्तंभों की क्षैतिज प्रकृति क्षैतिज स्क्रॉलिंग के साथ बेहतर है (जैसा कि Win8 के लिए कई अनुप्रयोगों में उपयोग किया जाता है - उदाहरण के लिए, यूएसए टुडे एप्लिकेशन में यह स्पष्ट रूप से दिखाई देता है):



सामान्य तौर पर, वक्ता महान होते हैं, लेकिन उपयोगकर्ता की सुविधा के बारे में नहीं भूलते हैं। और अब लड़ाई के लिए!

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

इसलिए, हमारे पास पाठ (सामग्री) है जिसे हम कई कॉलमों में रखना चाहते हैं। कहाँ से शुरू करें?



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

article { column-count: 2; } 

ब्राउज़र बाकी काम करेगा:


एक वैकल्पिक संपत्ति - कॉलम-चौड़ाई - आपको कॉलम की इष्टतम चौड़ाई निर्धारित करने की अनुमति देता है:

 article { column-width: 150px; } 

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

यह व्यवहार विनिर्देश द्वारा परिभाषित किया गया है और अनुकूली मार्कअप के विकास में अधिक लचीलापन प्राप्त करने के लिए (स्वचालित रूप से) अनुमति देता है:



उदाहरण के लिए, यदि आपके पास 100px की चौड़ाई के साथ एक कंटेनर है और आप 45px की चौड़ाई के साथ कॉलम निर्दिष्ट करते हैं, तो ब्राउज़र इस बात पर विचार करेगा कि केवल दो कॉलम फिट हों, और पूरे स्थान को भरने के लिए, प्रत्येक के आकार को 50px तक बढ़ाएं। (यह कॉलम के बीच इंडेंट को भी ध्यान में रखता है, जिसकी चर्चा अगले भाग में की जाएगी।)

एक निश्चित अर्थ में, इसे मीडिया क्वेरीज़ की सहायता से निर्दिष्ट करने के विकल्प के रूप में माना जा सकता है एक अलग संख्या में कॉलम खिड़की के आकार के आधार पर और स्तंभ की चौड़ाई की स्वत: गणना के साथ:

 @media (min-width:400px) { article { column-count: 2; } } @media (min-width:600px) { article { column-count: 3; } } ... 

यह दूसरी बार है जब मैं एक विकल्प के बारे में बात कर रहा हूँ - और यहाँ क्यों है।

गिनती बनाम चौड़ाई

जैसा कि ऊपर वर्णित विवरण से पहले ही स्पष्ट होना चाहिए, विनिर्देश कॉलम की संख्या और चौड़ाई को निर्दिष्ट करने के दो तरीके प्रदान करता है (वैसे, यह सभी कॉलम के लिए समान है!)।

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

ज्यादातर मामलों में, आप या तो एक या दूसरे का उपयोग करेंगे, क्रमशः संख्या या लंबाई के साथ काम करना। लेखन को सरल बनाने के लिए, ऐसी छोटी कॉलम प्रॉपर्टी है जो निर्दिष्ट डेटा के प्रारूप पर प्रतिक्रिया देती है:

 columns: 12em; /* column-width: 12em; column-count: auto; */ columns: 2; /* column-width: auto; column-count: 2; */ columns: auto; /* column-width: auto; column-count: auto; */ columns: auto 12em; /* column-width: 12em; column-count: auto; */ columns: 2 auto; /* column-width: auto; column-count: 2; */ 

यदि आप कॉलम की संख्या और इष्टतम चौड़ाई दोनों को निर्दिष्ट करते हैं तो क्या होगा? विनिर्देशन के अनुसार, इस मामले में कॉलम-संख्या अधिकतम कॉलम निर्धारित करती है:

 article { columns: 150px 3; /* column-width: 150px; column-count: 3; */ } 

विनिर्देश में आपको एक छद्म कोड भी मिलेगा जो स्तंभों की संख्या और उनकी चौड़ाई की गणना के लिए एक एल्गोरिथ्म का वर्णन करता है।

इंडेंटेशन और डिवाइडिंग लाइनें

अब जब हमने सीखा कि कॉलम कैसे बनाया जाता है, तो यह सीखने का समय है कि उनके बीच क्या होता है, इसे कैसे नियंत्रित किया जाए: इंडेंट और डिवाइडिंग लाइनें।

कॉलम के बीच इंडेंट को बदलने के लिए, कॉलम-गैप प्रॉपर्टी को परिभाषित किया गया है। स्तंभों के बीच के अनुभाग को नेत्रहीन पहचानने के लिए, एक और संपत्ति पेश की जाती है - स्तंभ-नियम- *

स्तंभ की खाई

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

 article { columns: 3; column-gap: 3em; } 

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

 W = ((available-width + column-gap) / N) - column-gap; 

स्तंभ-शासन

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

• कॉलम-नियम-रंग - लाइन रंग,
• स्तंभ-नियम-शैली - पंक्ति शैली,
• कॉलम-नियम-चौड़ाई - लाइन चौड़ाई।

ब्लॉक सीमाओं के साथ, लेखन का एक संक्षिप्त रूप है - सिर्फ कॉलम-नियम :

 article { columns: 3; column-rule: 3px dotted CornflowerBlue; } 

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

 article { columns: 3; column-rule: 5em groove SkyBlue; } 

और विभाजक कंटेनर की पृष्ठभूमि के तुरंत बाद खींचा जाता है।

टूट जाता है

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

इन सभी समस्याओं को हल करने के लिए विशेष गुण हैं। मिलना

• विराम से पहले - सामग्री ब्लॉक से पहले क्या होना चाहिए,
• ब्रेक-आफ्टर - कंटेंट ब्लॉक के बाद क्या होना चाहिए,
• ब्रेक-इन - कंटेंट ब्लॉक के अंदर क्या होना चाहिए।

यदि आप समान गुणों से परिचित हैं जो पृष्ठों में सामग्री को तोड़ने के लिए जिम्मेदार हैं ( पृष्ठ-विराम- * ), तो ये स्तंभ गुण समान तरीके से व्यवहार करते हैं: वे समान मानों का उपयोग करते हैं और कुछ अतिरिक्त (इटैलिक में):

• विराम-से पहले : ऑटो, हमेशा, से बचें, बाएँ, दाएँ, पृष्ठ , स्तंभ , से-पृष्ठ , से बचें-स्तंभ
• ब्रेक-आफ्टर : ऑटो, ऑलवेज, अवॉइड, लेफ्ट, राइट, पेज , कॉलम , अवॉइड-पेज , अवॉइड-कॉलम
• ब्रेक-इन : ऑटो, बचना, बचना-पृष्ठ , बचना-स्तंभ

मुझे लगता है कि मूल्यों के नाम से, मूल रूप से, कार्यों के अर्थ को समझा जाना चाहिए। उदाहरण के लिए, ऊपर वर्णित धारणा के तहत संवाद के अंदर अंतराल की उपस्थिति से बचने के लिए और एक ही समय में इसे एक अलग कॉलम में चुनें, मुझे केवल संकेत करने की आवश्यकता है:

 article dialog { break-inside:avoid; break-before: column; break-after: column; display:block; } 

एक महत्वपूर्ण बिंदु: आज के लिए, स्तंभ अंतराल प्रबंधन केवल ओपेरा 11.10+ में समर्थित है, जो कि आश्चर्य की बात नहीं है, यह देखते हुए कि विनिर्देशन के संपादक हाकोन वाइम ली और IE10 हैं।

ओपेरा के नवीनतम संस्करण और IE10 के प्रारंभिक सार्वजनिक संस्करण के साथ मेरे प्रयोग बताते हैं कि कुछ स्थानों पर उपलब्ध कार्यान्वयन एक-दूसरे से अलग हैं। हालांकि, यहां मुझे यह उत्तर देना मुश्किल है कि कौन सा ब्राउज़र विनिर्देशन के बाद से "अधिक सही" व्यवहार करता है, हालांकि इसमें अतिप्रवाह पर एक अलग खंड होता है, फिर भी ब्राउज़र के विवेक पर कुछ बारीकियों को छोड़ देता है (उदाहरण के लिए, यह स्पष्ट रूप से अंतराल निर्दिष्ट करते समय अतिरिक्त अतिरिक्त स्तंभों की उपस्थिति की अनुमति देता है। )।

कई स्तंभों पर खिंचाव

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

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

 article dialog.big { column-span:all; display:block; font-size:1.3em; margin:20px 0; } 

इस स्थिति में, संवाद से बड़े में लिखे गए वाक्यांश को सभी स्तंभों तक फैला दिया जाता है। पाठ के क्रम पर ध्यान दें: ऊपरी बाएँ स्तंभ, ऊपरी दाएँ, वाक्यांश वाक्यांश, बाएँ बाएँ और फिर निचले दाएँ।

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

फ़ायरफ़ॉक्स में स्ट्रेचिंग आइटम अभी भी समर्थित नहीं हैं ।

भरने

और अंतिम विवरण, जिसे संभवतः आपको देखकर हैरान होना चाहिए था: कैसे, वास्तव में, ब्राउज़र यह तय करता है कि कॉलम में कैसे भरें?

इस सवाल का जवाब देने के लिए, विनिर्देश एक कॉलम-फिल संपत्ति का परिचय देता है। आप संतुलन ( संतुलन ) में भर सकते हैं, - यह वही है जो डिफ़ॉल्ट रूप से किया जाता है, - एक ही कॉलम ऊंचाई बनाए रखने की कोशिश कर रहा है; या तो स्वचालित रूप से ( ऑटो ), कॉलम को क्रमिक रूप से भरना।

तुलना करें, यह है कि ब्राउज़र डिफ़ॉल्ट रूप से कैसे संतुलित करता है:

 article { columns: 2; /*column-fill:balance;*/ height: 250px; } 

और इसलिए स्वचालित अनुक्रमिक मोड में:

 article { columns: 2; column-fill:auto; height: 250px; } 

आज के लिए नियंत्रण भरें केवल इंटरनेट एक्सप्लोरर और ओपेरा द्वारा समर्थित है।

परिणाम

सबसे पहले, ए.पी. की कहानी की निरंतरता। चेखव का "सेब के लिए" संभव है
विकीस्रोत में पाया गया ।


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

इंटरएक्टिव

आप ietestdrive.com पर CSS3 के मल्टी-कॉलम के साथ खेल सकते हैं:



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