Ukuran sebaris - Trik CSS

Anonim

inline-sizeadalah sifat logik yang menentukan lebar elemen ketika mod penulisan mendatar, atau ketinggian elemen ketika writing-modemenegak.

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

Seperti yang anda sangka dengan contoh di atas, writing-modeharta itu mengubah orientasi aliran teks dan susun atur sebanyak 90 darjah. Terdapat dua sebab utama mengapa anda mahu melakukannya.

Pertama, sebagai pilihan reka bentuk, anda mungkin mahu memaparkan teks menegak pada elemen, katakan tajuk:

Sebab kedua - dan mungkin paling penting - sebab anda mungkin ingin menggunakan harta logik seperti ukuran sebaris adalah untuk mengakomodasi pengantarabangsaan di laman web. Banyak skrip Asia Timur seperti Cina, Jepun, dan Korea boleh ditulis secara mendatar atau menegak. Dengan menggunakan sifat logik, kami dapat memberikan arah ukuran elemen yang betul berdasarkan mod penulisan pengguna.

Jen Simmons mempunyai artikel dan persembahan yang lebih mendalam mengenai mod penulisan CSS.

Mengapa kita tidak boleh menggunakan widthharta benda yang boleh dipercayai ?

Awak boleh! Namun, anda mungkin ingin menghubungi inline-sizejika anda bimbang tentang konteks kandungan anda berubah berdasarkan bahasa pengguna. widthadalah dimensi fizikal, jadi apabila mod penulisan berubah, elemen menjaga ukuran lebar mendatarnya, memecah susun atur ketika disusun menjadi menegak. Sifat logik, seperti inline-size, dapat bertindak balas terhadap perubahan tersebut dan menerapkan lebar ke arah yang betul.

Sebagai contoh, jika elemen perenggan lebar 400 piksel menggunakan lebar, ketika mod penulisan diatur ke vertical-lr, konten akan berputar, mengubah susun atur, tetapi perenggan itu akan tetap selebar 400 piksel dan tidak setinggi 400 piksel.

Lihat itu? Baik, inline-sizepintar! Ia berubah dari lebar ke tinggi, bergantung pada writing-modenilainya.

Sintaks

inline-size:
  • Permulaan: auto
  • Berlaku untuk: sama seperti heightdanwidth
  • Diwarisi: tidak
  • Peratusan: untuk harta fizikal yang sepadan
  • Nilai dikira: sama dengan heightdanwidth
  • Jenis animasi: mengikut jenis nilai yang dikira

Nilai

/* Length values */ inline-size: 250px; inline-size: 5rem; 
 /* Percentage values */ inline-size: 75%; 
 /* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content; 
 /* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset;
  • auto: Ukuran sebaris elemen akan mematuhi ukuran elemen induknya.
  • fit-content(): Fungsi ini membolehkan wadah tumbuh hingga ukuran yang diinginkan, kemudian buat pembungkus teks, dengan berkesan menjepit isi ke nilai ukuran yang disediakan. Alat ini dapat digunakan pada wadah Grid, dan juga ukuran kotak, dan sementara caniuse menunjukkan sokongan yang kuat untuk fungsi dengan ukuran sebaris, pengujian kami kurang tepat. Itu mungkin disebabkan status Draf Kerja spesifikasi Modul Ukuran Saiz Box 3
  • max-content: Lebar pilihan intrinsik, yang bermaksud elemen membentangkan teks selama mungkin dan akan menjadikan kotak itu panjang teksnya.
  • min-content: Lebar minimum intrinsik, yang bermaksud kotak elemen mengurangkan ukuran minimum kandungannya. Kotak akan berukuran rentetan teks terbesar.

Demo

Sokongan penyemak imbas

IE Hujung Firefox Chrome Safari Opera
Tidak 79+ 41+ 57 12.1+ 44+
Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mudah Alih
85+ 79+ 81+ 12.2+ 59+
Sumber: caniuse

Perhatikan bahawa sokongan untuk menggunakan fungsi berikut mungkin berbeza dari sokongan harta tanah:

  • fit-content()
  • max-content()
  • min-content()

Maklumat lanjut

  • Spesifikasi Logik CSS dan Nilai Aras 1 spesifikasi (Draf Editor)
  • Dokumentasi MDN
  • Sifat Logik CSS` (Trik CSS)
  • Memahami Sifat dan Nilai Logik (Majalah Smashing)
  • Sifat Logik CSS (Adrian Roselli)
  • Ukuran Kandungan Min & Maksimum dalam CSS Grid (Jen Simmons, video)
  • Peraturan mendatar dua arah dalam CSS (Hussein Al Hammad)