पब्लिश होने की तारीख: 11 जून, 2025
बॉर्डर और सूडो-एलिमेंट हैक को अलविदा कहें और सीएसएस गैप डिज़ाइन का इस्तेमाल करें.
Microsoft Edge की टीम यह बताते हुए खुश है कि सीएसएस गैप डेकोरेशन, अब Chrome और Edge 139 में डेवलपर के लिए ट्रायल के तौर पर उपलब्ध है. यह फ़्लेक्स, ग्रिड, और कई कॉलम वाले लेआउट में आइटम के बीच के गैप को स्टाइल करने का एक नया तरीका है!
इसे आज़माएं और अपने सुझाव शेयर करें, ताकि आने वाले समय में इस एपीआई को बेहतर बनाया जा सके.
काम के लिंक
समस्या
कैलेंडर, कार्ड या डेटा ग्रिड जैसे यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट में स्टाइल गैप जोड़ने से, कॉम्पोनेंट को पढ़ने में आसानी होती है और उनका आकर्षण बढ़ता है. हालांकि, ग्रिड और फ़्लेक्सबॉक्स लेआउट में यह इफ़ेक्ट पाने के लिए, आम तौर पर बॉर्डर, स्यूडो-एलिमेंट या बैकग्राउंड की ट्रिक का इस्तेमाल करना पड़ता है. इन तरीकों से कई वजहों से समस्याएं हो सकती हैं.
- इन्हें समझना मुश्किल है: ये विज़ुअल स्टाइल के लिए स्ट्रक्चरल डिपेंडेंसी का इस्तेमाल करते हैं, जो सिमेंटिक एचटीएमएल के सिद्धांतों के मुताबिक नहीं है.
- सुलभता के लिहाज़ से सही नहीं: इनमें अक्सर अतिरिक्त DOM एलिमेंट की ज़रूरत होती है. इन एलिमेंट की वजह से, स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी में रुकावट आ सकती है.
- इन्हें मैनेज करना मुश्किल है: इनमें लेआउट लॉजिक का इस्तेमाल करना मुश्किल होता है. साथ ही, इनकी वजह से सभी कॉम्पोनेंट में एक जैसी स्टाइल लागू करना मुश्किल हो जाता है.
- परफ़ॉर्मेंस पर बुरा असर: इन तरीकों से, DOM में अनचाहे एलिमेंट जुड़ सकते हैं. इससे परफ़ॉर्मेंस से जुड़ी समस्याएं हो सकती हैं.
वेब प्लैटफ़ॉर्म पर, column-rule
प्रॉपर्टी की मदद से पहले से ही गैप को स्टाइल किया जा सकता है. हालांकि, फ़िलहाल यह सुविधा सिर्फ़ मल्टी-कॉलम लेआउट के लिए उपलब्ध है. वेब डेवलपर ने लंबे समय से, ग्रिड और फ़्लेक्सबॉक्स जैसे दूसरे काम के लेआउट टाइप में, गैप को स्टाइल करने के लिए एक जैसा तरीका उपलब्ध कराने का अनुरोध किया है.
समाधान: सीएसएस गैप डेकोरेशन
गैप डेकोरेशन, column-rule प्रॉपर्टी को ग्रिड और फ़्लेक्सबॉक्स जैसे अन्य लेआउट टाइप के साथ काम करने के लिए बढ़ाते हैं. साथ ही, इसे बेहतर बनाने के लिए एक नई row-rule प्रॉपर्टी जोड़ते हैं. इससे, अलग-अलग तरह के लेआउट में गैप को एक जैसा स्टाइल देने के साथ-साथ, अपनी पसंद के मुताबिक बनाने की सुविधा भी मिलती है.
सीएसएस गैप डेकोरेशन से ये फ़ायदे मिलते हैं:
- लेआउट पर कोई असर नहीं पड़ता: सजावट सिर्फ़ विज़ुअल के लिए होती है. इनसे लेआउट या स्पेस पर कोई असर नहीं पड़ता. इसलिए, इन्हें मौजूदा डिज़ाइन में बिना किसी डर के अपनाया जा सकता है.
- सिंटैक्स दोहराएं: सीएसएस ग्रिड की तरह ही, किसी कंटेनर के अलग-अलग हिस्सों में सजावट के पैटर्न बनाने के लिए,
repeat()सिंटैक्स का इस्तेमाल किया जा सकता है. इससे कम से कम सीएसएस का इस्तेमाल करके, बेहतर और एक जैसे डिज़ाइन बनाए जा सकते हैं. - बेहतर मार्कअप: अतिरिक्त एलिमेंट या स्यूडो-एलिमेंट की ज़रूरत नहीं है. सीधे तौर पर गैप को स्टाइल करें.
- पसंद के मुताबिक बनाने की सुविधा:
*rule-break,*rule-outset, औरgap-rule-paint-orderजैसी नई सीएसएस प्रॉपर्टी की मदद से, चौड़ाई, स्टाइल, और रंग के पारंपरिक नियमों के अलावा, पसंद के मुताबिक बनाने के ज़्यादा विकल्प मिलते हैं.
सीएसएस गैप डेकोरेशन की मदद से, अब पहले से ज़्यादा आसानी से ऐसे पेज लेआउट बनाए जा सकते हैं जो दिखने में अलग हों और जिनका रखरखाव आसान हो.
गैप डेकोरेटर्स का इस्तेमाल
सीएसएस गैप डेकोरेशन का इस्तेमाल करने के लिए, किसी ऐसे ब्राउज़र का इस्तेमाल करें जिस पर ये काम करते हों: Edge या Chrome के 139 वर्शन या इसके बाद के वर्शन. इसके बाद, edge://flags या chrome://flags पर जाकर, वेब प्लैटफ़ॉर्म की एक्सपेरिमेंटल सुविधाएं चालू करें फ़्लैग को टॉगल करें.
इंटरैक्टिव डेवलपर प्लैटफ़ॉर्म
अलग-अलग तरह के लेआउट आज़माने के लिए, इंटरैक्टिव डेवलपर प्लेसग्राउंड पर जाएं. यहां आपको सभी नई प्रॉपर्टी के साथ-साथ, सीएसएस गैप डेकोरेशन की सुविधा वाले लेआउट भी मिलेंगे.
बर्गर मेन्यू
बर्गर मेन्यू के डेमो में, column-rule-break: intersection प्रॉपर्टी का इस्तेमाल करके, कॉलम के बीच के अंतर को अलग-अलग करने का तरीका बताया गया है. इससे, हर इंटरसेक्शन में दिखने वाले अंतर को लाइन के अंतर से अलग किया जा सकता है.
डेमो में, सजावट की लंबाई में बदलाव करने के लिए भी column-rule-offset: -15px का इस्तेमाल किया गया है. इससे सजावट को हर चौराहे के किनारों से दूर किया जा सकता है.
Notebook
नोटबुक के डेमो में, row-rule-break: none यह पक्का करता है कि पंक्ति के डेकोरेशन, इंटरसेक्शन पर रुक न जाएं. वे कंटेनर के बाएं से दाएं लगातार चलते रहते हैं.
दूसरी ओर, column-rule-break: spanning-item यह पक्का करता है कि कॉलम के डिज़ाइन, स्पान वाले आइटम के पीछे न दिखें. ये डिज़ाइन, स्पान वाले आइटम पर शुरू और खत्म होते हैं, जिससे एक टी-इंटरसेक्शन बनता है.
row-rule प्रॉपर्टी, repeat() फ़ंक्शन का इस्तेमाल करके यह कंट्रोल करती है कि लेआउट के अलग-अलग सेक्शन में गैप डेकोरेशन कैसे लागू किए जाएं.
इससे स्टाइल पैटर्न चालू होता है, जिसमें हेडर और फ़ुटर में पंक्ति के नियम छिपे होते हैं. साथ ही, मुख्य कॉन्टेंट के आस-पास ज़्यादा मोटे और दूसरी जगहों पर ज़्यादा हल्के होते हैं.
सीएसएस से जुड़ी रोज़ की खबरें
डेली सीएसएस न्यूज़ के डेमो में, मैगज़ीन स्टाइल वाले लेआउट का इस्तेमाल किया गया है. साथ ही, कई ग्रिड और फ़्लेक्सबॉक्स कंटेनर में सीएसएस गैप डेकोरेशन तय किए गए हैं.
दाईं ओर मौजूद सुडोकू गेम पर ध्यान दें. इसमें 9x9 ग्रिड का इस्तेमाल किया गया है. साथ ही, लाइनों और कॉलम के बीच पतली और मोटी लाइनें खींचने के लिए, दोहराए जाने वाले पैटर्न का इस्तेमाल किया गया है:
.sudoku {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 6px;
column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
column-rule-style: solid;
column-rule-color: var(--secondary);
row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
row-rule-style: solid;
row-rule-color: var(--secondary);
}
सुझाव, राय या शिकायत के लिए अनुरोध करना
हमें खुशी है कि आपने सीएसएस गैप डेकोरेशन आज़माने का फ़ैसला लिया है. हमें लगता है कि इससे एक आम समस्या हल होती है. हमें इस बारे में आपका सुझाव या राय जानने में खुशी होगी, ताकि हम इस सुविधा को आपकी ज़रूरतों के हिसाब से बेहतर बना सकें.
सीएसएस गैप डेकोरेशन की सुविधा, फ़िलहाल Chromium में लागू की जा रही है. अगर आपने इसे आज़माया है, तो ध्यान रखें कि हम अब भी इस पर काम कर रहे हैं. इसलिए, हो सकता है कि आपको ऐसे मामले मिलें जिनमें यह उम्मीद के मुताबिक काम न करे. फ़िलहाल, कुछ सीमाएं हैं. जैसे, गैप डेकोरेशन को ऐनिमेट करना और बहुत ज़्यादा ग्रिड ट्रैक का इस्तेमाल करना.
अगर आपको कोई गड़बड़ी मिलती है या इस सुविधा के बारे में कोई सुझाव/राय है, तो Chromium में नई गड़बड़ी खोलकर अपना सुझाव/राय शेयर करें.