रक्षात्मक (Defensive) CSS

<p>विशिष्ट CSS समस्याएँ होने से रोकने के लिए snippets का एक collection<br /> - Flexbox line wrapping → `flex-wrap: wrap;`<br /> - खाली जगह देना → `margin-right: 1rem;`<br /> - लंबा content जिसे wrap नहीं होना चाहिए → `text-overflow: ellipsis; white-space:nowrap; overflow: hidden;`<br /> - image के खिंचने/विकृत होने से बचाव → `object-fit: cover;`<br /> - scroll chaining lock → `overscroll-behavior-y: contain;` <br /> - CSS variable fallback value देना → `max-width: calc(100% - var(--actions-width, 70px));`<br /> - fixed height → `height` की बजाय `min-height` का उपयोग <br /> - fixed width → `width` की बजाय `min-width` का उपयोग <br /> - background repeat हटाना → `background-repeat: no-repeat;`<br /> - vertical media query का उपयोग → `position:sticky` जैसी चीज़ें इस्तेमाल करते समय केवल एक निश्चित vertical size से ऊपर ही लागू करें `@media (min-height:600px) {}`<br /> - Flexbox items को arrange करते समय `justify-content: space-between;` की बजाय `gap: 1rem;` का उपयोग<br /> - image के ऊपर सफेद text रखते समय image load fail होने की स्थिति के लिए → `background-color: grey;` का उपयोग <br /> - CSS Grid पर fixed values इस्तेमाल करते समय सावधान रहें → हमेशा media query का उपयोग करें <br /> - scrollbar केवल ज़रूरत पड़ने पर दिखाएँ → `overflow-y: auto;` <br /> - scrollbar आने पर layout change हटाना → `scrollbar-gutter: stable;` <br /> - Flexbox में minimum content size निर्दिष्ट करना → `min-width: 0;` (default value `auto` होने से overflow होता है)<br /> - CSS Grid में minimum content size निर्दिष्ट करना → `minmax()` का उपयोग <br /> - CSS Grid इस्तेमाल करते समय Auto Fit vs. Auto Fill → ज़्यादातर मामलों में `auto-fill` बेहतर है <br /> - image की maximum width तय करना → `max-width: 100%` <br /> - grid container child पर `position: sticky` इस्तेमाल करते समय `align-self: start` लागू करें <br /> - group selector specification दूसरे browsers में काम न करे, इसलिए उन्हें अलग-अलग बाँटें</p>