ID (Indonesia) Translation

CSS - Resize: Memberdayakan Pengguna untuk Mengendalikan Dimensi Elemen

Hai teman-teman, pengembang web masa depan! Hari ini, kita akan melihat properti CSS yang menarik yang memberikan kekuatan penyesuaian ukuran elemen langsung ke tangan pengunjung website Anda. Selamat datang ke dunia resize!

Apa Itu Properti CSS Resize?

Sebelum kita masuk ke detilnya, mari kita mulai dengan pertanyaan sederhana: Apakah Anda pernah melihat handle kecil di sudut kanan bawah beberapa textarea yang memungkinkan Anda mengatur ukurannya? Itu adalah properti resize dalam aksi!

Properti resize dalam CSS memungkinkan elemen dapat diubah ukurannya oleh pengguna. Itu seperti memberikan pengguna Anda sebuah handle drag kecil untuk mengatur ukuran beberapa elemen di halaman web Anda. Keren, kan?

Terapkan ke

Sekarang, Anda mungkin berpikir, "Apakah saya bisa membuat segala sesuatu di halaman web saya dapat diubah ukurannya?" Well, tidak semua. Properti resize secara utama terapkan ke elemen yang memiliki overflow diatur ke sesuatu selain visible. Ini biasanya termasuk:

• Elemen <textarea>
• Elemen dengan overflow: auto atau overflow: scroll

Tapi jangan khawatir, kita akan jelajahi bagaimana membuat elemen lain dapat diubah ukurannya juga!

Sintaks

Mari kitaura sintaks penggunaan properti resize:

element {
resize: value;
}

Simple, kan? Sekarang, mari kita jelajahi nilai yang berbeda yang dapat kita gunakan.

Nilai CSS Resize

Berikut adalah tabel yang menggabungkan semua nilai yang mungkin untuk properti resize:

Nilai	Deskripsi
none	Elemen tidak dapat diubah ukurannya
vertical	Elemen dapat diubah ukurannya secara vertikal
horizontal	Elemen dapat diubah ukurannya secara horizontal
both	Elemen dapat diubah ukurannya secara vertikal dan horizontal
inherit	Mewarisi nilai resize dari elemen induk

Sekarang, mari kita masuk ke setiap nilai ini dengan beberapa contoh yang lezat!

CSS resize - nilai none

textarea {
resize: none;
}

Kode ini memberitahu browser, "Hey, jangan izinkan siapa pun mengubah ukuran textarea ini!" Itu seperti menaruh tanda "Jangan Sentuh" di elemen Anda.

CSS resize - nilai vertical

textarea {
resize: vertical;
height: 100px;
width: 200px;
}

Dengan kode ini, textarea Anda dimulai dengan tinggi 100px dan lebar 200px, tetapi pengguna dapat menariknya untuk membuatnya lebih tinggi atau lebih pendek. Itu seperti memiliki lift untuk teks Anda!

CSS resize - nilai horizontal

div {
resize: horizontal;
overflow: auto;
width: 200px;
height: 100px;
border: 2px solid blue;
}

Di sini, kita menerapkan resize: horizontal ke div. Ingat, untuk elemen non-textarea, kita perlu mengatur overflow ke sesuatu selain visible. Pengguna sekarang dapat mengatur lebar div ini, seperti memanjangkan sebuah karet!

CSS resize - nilai both

textarea {
resize: both;
min-height: 100px;
max-height: 300px;
min-width: 200px;
max-width: 400px;
}

Ini adalah fleksibilitas maksimal! Pengguna dapat mengubah ukuran textarea dalam arah mana pun, tetapi kita telah menetapkan beberapa batas untuk menghindari ukuran yang terlalu kecil atau besar. Itu seperti memberikan pengguna Anda sebuah sandaran untuk bermain, tetapi dengan beberapa pagar untuk menjaga segala sesuatu dalam kontrol.

CSS resize - nilai inherit

.parent {
resize: both;
overflow: auto;
}

.child {
resize: inherit;
}

Di sini, elemen anak akan mewarisi perilaku resize dari elemen induknya. Itu seperti menyerahkan warisan keluarga, tapi untuk resize!

CSS resize - Elemen Arbitrer

Sekarang, mari kita menjadi sedikit petualang. Apa bila kita ingin membuat div biasa dapat diubah ukurannya?

.resizable-div {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #00f;
overflow: auto;
resize: both;
}

<div class="resizable-div">
<p>Saya adalah div yang dapat diubah ukurannya! Cobalah mengubah ukuranku!</p>
</div>

Dengan mengatur overflow: auto dan resize: both, kita telah menjadikan div biasa menjadi tempat bermain yang dapat diubah ukurannya! Itu seperti memberikan superpower ke elemen HTML Anda.

Kesimpulan

Dan itu dia, teman-teman! Kita telah menjelajahi dunia menakjubkan properti CSS resize. Dari mengunci elemen dengan resize: none hingga membuat komponen yang sepenuhnya fleksibel dengan resize: both, Anda sekarang memiliki kekuatan untuk mengendalikan bagaimana pengguna berinteraksi dengan ukuran elemen di halaman web Anda.

Ingat, dengan kekuatan yang besar datang tanggung jawab yang besar. Gunakan properti resize bijaksana untuk meningkatkan pengalaman pengguna, bukan untuk mengelabui atau membuat pengunjung Anda frustasi.

Sekarang, teruskan perjalanan Anda dalam pengembangan web dan terus mencoba properti CSS yang berbeda. Siapa tahu? Anda mungkin menemukan trik baru favorit untuk menambah ke pustaka coding Anda!

Selamat coding, dan semoga elemen Anda selalu berukuran sempurna!

Credits: Image by storyset