Savunmacı (Defensive) CSS

<p>Belirli CSS sorunlarının ortaya çıkmasını önlemeye yönelik snippet koleksiyonu<br /> - Flexbox satır kaydırma → flex-wrap: wrap;<br /> - Boş alan bırakma → margin-right: 1rem;<br /> - Satır kaymaması gereken uzun içerik → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;<br /> - Görselin uzamasını/deforme olmasını önleme → object-fit: cover;<br /> - Zincirleme kaydırmayı kilitleme → overscroll-behavior-y: contain; <br /> - CSS değişkeni için fallback değeri verme → max-width: calc(100% - var(--actions-width, 70px));<br /> - Sabit yükseklik → height yerine min-height kullanın <br /> - Sabit genişlik → width yerine min-width kullanın <br /> - Arka plan tekrarını kaldırma → background-repeat: no-repeat;<br /> - Dikey media query kullanımı → `position:sticky` gibi şeyleri kullanırken yalnızca belirli bir dikey boyutun üzerinde uygulayın @media (min-height:600px) {}<br /> - Flexbox öğelerini dizerken justify-content: space-between; yerine gap: 1rem; kullanın<br /> - Görsel üzerine beyaz metin koyarken, görsel yüklenemezse buna karşı önlem → background-color: grey; kullanın <br /> - CSS Grid üzerinde sabit değer kullanırken dikkatli olun → her zaman media query kullanın <br /> - Kaydırma çubuğunu yalnızca gerektiğinde gösterme → overflow-y: auto; <br /> - Kaydırma çubuğu oluştuğunda yerleşim değişimini engelleme → scrollbar-gutter: stable; <br /> - Flexbox'ta minimum içerik boyutunu belirtme → min-width: 0; (varsayılan değer auto olduğu için overflow oluşur)<br /> - CSS Grid'de minimum içerik boyutunu belirtme → minmax() kullanın <br /> - CSS Grid kullanırken Auto Fit vs. Auto Fill → çoğu durumda auto-fill daha iyidir <br /> - Görsel için maksimum genişlik belirleme → max-width: 100% <br /> - Grid container child üzerinde postition: sticky kullanırken align-self: start uygulayın <br /> - Grup seçicisi tanımlamaları bazı tarayıcılarda çalışmayabilir, bu yüzden ayrı ayrı ayırın</p>