Menggunakan Properti `outline` sebagai Perbatasan yang Dapat Diciutkan

outline di CSS menggambar garis di sekitar bagian luar elemen. Ini sangat mirip dengan border , pengecualian utama adalah bahwa outline bukan merupakan bagian dari model kotak. Ini sering digunakan untuk menyoroti elemen, misalnya, gaya :focus .

Dalam artikel ini, mari kita tekankan, condong ke outline apa yang bagus:

  1. Mereka dapat runtuh satu sama lain (tipuan!) Karena secara teknis mereka β€œtidak memakan tempat.”
  2. Menampilkan dan menyembunyikan outline, atau mengubah outline-width , tidak memicu layout (yang bagus untuk animasi dan transisi berkinerja).

Batas sel tabel palsu yang lebih mudah

Di bawah ini adalah contoh daftar yang ditata sebagai kisi, membuatnya terlihat seperti tata letak tabel. Setiap sel memiliki lebar minimum, dan akan tumbuh/menyusut saat wadah menjadi lebih lebar/sempit.

Kita bisa menggunakan border untuk melakukan ini, seperti ini:

Tetapi untuk membuat batas yang rata di sekitar setiap sel β€” tidak pernah berlipat ganda atau hilang β€” ini adalah proses yang rumit. Di atas, saya menggunakan batas di semua sisi setiap "sel" lalu margin negatif untuk tumpang tindih dan mencegah penggandaan. Itu berarti memotong perbatasan di dua sisi, jadi perbatasan harus diterapkan kembali di sana pada induknya. Terlalu banyak pekerjaan fiddly, jika Anda bertanya kepada saya.

Bahkan harus menyembunyikan overflow adalah pertanyaan besar, yang harus Anda lakukan karena, jika tidak, Anda akan memicu scrollbar kecuali Anda menggunakan tipuan yang lebih tebal, seperti menggunakan elemen pseudo yang diposisikan secara mutlak.

Menampilkan tabel datar dengan tujuh kolom dan empat baris, masing-masing sel diberi nomor secara berurutan, 1 sampai 28. Tabel memiliki latar belakang putih dan teks blok dan batas hitam di sekitar setiap sel dengan bantalan yang cukup.

Lihat hasil yang sama, secara visual, hanya menggunakan outline saja:

Kode di sini jauh lebih bersih. Tidak ada tipu daya nyata yang dimainkan. Setiap "sel" hanya memiliki garis besar di sekitarnya, dan hanya itu.

Perbatasan dalam animasi

Mengubah border-width akan selalu memicu tata letak, tidak peduli apakah itu benar-benar diperlukan.

Menampilkan hasil rendering cat dari uji kinerja di mana perubahan tata letak ditampilkan di tengah hasil yang membutuhkan waktu 58,4 milidetik untuk diselesaikan.

Selain itu, karena penanganan khusus sub-piksel Chrome untuk lebar batas, menganimasikan border-width membuat seluruh batas bergoyang (yang menurut saya aneh). Firefox tidak memiliki masalah ini.

Menampilkan tes kinerja lain, kali ini tanpa tata letak yang dipicu dalam hasil.

Ada pro dan kontra dalam hal menganimasikan perbatasan. Lihat posting Stephen Shaw beberapa waktu lalu untuk contoh implikasi kinerja.

Ada beberapa gotcha

Tentu saja ada. Seperti kebanyakan properti CSS lainnya, ada beberapa "gotcha" atau hal-hal yang perlu diketahui saat bekerja dengan properti outline

  1. Garis besar bulat hanya didukung di Firefox pada saat penulisan . Saya membayangkan browser lain pada akhirnya akan mendukung mereka juga.
  2. Garis besar selalu mengelilingi semua sisi. Artinya itu bukan properti singkatan seperti, katakanlah, border ; jadi tidak ada outline-bottom , dan seterusnya.

Tapi kita bisa mengatasi keterbatasan ini! Misalnya, kita dapat menggunakan add a box-shadow tanpa radius blur sebagai alternatif. Tapi ingat: box-shadow memiliki biaya kinerja yang lebih tinggi daripada menggunakan outline dan border .

Itu dia!

Apakah Anda akan selalu mengerjakan sesuatu yang membutuhkan pemalsuan tabel dengan daftar yang tidak berurutan? Tidak sepertinya. Tetapi fakta bahwa kita dapat menggunakan outline dan kurangnya partisipasi dalam model kotak membuatnya menarik, terutama sebagai border dalam beberapa kasus.

Mungkin sesuatu seperti papan tic-tac-toe yang dikumpulkan Chris beberapa tahun yang lalu dapat mengambil manfaat dari outline , daripada menggunakan batas sel yang dibuat secara individual. Tantangan diterima, Tn. Coyier? πŸ˜‰


PostingMenggunakan Properti `outline` sebagai Perbatasan yang Dapat Diciutkan muncul pertama kali di CSS-Tricks .

Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

June 19, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *