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

विशिष्ट CSS समस्याएँ होने से रोकने के लिए snippets का एक collection

• Flexbox line wrapping → flex-wrap: wrap;

• खाली जगह देना → margin-right: 1rem;

• लंबा content जिसे wrap नहीं होना चाहिए → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;

• image के खिंचने/विकृत होने से बचाव → object-fit: cover;

• scroll chaining lock → overscroll-behavior-y: contain;

• CSS variable fallback value देना → max-width: calc(100% - var(--actions-width, 70px));

• fixed height → height की बजाय min-height का उपयोग

• fixed width → width की बजाय min-width का उपयोग

• background repeat हटाना → background-repeat: no-repeat;

• vertical media query का उपयोग → position:sticky जैसी चीज़ें इस्तेमाल करते समय केवल एक निश्चित vertical size से ऊपर ही लागू करें @media (min-height:600px) {}

• Flexbox items को arrange करते समय justify-content: space-between; की बजाय gap: 1rem; का उपयोग

• image के ऊपर सफेद text रखते समय image load fail होने की स्थिति के लिए → background-color: grey; का उपयोग

• CSS Grid पर fixed values इस्तेमाल करते समय सावधान रहें → हमेशा media query का उपयोग करें

• scrollbar केवल ज़रूरत पड़ने पर दिखाएँ → overflow-y: auto;

• scrollbar आने पर layout change हटाना → scrollbar-gutter: stable;

• Flexbox में minimum content size निर्दिष्ट करना → min-width: 0; (default value auto होने से overflow होता है)

• CSS Grid में minimum content size निर्दिष्ट करना → minmax() का उपयोग

• CSS Grid इस्तेमाल करते समय Auto Fit vs. Auto Fill → ज़्यादातर मामलों में auto-fill बेहतर है

• image की maximum width तय करना → max-width: 100%

• grid container child पर position: sticky इस्तेमाल करते समय align-self: start लागू करें

• group selector specification दूसरे browsers में काम न करे, इसलिए उन्हें अलग-अलग बाँटें