xCSS: अपने सीएसएस विनिर्देश के साथ आते हैं। भाग 1

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



पहला तंत्र जिसे मैं आपके ध्यान में लाता हूं उसे "गाइड" कहा जाता है

गाइड

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

गाइड की परिभाषा

गाइड शून्य प्रकार या चौड़ाई के ब्लॉक तत्व हैं, जो कि प्रकार पर निर्भर करता है: क्षैतिज या ऊर्ध्वाधर। न तो चौड़ाई और न ही गाइड की ऊंचाई को नियंत्रित किया जा सकता है, वे हमेशा तत्व की चौड़ाई या ऊंचाई पर 100% कब्जा करते हैं। गाइड में मार्जिन, पैडिंग, बॉर्डर, बैकग्राउंड हो सकते हैं, जो आपको कुछ शैलीगत तकनीकों को बनाने की अनुमति देगा।

गाइड विवरण

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

$rule1 { /* rule preferences */ }

$rule2 { ... }



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

शासन-प्रकार

दो प्रकार के मार्गदर्शक हैं: क्षैतिज (क्षैतिज) और ऊर्ध्वाधर (ऊर्ध्वाधर) । मार्गदर्शिकाएँ डिफ़ॉल्ट रूप से क्षैतिज होती हैं ।

संपत्ति मान: क्षैतिज || खड़ा

डिफ़ॉल्ट मान: क्षैतिज

शासन-दोहराने

यह संपत्ति गाइडों की पुनरावृत्ति को नियंत्रित करती है। डिफ़ॉल्ट रूप से, गाइड के लिए दोहराव तंत्र अक्षम होता है।

संपत्ति मान: कोई नहीं || दोहराना

डिफ़ॉल्ट मूल्य: कोई नहीं

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



क्षैतिज गाइड की संख्या सूत्र द्वारा गणना की जाती है

kh = containerHeight / (ruleMarginTop + rulePaddingTop + rulePaddingBottom + ruleMarginBottom)



ऊर्ध्वाधर गाइड की संख्या सूत्र द्वारा गणना की जाती है

kv = containerWidth / (ruleMarginLeft + rulePaddingLeft + rulePaddingRight + ruleMarginRight)



उदाहरण का उपयोग करें

$myRule {

rule-type: vertical;

rule-repeat: repeat;

margin-right: 10px;

margin-left: 20px;

padding-right: 50px;

}



नियम

कुछ ब्लॉक में गाइड का उपयोग करने के लिए, नियम निर्देश का उपयोग किया जाता है

संपत्ति के मूल्य: $ शासन [$ नियम]

डिफ़ॉल्ट मूल्य: कोई नहीं

आप विभिन्न प्रकारों के गाइड के साथ एक या दो चर का उपयोग कर सकते हैं। दो समान प्रकार के गाइड का उपयोग करते समय, यह निर्देश लागू नहीं होता है।

गाइड का उपयोग करना

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

स्नैप-करने के लिए

संपत्ति मान: [शीर्ष ($ रूल)) [नीचे ($ रूल)) [बायें ($ रूल)) [दायें ($ रूलिड)]] [शीर्ष] [नीचे] [बाएं] [सही] || कोई नहीं

डिफ़ॉल्ट मूल्य: कोई नहीं

कठिन परिस्थितियों में, जब गाइड वाले ब्लॉक में गाइड के साथ एक और ब्लॉक होता है, तो किसी विशेष गाइड के विशिष्ट किनारे पर आसंजन को इंगित करना बेहतर होता है। सरल मामलों में, एक गाइड पहचानकर्ता वैकल्पिक है।



किनारे पर चिपके रहना स्थिति वाले तत्व के व्यवहार के समान है: सापेक्ष।



मैं विशेष रूप से अधिक विस्तृत व्यवहार को छोड़ देता हूं, क्योंकि यह पाठ के एक से अधिक पृष्ठ लेगा, और मैं उदाहरणों पर आगे बढ़ूंगा



उपयोग के उदाहरण



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

$ नियम 1 {मार्जिन-टॉप: 200 पीएक्स; नियम-दोहराना: दोहराना; }

#gallery {नियम: $ रूल 1; }

# सेल्युलर डिव {स्नैप-टू: बॉटम}

<div id = "गैलरी">

<div /> <div /> <div /> <div /> <div /> ...

</ Div>

एक रूप जिसमें लेबल गाइड के साथ आकृतियों के साथ संरेखित होते हैं

$ नियम 1 {मार्जिन-लेफ्ट; 150px; नियम-प्रकार: ऊर्ध्वाधर; }

#form {नियम: $ rule1; }

#फॉर्म लेबल {स्नैप-टू: राइट}

#फॉर्म स्पैन {स्नैप-टू: लेफ्ट}

<div id = "form">

<div> <लेबल> Label1 </ लेबल> <span> <इनपुट /> </ span> </ div>

<div> <लेबल> Label2 </ लेबल> <span> <इनपुट /> </ span> </ div>

<div> <लेबल> Label3 </ लेबल> <span> <इनपुट /> <इनपुट /> <इनपुट /> </ span> </ div>

</ Div>

तीन-कॉलम लेआउट इस तरह किया जा सकता है:

$ नियम 1 {मार्जिन-बॉटम; 100%; नियम-दोहराना: दोहराना; }

# श्रावक {नियम: $ रूल १; }

#wrapper> div {स्नैप-टू: टॉप ($ रूल 1) बॉटम ($ रूल 1)}

निष्कर्ष

मार्गदर्शकों के व्यवहार में कई "सफेद धब्बे" होते हैं जिनकी जांच, मॉडलिंग और अध्ययन करने की आवश्यकता होती है। यह पालन करने वाले तत्वों और सामान्य प्रवाह, पालन और अस्थायी तत्वों के बीच संबंधों के लिए विशेष रूप से सच है, तत्वों को कैसे व्यवहार करना चाहिए अगर वे गाइड ग्रिड के बाएं और निचले किनारों का पालन करते हैं और इसी तरह। हालाँकि, एक बात स्पष्ट है कि यह तंत्र मौजूदा CSS2.1 नियमों को बहुत संशोधित नहीं करता है, लेकिन केवल उन्हें पूरक बनाता है। मार्गदर्शिका का कार्यान्वयन, मेरी राय में, CSS3 में समान डिस्प्ले टेम्प्लेट के कार्यान्वयन की तुलना में ब्राउज़र डेवलपर्स के लिए बहुत सरल है, और मेरे रास्ते में अधिक संभावनाएं और गतिशीलता हैं।



आपकी आलोचना, टिप्पणियों, परिवर्धन की प्रतीक्षा है।