- पहले CSS
gap प्रॉपर्टी से spacing बनाया जा सकता था, लेकिन gap क्षेत्र को खुद स्टाइल करना संभव नहीं था, इसलिए कई workaround तरीकों (अतिरिक्त elements, border, pseudo-element आदि) की ज़रूरत पड़ती थी
- नया CSS gap decorations फीचर
row-rule, column-rule आदि प्रॉपर्टीज़ के जरिए layout items के बीच सीधे लाइनें (separator) खींचने देता है
- Grid, Flexbox, Multi-column, और जल्द ही Masonry तक सभी प्रमुख layouts में decoration लागू किया जा सकता है, और अलग markup या अनावश्यक elements के बिना सिर्फ CSS से structural/visual सुधार संभव है
- कई तरह के styles (thickness, color, pattern आदि) के repeat/combination को support करता है, और
repeat(), outset, paint-order आदि से fine-grained control संभव है
- फिलहाल यह Chromium-आधारित ब्राउज़रों (Chrome/Edge 139+) में केवल flag enable करने पर उपलब्ध है, और अभी standardization/expansion जारी है
मौजूदा gap की सीमाएँ और बदलाव
- पहले gap क्षेत्र को स्टाइल करना मुश्किल था, और separator के लिए border या नकली element जोड़ने पड़ते थे
- इस तरीके से layout size, accessibility, markup complexity आदि में कई कमियाँ पैदा होती थीं
- अब gap decorations standard आ गया है, जिससे सिर्फ सरल CSS प्रॉपर्टीज़ के जरिए spacing क्षेत्र में decoration (जैसे line) लागू किया जा सकता है
CSS gap decorations का परिचय
- column-rule: मौजूदा multi-column में vertical separator खींचने के लिए इस्तेमाल होता है (उदाहरण:
column-rule: 1px solid black;)
- अब इस प्रॉपर्टी को flexbox, grid आदि में भी इस्तेमाल किया जा सकता है
.my-grid-container {
display: grid;
gap: 2px;
column-rule: 2px solid pink;
}
- row-rule: rows के बीच separator खींच सकता है
.my-flex-container {
display: flex;
gap: 10px;
row-rule: 10px dotted limegreen;
column-rule: 5px dashed coral;
}
- कई styles का repeat/combination:
repeat() या comma separation से अलग-अलग styles मिलाए जा सकते हैं
.my-container {
display: grid;
gap: 2px;
row-rule:
repeat(2, 1px dashed red),
2px solid black,
repeat(auto, 1px dotted green);
}
- fine-grained control प्रॉपर्टीज़:
row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order आदि के जरिए position, intersection, overlap order आदि को बारीकी से नियंत्रित किया जा सकता है
उदाहरण: gap decorations का व्यावहारिक उपयोग
- उदाहरण पेज में body को grid बनाया गया है, और header/nav/main/footer को gap से अलग किया गया है
row-rule से अलग thickness, color और style वाली separator lines लागू की जा सकती हैं- nav मेनू में flexbox और
column-rule से items के बीच lines खींची जा सकती हैं
- main क्षेत्र में flexbox से image और text को masonry रूप में रखा गया है, और
row-rule, column-rule से grid-style structure को उभारा गया है
column-rule-outset: 0; आदि से line की शुरुआत/अंत की position को बारीकी से समायोजित किया जा सकता है
ब्राउज़र support और activation
- फिलहाल Chrome/Edge 139+ जैसे Chromium-आधारित ब्राउज़रों में flag (about://flags → Experimental Web Platform Features) enable करना ज़रूरी है
- औपचारिक standardization जारी है और feedback व experiments को प्रोत्साहित किया जा रहा है
और जानें व Playground
अभी कोई टिप्पणी नहीं है.