सीएसएस ग्रिड के साथ उन्नत चेकबॉक्स स्टाइलिंग
सीएसएस ग्रिड लेआउट मॉड्यूल न केवल एक लेआउट समस्या का एक बड़ा हल कर सकते हैं, बल्कि कुछ अच्छे पुराने पुराने मुद्दों को भी हल कर सकते हैं लंबे समय तक साथ निभाना, जैसे कि एक चेकबॉक्स लेबल स्टाइल.
जबकि लेबल दिखने के लिए एक अपेक्षाकृत सरल तरीका है जब यह दिखाई देता है बाद चेकबॉक्स, यह आसान नहीं है जब लेबल दिखाई देता है से पहले यह.
सीएसएस ग्रिड के बिना चेकबॉक्स स्टाइल
एक लेबल स्टाइल करना बाद एक चेकबॉक्स कुछ ऐसा है जो डेवलपर्स हम तब से कर रहे हैं जब हम इसके बारे में कहीं पढ़ते हैं। यह तकनीक उन शक्तिशाली डायनामिक्स के प्रमुख और पुराने उदाहरणों में से एक है जो सीएसएस के पास हो सकते हैं.
यहां वह कोड है जिससे आप पहले से ही परिचित हो सकते हैं एक लेबल शैलियों बाद एक चेकबॉक्स:
इनपुट: जाँच + लेबल / * शैली मुझे * /
ए स्टाइल लेबल बाद एक चेकबॉक्स ऐसा लग सकता है (हालाँकि, आप अन्य शैली के नियमों का भी उपयोग कर सकते हैं):
ऊपर सीएसएस कोड का उपयोग करता है आसन्न भाई कंघी बनानेवाला द्वारा चिह्नित + कुंजी। जब एक चेकबॉक्स अंदर होता है : जाँच राज्य, एक तत्व बाद यह (आमतौर पर एक लेबल) इस पद्धति का उपयोग करके स्टाइल किया जा सकता है.
इतनी सरल और प्रभावी तकनीक! क्या हो सकता था संभवतः इसके साथ गलत हो सकता है कुछ भी नहीं जब तक आप लेबल प्रदर्शित नहीं करना चाहते से पहले चेकबॉक्स.
आसन्न भाई कंघी बनाने वाला अगले तत्व का चयन करता है; इसका मतलब है कि लेबल को आना है बाद HTML स्रोत कोड में चेकबॉक्स.
तो, एक लेबल प्रकट करने के लिए से पहले स्क्रीन पर संबंधित चेकबॉक्स, हम इसे स्रोत कोड में चेकबॉक्स से पहले स्थानांतरित नहीं कर सकते हैं, ए के रूप में पिछले भाई चयनकर्ता सीएसएस में मौजूद नहीं है.
जो केवल एक विकल्प छोड़ता है: चेकबॉक्स और लेबल को स्थान देना का उपयोग करते हुए परिवर्तन या पद या हाशिया या किसी अन्य प्रकार की टेलीकेनेटिक शक्ति के साथ सीएसएस संपत्ति, ताकि स्क्रीन पर चेकबॉक्स के बाईं ओर लेबल दिखाई दे.
पारंपरिक विधि के साथ समस्याएं
कुछ भी नहीं है मुख्यत: उपरोक्त तकनीक के साथ गलत है, लेकिन यह हो सकता है कुछ मामलों में अक्षम है. मेरा मतलब उन मामलों से है जिनमें चेकबॉक्स और लेबल के पुनर्व्यवस्थित स्थान अब काम नहीं करते हैं.
उत्तरदायी सोचें, उदाहरण के लिए। आपके द्वारा प्रदर्शित डिवाइस के अनुसार आपको चेकबॉक्स का आकार बदलना या निरस्त करना पड़ सकता है। जब ऐसा होगा, आप करेंगे लेबल को भी बदलने की जरूरत है, चूंकि चेकबॉक्स के रिपॉजिटिंग / रिसाइज़िंग के जवाब में लेबल पर कोई स्वचालित पुनरीक्षण नहीं किया जाएगा.
हम इस नुकसान को खत्म कर सकते हैं अगर हम अभी कर सकते हैं चेकबॉक्स और लेबल के लिए कुछ ठोस लेआउट प्रदान करें, बजाय पृष्ठ पर उन्हें लगभग स्थिति के.
लेकिन, लगभग सभी लेआउट सिस्टम, जैसे टेबल या कॉलम, आपको करने की आवश्यकता होती है स्रोत कोड में चेकबॉक्स से पहले लेबल जोड़ें इसे स्क्रीन पर उसी तरह प्रदर्शित करने के लिए। ऐसा कुछ है जो हम नहीं करना चाहते हैं क्योंकि लेबल पर अगला तत्व चयनकर्ता काम करना बंद कर देगा.
दूसरी ओर, सीएसएस ग्रिड, एक लेआउट सिस्टम है नहीं स्रोत कोड में तत्वों के प्लेसमेंट / आदेश पर निर्भर.
ग्रिड लेआउट की रीऑर्डरिंग क्षमताएं जानबूझकर प्रभावित करती हैं केवल दृश्य प्रतिपादन, स्रोत आदेश के आधार पर भाषण आदेश और नेविगेशन को छोड़ना। यह स्रोत आदेश को छोड़ते समय लेखकों को दृश्य प्रस्तुति में हेरफेर करने की अनुमति देता है ... - CSS ग्रिड लेआउट मॉड्यूल स्तर 1, W3C
इस प्रकार, सीएसएस ग्रिड एक आदर्श समाधान है दिखाई देने वाले लेबल को स्टाइल करें से पहले चेकबॉक्स.
सीएसएस ग्रिड के साथ चेकबॉक्स स्टाइल
चलिए HTML कोड से शुरू करते हैं. चेकबॉक्स और लेबल का क्रम पहले की तरह ही रहेगा. हम दोनों को एक ग्रिड में जोड़ देते हैं.
सीएसएस साथ है:
#cbgrid प्रदर्शन: ग्रिड; ग्रिड-टेम्प्लेट-क्षेत्र: "बाएं दाएँ"; चौड़ाई: 150px; इनपुट [प्रकार = चेकबॉक्स] ग्रिड-क्षेत्र: सही; लेबल ग्रिड-क्षेत्र: बाएं;
मैं गहराई से नहीं जाऊंगा कि सीएसएस ग्रिड कैसे काम करता है, जैसा कि मैंने पहले ही लिखा था विषय पर विस्तृत लेख, कि आप यहाँ पढ़ सकते हैं। कुछ मूल बातें, हालांकि: ए प्रदर्शन: ग्रिड संपत्ति एक तत्व को ग्रिड कंटेनर में बदल देती है, ग्रिड क्षेत्र पहचानता है कि ग्रिड क्षेत्र एक तत्व से संबंधित है, और ग्रिड टेम्पलेट क्षेत्रों एक ग्रिड लेआउट बनाता है, जिसमें विभिन्न ग्रिड क्षेत्र शामिल होते हैं.
उपरोक्त कोड में, हैं दो ग्रिड क्षेत्र: "बाएं" तथा "सही". वे मेक अप कर रहे हैं एक ग्रिड पंक्ति के दो स्तंभ. चेकबॉक्स का है "सही" क्षेत्र और लेबल को "बाएं". यहां बताया गया है वे स्क्रीन पर कैसे दिखते हैं:
चूंकि हमने चेकबॉक्स के सापेक्ष स्थान और स्रोत कोड में लेबल को नहीं बदला है, इसलिए हम कर सकते हैं अभी भी आसन्न सिबलिंग कोम्बिनेटर का उपयोग करें:
इनपुट: जाँच + लेबल / * शैली मुझे * /
ध्यान दें कि एक ग्रिड आइटम है हमेशा अवरुद्ध; यह आसपास के बॉक्स के साथ दिखाई देता है जिसे के रूप में जाना जाता है ग्रिड-स्तरीय बॉक्स. अगर आप ऐसा नहीं चाहते हैं, उदाहरण के लिए एक लेबल, उस वस्तु पर एक आवरण रखें (इसे दूसरे तत्व में लपेटें) और ग्रिड क्षेत्र में उस आवरण को चालू करें.
यह बात है, दोस्तों। सीएसएस ग्रिड उम्मीद है कि आप उन cheeky चेकबॉक्स के लेआउट नीचे कील में मदद करता है.
