CSS में separator खींचने का नया तरीका: `CSS Gap Decorations`

• वेबपेज में सेक्शनों के बीच separator जोड़ना content को साफ़ तौर पर व्यवस्थित करने और readability बढ़ाने की एक आम design technique है
• border जैसी मौजूदा CSS techniques से separator जोड़े जा सकते हैं, लेकिन size बदलने और अतिरिक्त code की ज़रूरत जैसी सीमाएँ मौजूद हैं
• CSS Gap Decorations column-rule और row-rule जैसी properties जोड़कर इन समस्याओं का समाधान करता है

मौजूदा CSS separator techniques और उनकी सीमाएँ

• border property separator जोड़ने का एक सामान्य तरीका है, लेकिन इसमें ये समस्याएँ हो सकती हैं
  • border जोड़ने पर element का size बदल सकता है
  • पहले और आख़िरी element के लिए अतिरिक्त code लिखना पड़ सकता है
  • Flexbox layout में line wrap होने पर separator पूरे क्षेत्र को cover नहीं कर पाता
• ::before और ::after pseudo-elements का उपयोग करके separator जोड़े जा सकते हैं, लेकिन इनकी भी कुछ सीमाएँ हैं
  • पहले और आख़िरी element के लिए अतिरिक्त code की ज़रूरत
  • जटिल absolute positioning code की आवश्यकता
• Grid container पर background color लगाकर और items पर background color सेट करके separator जैसा प्रभाव बनाया जा सकता है
  • separator की लंबाई समायोजित नहीं की जा सकती
  • खाली cell होने पर background color दिखाई देता है
  • item अगर cell को पूरा नहीं भरता, तो background color दिखाई देता है
  • page background अगर एकल रंग का न हो, तो यह काम नहीं करता
• Multi-column layout में column-rule property से separator जोड़े जा सकते हैं, लेकिन इसकी भी सीमाएँ हैं
  • यह केवल multi-column layout में काम करता है
  • content की inline direction को नियंत्रित नहीं किया जा सकता

CSS Gap Decorations प्रस्ताव

• CSS Gap Decorations ऊपर बताई गई समस्याओं को हल करने के लिए एक नया प्रस्ताव है
• मुख्य प्रस्ताव
  • column-rule property को Grid और Flexbox layout पर भी लागू करने के लिए विस्तार देना
  • नई row-rule property पेश करना
  • container के हर हिस्से के लिए अलग separator settings संभव बनाना
• row-rule-color property का उपयोग करके separator का रंग बदला जा सकता है

  .alternate-red-blue {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    gap: 10px;  
    row-rule: 1px solid;  
    row-rule-color: red blue;  
  }  
  

• अलग-अलग मोटाई और रंग वाले separator सेट किए जा सकते हैं

  .varying-widths {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    row-gap: 10px;  
    row-rule: 5px solid black / repeat(auto, 1px solid #666) / 3px solid black;  
  }  
  

• intersections पर separator के व्यवहार को नियंत्रित किया जा सकता है
  • *-rule-break और *-rule-outset properties का उपयोग किया जा सकता है
  • intersections पर separator कहाँ शुरू और समाप्त हो, इसे नियंत्रित किया जा सकता है
  • separator की लंबाई और offset को बारीकी से समायोजित किया जा सकता है

प्रस्ताव पर feedback का अनुरोध

• CSS Gap Decorations प्रस्ताव को developer feedback के आधार पर बेहतर बनाया जाएगा
• अधिक जानकारी official explainer में देखी जा सकती है
• feedback GitHub issue के रूप में submit किया जा सकता है
• खास तौर पर intersections पर separator के व्यवहार को लेकर feedback का स्वागत है

[GN⁺]

Hacker News की राय

• मैं एक नया pseudo-element बनाना चाहूँगा: .container:gap { background-color: red; }

  • इससे dotted line या gradient जैसे ज़्यादा आकर्षक backgrounds बनाए जा सकते हैं
  • { padding: 2px } का उपयोग करके divider के सिरों पर खाली जगह सेट की जा सकती है
  • :gap-horz और :gap-vert का उपयोग करके vertical और horizontal gaps को अलग-अलग सेट किया जा सकता है
  • .container:gap:nth-gap(2n) { color: blue; } का उपयोग करके alternating colors मिल सकते हैं

• committee द्वारा किया गया design हमेशा सबसे अच्छा नहीं होता, लेकिन एक non-native speaker के रूप में मुझे लगता है कि प्रस्तावित property names अपना मतलब ठीक से नहीं बता रहे

  • उदाहरण के लिए, यह gap को define करता है लेकिन divider को draw करता है

• अच्छा होगा अगर adjustable panels के use case पर भी विचार किया जाए

  • भले ही implementation पूरी तरह user space में हो, अगर stylable dividers events receive कर सकें तो वह उपयोगी होगा

• border जोड़ने से item का size बदल जाता है, जो शायद वांछनीय नहीं है

  • यह समस्या 10 साल से भी ज़्यादा समय से हल की जा चुकी है
  • मुझे लगता है कि हर किसी की CSS file की पहली line * { box-sizing: border-box; } ही होती होगी
  • अगर border को width के अंदर रखा जाए, तो इसे ज़्यादा तर्कसंगत तरीके से सोचा जा सकता है

• दिलचस्प। आजकल मैं QML में ज़्यादातर UI काम कर रहा हूँ, और यह लगभग हर समस्या को कवर करता है

  • कुछ महीने पहले, मैंने calendar view में items के बीच gap का उपयोग करके background को दिखने दिया, और इस तरह grid lines implement कीं
  • layout की "spacing" property और GPU को काम करने दिया

• विचार ठीक है, लेकिन यह शायद 10 साल पहले ज़्यादा उपयोगी होता

  • modern CSS में एक ही selector और property से dividers संभाले जा सकते हैं
  • यह .things .thing:not(:last-child) { border-bottom: 1px solid gray; } जैसे तरीके से किया जा सकता है
  • लेख में इसका ज़िक्र है, लेकिन लगता है कि edge cases की आवृत्ति को बढ़ा-चढ़ाकर आँका गया है

• यह लंबे समय से एक परेशान करने वाली समस्या रही है। अच्छा है कि कोई इस पर कुछ कर रहा है

  • यह सिर्फ display: grid नहीं है, क्योंकि यह non-fixed-width elements पर लागू नहीं होता
  • छोटे screens पर links के बीच का | पहले line के अंत या दूसरी line की शुरुआत में आ सकता है

• इससे मुझे एक जर्मन डिज़ाइनर की कहावत याद आती है: "जब डिज़ाइनर के पास और कोई विचार नहीं बचता, तो वह कुछ lines जोड़ देता है"

  • जब content को साफ़-साफ़ अलग करने का कोई तरीका नहीं होता, तब लोग lines जोड़ना शुरू कर देते हैं

• मुझे यह समस्या अक्सर आती है, और मैं <hr/> से बेहतर तरीका चाहता हूँ

  • यह table rows या multi-column layouts में काम नहीं करता

• उम्मीद है यह पास हो जाए... AI का उपयोग करके flexbox के बारे में अपनी अधूरी जानकारी को संभालना एक वरदान रहा है, लेकिन यह किसी असली समाधान जैसा लगता है