Sisipan - Trik CSS

The insetharta di CSS ialah singkatan untuk empat sifat sisipan, top, right, bottomdan leftdalam satu perisytiharan. Sama seperti keempat-empat sifat itu sendiri, insettidak mempengaruhi unsur-unsur yang tidak diposisikan (statik). Dengan kata lain, elemen mesti menyatakan positionnilai eksplisit sebelum sifat sisipan dapat berlaku.

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

inset pada mulanya ditakrifkan dalam spesifikasi Logik CSS Properties dan Nilai Level 1, yang terdapat dalam Draf Editor pada 20 April 2020.

Sintaks

Seperti yang anda kumpulkan dari contoh di atas, insetikuti sintaks berbilang nilai yang sama dengan paddingdan margin. Bahawa cara itu menerima sebanyak empat nilai (untuk ofset mengisytiharkan untuk top, right, bottomdan left) dan sebagai beberapa sebagai satu nilai (untuk mengisytiharkan sama mengimbangi untuk semua empat hartanah). Dan, seperti paddingdan margin, nilai mengalir mengikut arah jam, bermula 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 */ )

Sebelum ini inset, kita harus menyatakan setiap insetsub-harta tanah secara berasingan, seperti ini:

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

Sekarang, kita boleh melakukannya dengan satu baris CSS:

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

Nilai

The insetharta menerima nilai angka seperti atas, kanan, bawah dan kiri. Nilai-nilai boleh mana-mana panjang CSS sah, seperti px, em, remdan %, antara lain.

Mari bercakap mengenai sifat logik

Kami hanya akan mencakar permukaan sifat logik di sini kerana fokus sebenarnya insetdan sub-sifatnya yang berkaitan. Dapatkan penjelasan mendalam mengenai topik dalam artikel Majalah Smashing oleh Rachel Andrew.

Terdapat lebih banyak insetsub-sifat daripada top, dan right, tetapi, untuk memahaminya, perlu mengetahui sifat dan nilai logik.bottomleft

Kandungan dapat ditampilkan dalam arah yang berbeza (yaitu mode penulisan), termasuk kiri-ke-kanan, kanan-ke-kiri, atas-ke-bawah, dan bawah-ke-atas. Apabila kita bercakap mengenai konsep "logik", kita benar-benar merujuk kepada titik permulaan berdasarkan arah penulisan kandungan.

Bayangkan anda membina laman web yang perlu menyokong kedua-dua bahasa kiri ke kanan (LTR), seperti bahasa Inggeris dan bahasa Sepanyol, dan bahasa kanan ke kiri (RTL), seperti Parsi atau Arab. Katakan anda mahu menambahkan margin antara ikon dan teks garis di sebelahnya.

Secara semula jadi, anda mungkin mencari margin-rightharta tanah untuk menyokong LTR, kemudian menambahkan set peraturan lain yang menghilangkan margin itu dan menggantikannya dengan margin-leftRTL:

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

Ini adalah sebahagian kecil halaman. Sekarang bayangkan membina laman web besar dengan cara ini - itu banyak kerja! Tetapi sifat logik menjadikannya pantas dengan mempertimbangkan mod penulisan untuk kita. Sebagai contoh, kita boleh menambah margin pada akhir elemen, di mana sahaja ia berlaku:

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

Inilah yang kita maksudkan ketika merujuk kepada sifat logik - ia lebih berkaitan dengan cara penulisan dan bukannya arah fizikal. Lihat bagaimana sifat logik jauh lebih logik untuk digunakan?

Masukkan sifat logik

Oleh itu, setelah mengetahui apa yang anda ketahui mengenai sifat logik, berikut adalah empat sub-sifat tambahan:

Harta Logik	Aliran Mendatar Setara	Apa ia lakukan
inset-block-start	top	Menentukan ofset untuk tepi permulaan dalam arah yang berserenjang dengan arah penulisan.
inset-block-end	bottom	Menentukan ofset untuk hujung hujung dalam arah yang berserenjang dengan arah penulisan.
inset-inline-start	left	Menentukan offset untuk tepi permulaan dalam arah penulisan, yang memetakan ke ofset fizikal bergantung pada mod penulisan elemen, arah dan orientasi teks.
inset-inline-end	right	Menentukan ofset untuk hujung akhir dalam arah penulisan.

Kita bahkan dapat mengelompokkan keempat-empat sub-sifat itu menjadi dua sifat pendek:

Harta Logik	Shorthand Untuk	Apa ia lakukan
inset-inline	inset-inline-start inset-inline-end	Menerima satu nilai untuk menetapkan kedua 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 menetapkan kedua 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

Tukar mod penulisan dan nilai sifat sisipan untuk mendapatkan idea yang lebih baik tentang cara kerjanya:

Perhatian: insetHarta tanah tidak logik

Walaupun insetmerupakan sebahagian daripada spesifikasi Logik Properties dan Nilai, ia tidak menentukan blok logik atau offset dalam talian. Sebaliknya, ia menentukan ofset fizikal, tanpa mengira mod penulisan elemen, arah, dan orientasi teks. Dengan kata lain, insethanya singkatan untuk top, right, bottomdan left.

Terdapat beberapa perbincangan di sini di GitHub mengenai penggunaan beberapa kata kunci untuk dapat menggunakan harta ini dengan cara yang logik juga.

Oleh itu, adakah kita masih menggunakan ofset fizikal? Bayangkan anda mahukan lencana atau logo terpaku di sudut atas dan kiri halaman anda dan, tidak kira bahasa, anda mahu ia berada di sana. Sekiranya anda tidak dapat menggunakan ofset logik dan sebaliknya perlu menggunakan sifat fizikal.

Sokongan Penyemak Imbas

Sokongan untuk insetharta tanah masih di peringkat awal. Pada penulisan ini, caniuse menganggarkan sokongan global hanya 3.79%.

Desktop

internet Explorer	Hujung	Firefox	Chrome	Safari	Opera
Tidak	Tidak	66+	Tidak	Tidak	Tidak

Mudah alih

Safari iOS	Opera Mini	Penyemak Imbas Android	Android Chrome	Android Firefox
Tidak	Tidak	68	Tidak	Tidak

Maklumat lanjut

• Properti dan Nilai Logik CSS Tahap 1 (Spesifikasi, Draf Editor)
• Memahami Sifat dan Nilai Logik (Majalah Smashing)
• Sifat Logik CSS (Trik CSS)