Ukuran sebaris - Trik CSS

Anonim

inline-sizeadalah properti logika yang menentukan lebar elemen saat mode penulisan horizontal, atau tinggi elemen saat writing-modevertikal.

.element ( inline-size: 700px; 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. Ada dua alasan utama mengapa Anda ingin melakukan itu.

Pertama, sebagai pilihan desain, Anda mungkin ingin menampilkan teks vertikal pada elemen, misalnya header:

Alasan kedua - dan mungkin yang paling penting - Anda mungkin ingin menggunakan properti logis seperti ukuran sebaris adalah untuk mengakomodasi internasionalisasi di 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.

Mengapa kita tidak bisa menggunakan widthproperti terpercaya saja ?

Kamu bisa! Namun, Anda mungkin ingin inline-sizemeraihnya jika Anda khawatir tentang konteks konten Anda yang berubah berdasarkan bahasa pengguna. widthadalah dimensi fisik, jadi saat mode penulisan berubah, sebuah elemen mempertahankan ukuran lebar horizontal, merusak tata letak saat disetel menjadi vertikal. Properti logika, seperti inline-size, dapat merespons perubahan tersebut dan menerapkan lebar ke arah yang benar.

Misalnya, jika elemen paragraf memiliki lebar 400px menggunakan lebar, saat mode penulisan disetel ke vertical-lr, konten akan berputar, mengubah tata letak, tetapi paragraf tersebut akan tetap menjadi lebar 400px dan bukan tinggi 400px.

Lihat itu? Nah, inline-sizepintar! Itu berubah dari lebar ke tinggi, tergantung pada writing-modenilainya.

Sintaksis

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 */ 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 mengikuti ukuran elemen induknya.
  • fit-content(): Fungsi ini memungkinkan penampung berkembang hingga ukuran yang diinginkan, lalu membuat teks membungkus, secara efektif menjepit konten ke nilai ukuran yang diberikan. Ini dapat digunakan pada wadah Grid, serta ukuran kotak, dan sementara caniuse menunjukkan dukungan yang kuat untuk fungsi dengan ukuran sebaris, pengujian kami kurang meyakinkan. Itu mungkin karena status Draf Kerja spesifikasi Box Sizing Module Level 3.
  • max-content: Lebar pilihan intrinsik, yang berarti elemen membentangkan teks sepanjang mungkin dan akan membuat kotak sepanjang teks.
  • min-content: Lebar minimum intrinsik, yang berarti kotak elemen berkurang ke ukuran minimum kontennya. Kotak akan menjadi ukuran string teks terbesar.

Demo

Dukungan browser

YAITU Tepi Firefox Chrome Safari Opera
Tidak 79+ 41+ 57 12.1+ 44+
Android Chrome Android Firefox Browser Android iOS Safari Opera Mobile
85+ 79+ 81+ 12.2+ 59+
Sumber: caniuse

Perhatikan bahwa dukungan untuk menggunakan fungsi berikut mungkin berbeda dari dukungan properti:

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

Informasi lebih lanjut

  • Spesifikasi CSS Logical Properties dan Nilai Level 1 (Draf Editor)
  • Dokumentasi MDN
  • Properti Logis CSS` (CSS-Trik)
  • Memahami Properti Logis Dan Nilai (Majalah Smashing)
  • Properti Logis CSS (Adrian Roselli)
  • Ukuran Konten Min & Maks di CSS Grid (Jen Simmons, video)
  • Aturan horizontal dua arah di CSS (Hussein Al Hammad)