Sisipkan - Trik CSS

The insetproperti di CSS adalah singkatan untuk empat sifat inset, top, right, bottomdan leftdalam satu deklarasi. Sama seperti empat properti individual itu sendiri, insettidak berpengaruh pada elemen non-posisi (statis). Dengan kata lain, elemen harus mendeklarasikan positionnilai eksplisit sebelum properti inset dapat diterapkan.

.box ( inset: 10px 20px 30px 40px; position: relative; )

inset pada awalnya ditentukan dalam spesifikasi CSS Logical Properties and Values ​​Level 1, yang ada di Editor's Draft per 20 April 2020.

Sintaksis

Seperti yang mungkin telah Anda kumpulkan dari contoh di atas, insetikuti sintaks multi-nilai yang sama dari paddingdan margin. Itu berarti ia menerima sebanyak empat nilai (untuk offset mendeklarasikan untuk top, right, bottomdan left) dan sedikitnya satu nilai (untuk mendeklarasikan sama offset untuk semua empat sifat). Dan, seperti paddingdan margin, nilai mengalir searah jarum jam, dimulai dengan top.

.element ( inset: 1em 2em 3em 0; /* top right bottom left */ inset: 10% 5% -10%; /* top left/right bottom */ inset: 0 10px; /* top/bottom left/right */ inset: 20px; /* all edges = 20px */ )

Sebelumnya inset, kita harus mendeklarasikan setiap insetsub-properti secara terpisah, seperti ini:

.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )

Sekarang, kita dapat melakukannya ke satu baris CSS:

.box ( position: absolute; inset: 0; /* ? */ )

Nilai

The insetproperti menerima nilai-nilai numerik seperti atas, kanan, bawah dan kiri. Nilai-nilai tersebut dapat berupa panjang CSS yang valid, seperti px, em, remdan %, antara lain.

Mari kita bicara tentang properti logis

Kami hanya akan menggores permukaan properti logis di sini karena fokus sebenarnya ada pada insetdan sub-properti terkait. Dapatkan informasi mendalam tentang topik ini dalam artikel Majalah Smashing ini oleh Rachel Andrew.

Ada lebih insetsub-sifat dari top, right, bottomdan leftnamun, untuk memahami mereka, itu layak berkenalan dengan sifat dan nilai-nilai logis.

Konten dapat ditampilkan dalam berbagai arah (yaitu mode penulisan), termasuk kiri-ke-kanan, kanan-ke-kiri, atas-ke-bawah, dan bawah-ke-atas. Ketika kita berbicara tentang konsep “logis”, sebenarnya kita mengacu pada titik awal berdasarkan arah penulisan konten.

Bayangkan Anda sedang membangun situs web yang perlu mendukung bahasa kiri-ke-kanan (LTR), seperti bahasa Inggris dan Spanyol, serta bahasa kanan-ke-kiri (RTL), seperti Persia atau Arab. Katakanlah Anda ingin menambahkan margin antara ikon dan teks garis di sebelahnya.

Biasanya, Anda mungkin menjangkau margin-rightproperti untuk mendukung LTR, lalu menambahkan seperangkat aturan lain yang menghapus margin tersebut dan menggantinya dengan margin-leftuntuk RTL:

.icon ( margin-right: 1em; ) 
 /* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )

Ini adalah bagian kecil dari sebuah halaman. Sekarang bayangkan membangun situs web besar dengan cara ini - itu banyak pekerjaan! Tetapi sifat logis membuatnya mudah dengan mempertimbangkan mode penulisan untuk kami. Misalnya, kita dapat menambahkan margin ke akhir elemen, di mana pun itu terjadi:

.icon ( margin-inline-end: 1em; )

Inilah yang kami maksud saat merujuk ke properti logika - properti tersebut relatif terhadap mode penulisan daripada arah fisik. Lihat bagaimana properti logis jauh lebih logis untuk digunakan?

Sisipkan properti logis

Jadi, mengetahui apa yang sekarang Anda ketahui tentang properti logika, berikut adalah empat sub-properti inset tambahan:

Properti Logis	Setara Aliran Horizontal	Apa yang dilakukannya
inset-block-start	top	Menentukan offset untuk tepi awal dalam arah yang tegak lurus dengan arah penulisan.
inset-block-end	bottom	Menentukan offset untuk tepi akhir dalam arah tegak lurus dengan arah penulisan.
inset-inline-start	left	Menentukan offset untuk tepi awal dalam arah penulisan, yang memetakan ke offset fisik bergantung pada mode penulisan elemen, arah dan orientasi teks.
inset-inline-end	right	Menentukan offset untuk tepi akhir dalam arah penulisan.

Kita bahkan dapat mengelompokkan keempat sub-properti tersebut menjadi dua properti singkatan tambahan:

Properti Logis	Singkatan Untuk	Apa yang dilakukannya
inset-inline	inset-inline-start inset-inline-end	Menerima satu nilai untuk menyetel inset-inline-startdan inset-inline-end. Juga menerima dua nilai, di mana yang pertama menentukan inset-inline-startdan yang kedua menentukan inset-inline-end.
inset-block	inset-block-start inset-block-end	Menerima satu nilai untuk menyetel inset-block-start dan inset-block-end. Juga menerima dua nilai, di mana yang pertama menentukan inset-block-startdan yang kedua menentukan inset-block-end.

Demo

Ubah mode penulisan dan nilai properti inset untuk mendapatkan gambaran yang lebih baik tentang cara kerjanya:

Perhatian: insetProperti ini tidak logis

Meskipun insetmerupakan bagian dari spesifikasi Properti Logis dan Nilai, itu tidak mendefinisikan blok logis atau offset sebaris. Sebaliknya, ia mendefinisikan offset fisik, terlepas dari mode penulisan, arah, dan orientasi teks elemen. Dengan kata lain, insethanya singkatan untuk top, right, bottomdan left.

Ada beberapa diskusi di GitHub mengenai penggunaan beberapa kata kunci agar dapat menggunakan properti ini dengan cara yang logis juga.

Jadi, apakah kita masih menggunakan offset fisik? Bayangkan Anda ingin lencana atau logo dipasang di sudut atas dan kiri halaman Anda dan, apa pun bahasanya, Anda ingin lencana itu ada di sana. Dalam hal ini Anda tidak dapat menggunakan offset logis dan perlu menggunakan properti fisik sebagai gantinya.

Dukungan Browser

Dukungan untuk insetproperti masih dalam tahap awal. Pada tulisan ini, caniuse memperkirakan dukungan global hanya 3,79%.

Desktop

Internet Explorer	Tepi	Firefox	Chrome	Safari	Opera
Tidak	Tidak	66+	Tidak	Tidak	Tidak

Seluler

iOS Safari	Opera Mini	Browser Android	Chrome Android	Firefox Android
Tidak	Tidak	68	Tidak	Tidak

Informasi lebih lanjut

• Properti Logis CSS dan Nilai Level 1 (Spesifikasi, Draf Editor)
• Memahami Properti Logis dan Nilai (Majalah Smashing)
• Properti Logis CSS (CSS-Trik)