Pernah bingung kenapa elemen yang sudah kamu sembunyikan pakai visibility: hidden tetap nge-"makan" tempat di halaman? Atau kenapa konten malah meluber keluar dari kotaknya seperti adonan yang tidak muat di loyang? Nah, kamu tidak sendirian — ini adalah salah satu sumber frustrasi terbesar bagi pemula CSS.
Di artikel ke-4 dari Seri Belajar CSS ini, kita akan bedah tuntas tiga properti krusial: CSS display, visibility, dan overflow. Ketiganya mengontrol bagaimana elemen tampil di layar — dan kalau kamu belum paham perbedaannya, desain webmu bisa berakhir berantakan. Yuk, kita mulai!
🖥️ CSS Display — "Aturan Main" Sebuah Elemen
Bayangkan kamu sedang menata furnitur di ruang tamu. Ada yang bisa kamu taruh berdampingan (sofa kecil berjejer), ada yang harus sendiri satu baris penuh (lemari besar), dan ada yang bahkan tidak terlihat sama sekali karena disembunyikan di gudang. Itulah filosofi dari properti CSS display.
Properti display menentukan bagaimana sebuah elemen berpartisipasi dalam flow layout halaman — apakah ia mendominasi satu baris penuh, berbagi baris dengan tetangganya, atau menghilang dari alur dokumen sama sekali.
Nilai-nilai paling penting dari properti display yang wajib kamu tahu:
| Nilai | Perilaku | Contoh Elemen Default |
|---|---|---|
| block | Mengisi lebar penuh, selalu mulai di baris baru | div, h1, p |
| inline | Menyesuaikan konten, berbagi baris dengan elemen lain | span, a, strong |
| inline-block | Seperti inline, tapi bisa diatur lebar & tingginya | button, img |
| flex | Aktifkan Flexbox pada elemen kontainer | Diatur manual oleh developer |
| grid | Aktifkan CSS Grid pada elemen kontainer | Diatur manual oleh developer |
| none | Elemen menghilang total dari halaman, tidak ada jejak ruang | — |
Misalnya kamu mau buat link <a> tampil seperti tombol besar yang memenuhi lebar kontainer:
a.tombol-besar { display: block; background: #6366f1; color: white; padding: 14px 28px; text-align: center; }
Elemen ini akan lenyap total — seolah tidak pernah ada dalam HTML. Tidak ada ruang tersisa.
.pesan-error { display: none; /* sembunyi sampai ada error */ } .pesan-error.aktif { display: block; /* muncul saat ada kelas .aktif */ }
Ideal untuk item menu atau tag yang berjejer tapi tetap butuh kontrol lebar/tinggi/padding.
.tag-badge { display: inline-block; padding: 4px 14px; border-radius: 20px; background: #f1f0ff; color: #6366f1; }
Gunakan Flexbox (display: flex) untuk layout horizontal yang mudah dikontrol. Ini jauh lebih modern dibanding menggunakan float atau inline-block secara manual. Flex adalah pilihan utama untuk layout navigasi, kartu, dan toolbar.
👻 CSS Visibility — "Hantu" yang Tetap Makan Tempat
Bayangkan kamu punya teman yang suka ngilang pas giliran bayar, tapi kursinya di meja makan tetap dia pakai. Nah, itulah perilaku CSS visibility: hidden — elemen tidak terlihat di mata, tapi tetap menempati ruang di layout.
- Elemen tidak terlihat
- Ruang/space tetap ada
- Cocok untuk animasi fade-in/out
- Child element bisa dibuat visible kembali
- Elemen tidak terlihat
- Ruang/space ikut hilang
- Layout menyesuaikan ulang
- Child element juga ikut hilang
Selain hidden, ada juga nilai visibility: collapse yang khusus digunakan untuk menyembunyikan baris atau kolom dalam tabel. Tapi yang paling sering kamu pakai hanya dua: visible (default) dan hidden.
.tooltip { visibility: hidden; /* tersembunyi tapi space tetap ada */ opacity: 0; transition: opacity 0.3s ease; } .tombol:hover .tooltip { visibility: visible; /* muncul saat hover dengan animasi */ opacity: 1; }
Properti visibility bisa dikombinasikan dengan opacity dan transition untuk menciptakan animasi tooltip atau dropdown yang halus — sesuatu yang tidak bisa dilakukan dengan display: none karena properti display tidak bisa di-transisikan secara langsung!
🌊 CSS Overflow — Mengontrol Konten yang "Tumpah"
Pernah lihat gelas yang diisi air terlalu penuh sampai tumpah? Persis itulah yang terjadi saat konten melebihi ukuran kontainernya di CSS. Properti CSS overflow adalah cara kamu memutuskan apa yang terjadi pada konten yang "tumpah" itu — dipotong, diberi scrollbar, atau dibiarkan meluber.
Berguna untuk komentar, chat box, atau daftar panjang dalam kontainer terbatas.
.kotak-komentar { height: 300px; overflow-y: auto; /* scroll hanya vertikal */ overflow-x: hidden; /* potong konten horizontal */ border: 1px solid #e5e7eb; padding: 16px; }
Trik klasik untuk membuat gambar pas di dalam kotak dengan border-radius bulat.
.avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; /* gambar terpotong jadi bulat */ } .avatar img { width: 100%; height: 100%; object-fit: cover; }
Sangat berguna untuk judul artikel atau nama produk yang terlalu panjang di dalam kartu.
.judul-kartu { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* tampilkan "..." di ujung */ }
Jika kamu menggunakan overflow: hidden pada elemen induk, semua elemen anak yang menggunakan position: absolute atau sticky bisa ikut terpotong! Ini adalah jebakan yang sering mengejutkan pemula. Solusinya: pastikan kontainer overflow bukan ancestor dari elemen yang diposisikan.
Gunakan overflow: auto daripada overflow: scroll untuk pengalaman yang lebih rapi. Dengan auto, scrollbar hanya muncul saat dibutuhkan — tidak ada scrollbar kosong yang mengganggu estetika tampilanmu.
🔑 Kapan Pakai yang Mana? — CSS Display, Visibility, dan Overflow
Setelah mempelajari ketiga properti di atas, mungkin kamu bertanya: "Kalau semua bisa menyembunyikan elemen, pakai yang mana?" Jawabannya tergantung tujuan. Ini panduan singkatnya:
| Situasi | Gunakan | Alasan |
|---|---|---|
| Sembunyikan elemen, layout menyesuaikan | display: none | Elemen benar-benar hilang dari alur |
| Sembunyikan elemen tapi jaga posisi | visibility: hidden | Space tetap ada, cocok untuk transisi |
| Konten panjang dalam kotak terbatas | overflow: auto/scroll | Beri scrollbar agar konten tetap bisa diakses |
| Potong konten di luar batas | overflow: hidden | Bersihkan tampilan, efek masking |
| Ubah cara elemen berpartisipasi di layout | display: block/inline/flex | Kontrol full atas perilaku layout elemen |
No comments:
Post a Comment