CSS - properti max-block-size: Panduan Ramah untuk Pemula

Halo sana, para ahli CSS masa depan! Hari ini, kita akan mengemban perjalanan menarik ke dunia CSS, khususnya meng eksplorasi properti max-block-size. Jangan khawatir jika Anda baru dalam hal ini; saya akan menjadi panduan ramah Anda, dan kita akan mengatasi topik ini langkah demi langkah. Jadi, ambil minumannya yang favorit, rias kenyamanan, dan mari kita masuk ke dalam!

Apa itu max-block-size?

Sebelum kita melompat ke hal-hal yang mendalam, mari kita mengerti apa itu max-block-size. Bayangkan Anda membangun menara dengan blok. Properti max-block-size adalah seperti menetapkan batas tinggi menara Anda dapat mencapai. Dalam istilah CSS, itu menentukan ukuran maksimum dari elemen dalam arah blok.

"Menunggu," Anda mungkin bertanya, "apa itu arah blok?" Pertanyaan bagus! Arahan blok biasanya adalah arah vertikal dalam bahasa yang ditulis secara horisontal (seperti Inggris), dan arah horisontal dalam bahasa yang ditulis secara vertikal (seperti bahasa Jepang tradisional).

Sintaks dan Nilai Yang Mungkin

mari kita lihat bagaimana kita dapat menggunakan max-block-size dalam CSS kita:

.my-element {
max-block-size: value;
}

Sekarang, apa yang kita masukkan sebagai "value"? Berikut adalah tabel praktis dengan semua nilai yang mungkin:

Nilai	Deskripsi
<length>	Panjang tetap, seperti 300px atau 20em
<percentage>	Persentase ukuran blok yang memuat
none	Tidak ada batas (ini adalah default)
max-content	Ukuran maksimum intrinsic yang disukai
min-content	Ukuran minimum intrinsic
fit-content	Mirip dengan auto, tapi ada beberapa perbedaan
auto	Browser menentukan ukuran maksimum

Terapkan Pada

Tidak semua properti CSS diterapkan pada setiap elemen HTML. Properti max-block-size diterapkan pada semua elemen kecuali:

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

Jangan khawatir jika Anda belum familiar dengan istilah ini. Saat Anda maju dalam perjalanan CSS Anda, Anda akan menemukannya dan mengerti mengapa mereka pengecualian.

CSS max-block-size - Efek writing-mode

Sekarang, mari kita lihat di mana hal-hal menjadi menarik! Properti max-block-size mengubah perilakunya berdasarkan writing-mode teks. Mari kita lihat beberapa contoh:

Contoh 1: Mode Tulisan Horisontal

.box {
writing-mode: horizontal-tb;
max-block-size: 200px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
Ini adalah kotak dengan mode tulisan horisontal dan max-block-size diatur ke 200px.
</div>

Dalam contoh ini, max-block-size akan membatasi tinggi kotak ke 200 piksel karena arah blok adalah vertikal dalam mode tulisan horisontal.

Contoh 2: Mode Tulisan Vertikal

.box {
writing-mode: vertical-rl;
max-block-size: 200px;
background-color: lightgreen;
padding: 10px;
}

<div class="box">
Ini adalah kotak dengan mode tulisan vertikal dan max-block-size diatur ke 200px.
</div>

Dalam kasus ini, max-block-size akan membatasi lebar kotak ke 200 piksel karena arah blok adalah horisontal dalam mode tulisan vertikal.

CSS max-block-size - Nilai <length>

Ketika kita menggunakan nilai panjang, kita menetapkan ukuran tetap. Mari kita lihatnya dalam aksi:

.fixed-size {
max-block-size: 150px;
background-color: lightyellow;
padding: 10px;
}

<div class="fixed-size">
Kotak ini memiliki max-block-size 150px. Jika konten melebihi tinggi ini, itu akan meluap.
</div>

Dalam contoh ini, tanpa mengira berapa banyak konten yang kita masukkan ke dalam div, itu tidak akan menjadi lebih tinggi dari 150 piksel.

CSS max-block-size - Nilai <percentage>

Persentase relatif terhadap ukuran blok yang memuat. Berikut cara kerjanya:

.parent {
height: 300px;
background-color: lightgray;
}

.child {
max-block-size: 50%;
background-color: lightpink;
padding: 10px;
}

<div class="parent">
<div class="child">
Div anak ini memiliki max-block-size 50% tinggi orangtuanya.
</div>
</div>

Dalam kasus ini, div anak tidak akan lebih tinggi dari setengah tinggi orangtuanya.

CSS max-block-size - Nilai <max-content>

Nilai max-content sangat berguna ketika Anda ingin elemen Anda menjadi sebesar kontennya memerlukan, tapi tidak lebih besar. Mari kita lihat contoh:

.max-content-box {
max-block-size: max-content;
background-color: lightcoral;
padding: 10px;
}

<div class="max-content-box">
Kotak ini akan diperluas untuk menyesuaikan kontennya, tapi tidak lebih besar dari itu.
</div>

Kotak ini akan tumbuh untuk menampung kontennya, tapi tidak akan melampaui itu.

CSS max-block-size - Dengan Teks Horisontal dan Vertikal

Mari kitaakhiri dengan contoh yang menggabungkan teks horisontal dan vertikal:

.mixed-text {
max-block-size: 200px;
background-color: lavender;
padding: 10px;
}

.vertical-text {
writing-mode: vertical-rl;
max-block-size: 100px;
background-color: lightsalmon;
margin-top: 10px;
}

<div class="mixed-text">
Ini adalah teks horisontal dengan max-block-size 200px.
<div class="vertical-text">
Ini adalah teks vertikal dengan max-block-size 100px.
</div>
</div>

Dalam contoh ini, kita memiliki wadah dengan teks horisontal dan tinggi maksimum 200px. Dalamnya, kita memiliki div lain dengan teks vertikal dan lebar maksimum 100px.

Dan itu saja! Kita telah meng eksplorasi properti max-block-size dari berbagai sudut. Ingat, kunci untuk menguasai CSS adalah praktik. Jadi, jangan takut untuk mencoba contoh ini, modifikasi mereka, dan lihat apa yang terjadi. Selamat coding, dan semoga blok Anda selalu berukuran sempurna!

Credits: Image by storyset