Inset-sebaris-mula - Trik CSS

Isi kandungan:

Anonim

inset-inline-startadalah harta CSS yang menetapkan panjang elemen yang diimbangi dalam arah sebaris permulaan. Ini seperti menyatakan leftbahawa ia berlaku untuk elemen yang diposisikan dan mengimbangi elemen ke arah kiri, kecuali titik permulaan dan akhir dapat berubah berdasarkan elemen tersebut direction, text-orientationdan writing-mode, seperti sifat logik yang lain.

Properti ini adalah sebahagian daripada spesifikasi CSS Logical Properties dan Nilai Level 1 yang kini dalam status Draf Editor. Itu bermaksud definisi dan maklumat mengenainya boleh berubah antara sekarang dan cadangan rasmi.

.element ( inset-inline-start: 50px; position: relative; /* Apples to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Jadi, sebagai contoh, jika mod tulisan itu ditetapkan kepada horizontal-lryang inset-inline-starthartanah akan bertindak sama seperti tetapan left, mengimbangi unsur dari tepi sebelah kiri. Anda bahkan perlu menentukan yang jelas positionpada elemen yang sama agar elemen itu dapat dilaksanakan, sama seperti sifat mengimbangi fizikal.

Tetapi ubah elemen writing-modeke sesuatu seperti vertical-lrdan tepi "permulaan" diputar ke arah menegak, bertindak lebih seperti topsebaliknya.

Sintaks

inset-inline-start: ;
  • Nilai awal: auto
  • Berlaku untuk: elemen kedudukan
  • Diwarisi: tidak
  • Peratusan: untuk harta fizikal yang sepadan
  • Nilai dikira: sama dengan leftharta sepadan
  • Jenis animasi: mengikut jenis nilai yang dikira

Nilai

inset-blockmengambil nilai panjang dan menyokong kata kunci global. Nilai lalai adalah auto.

/* Length values */ inset-inline-start: 50px; inset-inline-start: 4em; inset-inline-start: 3.5rem inset-inline-start: 25vh; /* Percentage values */ inset-inline-start: 50%; /* Keyword values */ inset-inline-start: auto; /* initial value */ /* Global values */ inset-inline-start: initial inset-inline-start: inherit; inset-inline-start: unset;

Sokongan penyemak imbas

IE Hujung Firefox Chrome Safari Opera
Tidak Tidak 63+ Tidak Tidak Tidak
Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mini
Tidak 79+ Tidak Tidak Tidak
Sumber: caniuse

Demo

Bacaan lanjut

  • Spesifikasi Logik CSS dan Nilai Aras 1 spesifikasi (Draf Editor)
  • Dokumentasi MDN
  • Memahami Sifat dan Nilai Logik (Majalah Smashing)
  • Sifat Logik CSS (Adrian Roselli)
  • Peraturan mendatar dua arah dalam CSS (Hussein Al Hammad)