CSS Defensif

Koleksi snippet untuk mencegah timbulnya masalah CSS tertentu

• Membungkus baris Flexbox → flex-wrap: wrap;

• Memberi ruang kosong → margin-right: 1rem;

• Konten panjang yang tidak boleh pindah baris → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;

• Mencegah gambar meregang/terdistorsi → object-fit: cover;

• Mengunci rantai scroll → overscroll-behavior-y: contain;

• Memberi nilai fallback untuk variabel CSS → max-width: calc(100% - var(--actions-width, 70px));

• Tinggi tetap → gunakan min-height daripada height

• Lebar tetap → gunakan min-width daripada width

• Menghapus pengulangan background → background-repeat: no-repeat;

• Memanfaatkan media query vertikal → saat memakai hal seperti position:sticky, terapkan hanya di atas tinggi vertikal tertentu @media (min-height:600px) {}

• Saat menyusun item Flexbox, gunakan gap: 1rem; alih-alih justify-content: space-between;

• Saat menaruh teks putih di atas gambar, tangani kegagalan pemuatan gambar → gunakan background-color: grey;

• Hati-hati memakai nilai tetap di atas CSS Grid → selalu gunakan media query

• Tampilkan scrollbar hanya saat diperlukan → overflow-y: auto;

• Hilangkan perubahan layout saat scrollbar muncul → scrollbar-gutter: stable;

• Menentukan ukuran konten minimum di Flexbox → min-width: 0; (nilai default-nya auto sehingga menyebabkan overflow)

• Menentukan ukuran konten minimum di CSS Grid → gunakan minmax()

• Saat menggunakan CSS Grid, Auto Fit vs. Auto Fill → dalam kebanyakan kasus auto-fill lebih baik

• Menentukan lebar maksimum gambar → max-width: 100%

• Saat memakai postition: sticky pada child container grid, terapkan align-self: start

• Selector grup mungkin tidak bekerja di browser lain, jadi pisahkan masing-masing