Inset-inline-start - Trik CSS

Daftar Isi:

Anonim

inset-inline-startadalah properti CSS yang menyetel panjang elemen diimbangi dalam arah sebaris awal. Ini seperti mendeklarasikan leftbahwa itu berlaku untuk elemen yang diposisikan dan mengimbangi elemen di arah kiri, kecuali titik awal dan akhir dapat diubah berdasarkan elemen direction, text-orientationdan writing-mode, seperti properti logis lainnya.

Properti tersebut adalah bagian dari spesifikasi CSS Logical Properties dan Nilai Level 1 yang saat ini berstatus Draf Editor. Artinya definisi dan informasi tentang itu bisa berubah antara sekarang dan rekomendasi resmi.

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

Jadi, misalnya, jika modus menulis diatur ke horizontal-lrdalam inset-inline-startproperti akan bertindak seperti pengaturan left, mengimbangi unsur dari tepi kiri. Anda bahkan perlu menentukan eksplisit positionpada elemen yang sama agar dapat diterapkan, seperti properti offset fisik.

Tapi ubah elemen writing-modemenjadi sesuatu seperti vertical-lrdan tepi "awal" diputar ke arah vertikal, bertindak lebih seperti itu top.

Sintaksis

inset-inline-start: ;
  • Nilai awal: auto
  • Berlaku untuk: elemen yang diposisikan
  • Diwariskan: tidak
  • Persentase: untuk properti fisik yang sesuai
  • Nilai yang dihitung: sama dengan leftproperti terkait
  • Jenis animasi: menurut jenis nilai yang dihitung

Nilai

inset-blockmengambil nilai panjang dan mendukung kata kunci global. Nilai defaultnya 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;

Dukungan browser

YAITU Tepi Firefox Chrome Safari Opera
Tidak Tidak 63+ Tidak Tidak Tidak
Android Chrome Android Firefox Browser Android iOS Safari Opera Mini
Tidak 79+ Tidak Tidak Tidak
Sumber: caniuse

Demo

Bacaan lebih lanjut

  • Spesifikasi CSS Logical Properties dan Nilai Level 1 (Draf Editor)
  • Dokumentasi MDN
  • Memahami Properti Logis Dan Nilai (Majalah Smashing)
  • Properti Logis CSS (Adrian Roselli)
  • Aturan horizontal dua arah di CSS (Hussein Al Hammad)