CSS Defensif

<p>Koleksi snippet untuk mencegah timbulnya masalah CSS tertentu<br /> - Membungkus baris Flexbox → flex-wrap: wrap;<br /> - Memberi ruang kosong → margin-right: 1rem;<br /> - Konten panjang yang tidak boleh pindah baris → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;<br /> - Mencegah gambar meregang/terdistorsi → object-fit: cover;<br /> - Mengunci rantai scroll → overscroll-behavior-y: contain; <br /> - Memberi nilai fallback untuk variabel CSS → max-width: calc(100% - var(--actions-width, 70px));<br /> - Tinggi tetap → gunakan min-height daripada height <br /> - Lebar tetap → gunakan min-width daripada width <br /> - Menghapus pengulangan background → background-repeat: no-repeat;<br /> - Memanfaatkan media query vertikal → saat memakai hal seperti position:sticky, terapkan hanya di atas tinggi vertikal tertentu @media (min-height:600px) {}<br /> - Saat menyusun item Flexbox, gunakan gap: 1rem; alih-alih justify-content: space-between;<br /> - Saat menaruh teks putih di atas gambar, tangani kegagalan pemuatan gambar → gunakan background-color: grey; <br /> - Hati-hati memakai nilai tetap di atas CSS Grid → selalu gunakan media query <br /> - Tampilkan scrollbar hanya saat diperlukan → overflow-y: auto; <br /> - Hilangkan perubahan layout saat scrollbar muncul → scrollbar-gutter: stable; <br /> - Menentukan ukuran konten minimum di Flexbox → min-width: 0; (nilai default-nya auto sehingga menyebabkan overflow)<br /> - Menentukan ukuran konten minimum di CSS Grid → gunakan minmax() <br /> - Saat menggunakan CSS Grid, Auto Fit vs. Auto Fill → dalam kebanyakan kasus auto-fill lebih baik <br /> - Menentukan lebar maksimum gambar → max-width: 100% <br /> - Saat memakai postition: sticky pada child container grid, terapkan align-self: start <br /> - Selector grup mungkin tidak bekerja di browser lain, jadi pisahkan masing-masing</p>