Blok-inset - Trik CSS

Daftar Isi:

Anonim

inset-blockadalah singkatan dari properti CSS logis yang menetapkan panjang elemen offset dalam kombinasi arah blok inset-block-startdan inset-block-end. Ini seperti mendeklarasikan topdan bottomkecuali titik awal dan akhir ditentukan oleh 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-block: 50px 15%; 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-blockproperti akan bertindak seperti pengaturan topdan bottomdan mengatur elemen offset dari tepi bawah. 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 "bawah" diputar ke arah vertikal, bertindak lebih seperti properti leftdan right.

Sintaksis

inset-block: ;
  • Nilai awal: auto
  • Berlaku untuk: elemen yang diposisikan
  • Diwariskan: tidak
  • Persentase: untuk properti fisik yang sesuai
  • Nilai yang dihitung: sama dengan properti topdan korespondensibottom
  • Jenis animasi: menurut jenis nilai yang dihitung

Nilai

inset-blockmengambil nilai panjang dan mendukung kata kunci global. Nilai defaultnya adalah auto.

/* Length values */ inset-block: 50px; inset-block: 4em; inset-block: 3.5rem inset-block: 25vh; /* Percentage values */ inset-block: 50%; /* Keyword values */ inset-block: auto; /* initial value */ /* Global values */ inset-block: initial inset-block: inherit; inset-block: 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)