Savunmacı (Defensive) CSS

Belirli CSS sorunlarının ortaya çıkmasını önlemeye yönelik snippet koleksiyonu

• Flexbox satır kaydırma → flex-wrap: wrap;

• Boş alan bırakma → margin-right: 1rem;

• Satır kaymaması gereken uzun içerik → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;

• Görselin uzamasını/deforme olmasını önleme → object-fit: cover;

• Zincirleme kaydırmayı kilitleme → overscroll-behavior-y: contain;

• CSS değişkeni için fallback değeri verme → max-width: calc(100% - var(--actions-width, 70px));

• Sabit yükseklik → height yerine min-height kullanın

• Sabit genişlik → width yerine min-width kullanın

• Arka plan tekrarını kaldırma → background-repeat: no-repeat;

• Dikey media query kullanımı → position:sticky gibi şeyleri kullanırken yalnızca belirli bir dikey boyutun üzerinde uygulayın @media (min-height:600px) {}

• Flexbox öğelerini dizerken justify-content: space-between; yerine gap: 1rem; kullanın

• Görsel üzerine beyaz metin koyarken, görsel yüklenemezse buna karşı önlem → background-color: grey; kullanın

• CSS Grid üzerinde sabit değer kullanırken dikkatli olun → her zaman media query kullanın

• Kaydırma çubuğunu yalnızca gerektiğinde gösterme → overflow-y: auto;

• Kaydırma çubuğu oluştuğunda yerleşim değişimini engelleme → scrollbar-gutter: stable;

• Flexbox'ta minimum içerik boyutunu belirtme → min-width: 0; (varsayılan değer auto olduğu için overflow oluşur)

• CSS Grid'de minimum içerik boyutunu belirtme → minmax() kullanın

• CSS Grid kullanırken Auto Fit vs. Auto Fill → çoğu durumda auto-fill daha iyidir

• Görsel için maksimum genişlik belirleme → max-width: 100%

• Grid container child üzerinde postition: sticky kullanırken align-self: start uygulayın

• Grup seçicisi tanımlamaları bazı tarayıcılarda çalışmayabilir, bu yüzden ayrı ayrı ayırın