CSS - Resize: Memperkuasa Pengguna untuk Mengawal Dimensi Elemen

Hai sana, para pengembang web masa depan! Hari ini, kita akan melihat properti CSS yang menarik yang memberikan kekuasaan untuk menentukan ukuran elemen langsung ke tangan pengunjung website Anda. Selamat datang ke dunia resize!

CSS - Resize

Apa Itu Properti CSS Resize?

Sebelum kita masuk ke detailnya, mari kita mulai dengan pertanyaan sederhana: Apakah Anda pernah melihat handle kecil di sudut bawah kanan 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 mini untuk mengatur ukuran elemen tertentu di halaman web Anda. Keren, kan?

Terapkan ke

Sekarang, Anda mungkin bertanya-tanya, "Apakah saya bisa membuat semua halaman web saya dapat diubah ukurannya?" Well, tidak benar. Properti resize secara utama terapkan pada 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!

Sintaks

Mari kitaura sintaks untuk menggunakan properti resize:

elemen {
resize: nilai;
}

Simple, kan? Sekarang, mari kita jelajahi nilai yang berbeda yang bisa 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 induknya

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

CSS resize - nilai none

textarea {
resize: none;
}

Kode ini memberitahu browser, "Hey, jangan izinkan siapa pun mengubah ukuran textarea ini!" Itu seperti menempatkan 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 menyeretnya untuk membuatnya lebih tinggi atau lebih pendek. Itu seperti memiliki lif untuk teks Anda!

CSS resize - nilai horizontal

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

Di sini, kita menerapkan resize: horizontal ke sebuah div. Ingat, untuk elemen non-textarea, kita perlu mengatur overflow ke sesuatu selain visible. Pengguna sekarang dapat mengatur lebar div ini, seperti menyeret 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 apa pun, tetapi kita telah menetapkan beberapa batas untuk menghindari ukuran yang terlalu kecil atau terlalu besar. Itu seperti memberikan pengguna Anda sebuah sandaran untuk bermain, tetapi dengan beberapa pagar untuk menjaga hal-hal tetap terkendali.

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 menyampaikan sebuah warisan keluarga, tapi untuk resize!

CSS resize - Elemen Arbitrer

Sekarang, mari kita menjadi sedikit petualang. Apa bila kita ingin membuat sebuah 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 mengubah sebuah div biasa menjadi tempat bermain yang dapat diubah ukurannya! Itu seperti memberikan superpower ke elemen HTML Anda.

Kesimpulan

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

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

Sebagai Anda terus melanjutkan perjalanan Anda dalam pengembangan web, terus mencoba properti CSS yang berbeda. Siapa tahu? Anda mungkin menemukan trik baru yang menjadi favorit Anda untuk tambah ke peralatan coding Anda!

Selamat coding, dan semoga elemen Anda selalu berukuran sempurna!

Credits: Image by storyset