Max-inline-size - Trik CSS | CSS Almanak 2024

max-inline-sizeadalah properti logis dalam CSS yang menentukan lebar maksimum elemen saat writing-modehorizontal, atau tinggi maksimum elemen saat writing-modevertikal.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Seperti yang bisa Anda tebak dengan contoh di atas, writing-modeproperti mengubah orientasi teks dan aliran tata letak sebesar 90 derajat.

Alasan utama untuk mengubah orientasi, selain menciptakan desain yang mewah, adalah untuk mengakomodasi internasionalisasi di sebuah situs. Banyak aksara Asia Timur seperti Cina, Jepang, dan Korea dapat ditulis secara horizontal atau vertikal. Dengan menggunakan properti logika, kami dapat memberikan arah ukuran elemen yang benar berdasarkan mode penulisan pengguna.

Jen Simmons memiliki artikel dan presentasi yang membahas lebih dalam tentang mode penulisan CSS.

Tidak bisakah kita menggunakan `max-width`propertinya?

Iya! Tetapi jika Anda tidak mendukung Internet Explorer, tidak ada alasan untuk tidak menggunakannya max-inline-size. max-widthadalah dimensi fisik, jadi saat mode penulisan berubah, sebuah elemen mempertahankan ukuran lebar horizontal, merusak tata letak saat disetel menjadi vertikal. Properti logis, seperti max-inline-size, dapat merespons perubahan tersebut dan menerapkan ukuran dalam orientasi yang tepat.

Sintaksis

max-inline-size: ;

Awal: auto
Berlaku untuk: sama seperti heightdanwidth
Diwariskan: tidak
Persentase: untuk properti fisik yang sesuai
Nilai yang dihitung: sama seperti heightdanwidth
Jenis animasi: menurut jenis nilai yang dihitung

Nilai

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Demo

Saat writing-modedisetel ke vertical-rl, konten akan berputar, mengubah tata letak. Lebar max-widthkotak akan berputar sesuai dengan konten. Tapi max-inline-sizepintar! Itu meninggalkan lebarnya dengan bijaksana, terlepas dari writing-modenilainya. Alihkan writing-modedi demo berikut untuk melihat perbedaan di antara keduanya.