CSS - Properti min-inline-size: Panduan untuk Pemula

Hai teman-teman, para maestro CSS masa depan! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia CSS, khususnya mengexplore properti min-inline-size. Jangan khawatir jika Anda baru belajar ini; saya akan menjadi panduan yang ramah, dan kita akan mengatasi topik ini secara bertahap. Pada akhir panduan ini, Anda akan bisa menggunakannya seperti seorang ahli!

Apa itu min-inline-size?

Sebelum kita mendalam, mari kita pahami apa arti min-inline-size sebenarnya. Bayangkan Anda sedang mengemas untuk perjalanan, dan Anda memiliki sebuah koper yang dapat diperluas. min-inline-size adalah seperti menetapkan ukuran minimum untuk koper itu dalam dimensi utamanya. Dalam istilah desain web, itu menetapkan ukuran minimum dari suatu elemen dalam arah inline-nya.

Sekarang, Anda mungkin bertanya-tanya, "Apa itu arah inline?" Well, dalam kebanyakan kasus untuk bahasa Inggris dan bahasa yang mirip, itu adalah arah horizontal. Tetapi jangan khawatir, kita akan eksplor ini lebih lanjut!

Nilai yang Mungkin

Mari kita lihat nilai yang berbeda yang dapat kita gunakan dengan min-inline-size:

Nilai	Deskripsi
<length>	Panjang tetap, seperti 100px atau 2em
<percentage>	Persentase dari ukuran kontainer induk
max-content	Ukuran preferred intrinsik
min-content	Ukuran minimum intrinsik
auto	Browser yang menentukan ukuran minimum

Jangan khawatir jika ini terlihat membingungkan sekarang. Kita akan mengexplore setiap satu dengan contoh!

Terapkan Pada

Properti min-inline-size dapat diterapkan pada semua elemen kecuali:

• Elemen inline, non-replaced
• Baris tabel
• Grup baris

Sintaks

Sintaks dasar untuk min-inline-size cukup sederhana:

min-inline-size: <value>;

Ayo masuk ke beberapa contoh untuk melihat bagaimana ini bekerja dalam praktek!

CSS min-inline-size - Nilai

Mari mulai dengan contoh sederhana menggunakan panjang tetap:

<div class="box">Ini adalah kotak dengan min-inline-size diatur ke 200px.</div>

.box {
min-inline-size: 200px;
background-color: lightblue;
padding: 10px;
}

Dalam contoh ini, kita mengatakan ke browser, "Hey, jangan pernah izinkan kotak ini menjadi lebih sempit dari 200 pixel." Jika Anda mengubah ukuran jendela browser, Anda akan melihat bahwa kotak ini menjaga lebar minimumnya 200px, bahkan jika Anda mencoba membuatnya lebih kecil.

CSS min-inline-size - Nilai

Sekarang, mari coba menggunakan nilai persentase:

<div class="container">
<div class="box">Kotak ini memiliki min-inline-size diatur ke 50%.</div>
</div>

.container {
width: 400px;
background-color: lightyellow;
padding: 10px;
}

.box {
min-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

Dalam kasus ini, kita mengatakan, "Pastikan kotak ini selalu setidaknya separuh lebar kontainer induknya." Kotak akan setidaknya 200px lebar (50% dari 400px), tapi bisa tumbuh lebih besar jika diperlukan.

CSS min-inline-size - Nilai max-content

Nilai max-content sangat menarik. Itu menetapkan ukuran minimum ke ukuran preferred intrinsik konten. Mari lihatnya dalam aksi:

<div class="box max-content">Kotak ini akan diperluas untuk menyesuaikan kontennya.</div>
<div class="box fixed">Kotak ini memiliki lebar tetap 150px.</div>

.box {
background-color: lightpink;
padding: 10px;
margin-bottom: 10px;
}

.max-content {
min-inline-size: max-content;
}

.fixed {
width: 150px;
}

Kotak max-content akan diperluas untuk menyesuaikan semua kontennya di satu baris, sedangkan kotak lebar tetap mungkin menyebabkan teks melengkung.

CSS min-inline-size - Dengan Teks Vertikal

Sekarang, mari kita lihat di mana hal ini menjadi sangat menarik! ingat saat saya katakan arah inline biasanya horizontal? Well, itu bukan selalu kasus. Mari lihat contoh dengan teks vertikal:

<div class="vertical-text">Teks ini vertikal!</div>

.vertical-text {
writing-mode: vertical-rl;
min-inline-size: 100px;
background-color: lavender;
padding: 10px;
}

Dalam kasus ini, karena kita telah mengubah writing-mode ke vertikal, min-inline-size sebenarnya mengontrol tinggi minimum kotak, bukan lebar!

Kesimpulan

Dan begitu, teman-teman! Kita telah mengeksplor properti min-inline-size dari atas ke bawah (atau seharusnya saya katakan, dari kiri ke kanan?). Ingat, CSS adalah tentang eksperimen. Jangan khawatir untuk mencoba properti ini dan lihat apa yang terjadi. Itu adalah cara kita semua belajar!

Sebelum kita selesai, ini adalah tips cepat dari tahun-tahun mengajar saya: selalu pikirkan bagaimana desain Anda akan berperilaku di berbagai ukuran layar. Properti min-inline-size bisa menjadi alat yang kuat dalam menciptakan desain responsif yang terlihat bagus pada semua macam layar, dari smartphone ke monitor layar lebar.

Tetap latih, tetap eksplor, dan terutama, bersenang-senang dengan CSS! Siapa tahu? Desain website yang menakjubkan berikutnya mungkin datang dari eksperimen Anda dengan min-inline-size!

Credits: Image by storyset