Garis besar CSS lebih dari sekadar perbatasan
Properti CSS outline adalah properti yang membingungkan. Ketika Anda pertama kali mempelajarinya, sulit untuk memahami bagaimana itu bahkan jauh berbeda dari properti perbatasan. The W3C menjelaskannya sebagai memiliki perbedaan berikut:
- Garis besar tidak membutuhkan ruang.
- Garis besar mungkin tidak persegi panjang.
Garis Besar Tidak Menyita Ruang
Pernyataan ini, dengan sendirinya membingungkan. Bagaimana bisa suatu objek di halaman Web Anda tidak mengambil ruang di halaman Web? Tetapi jika Anda menganggap halaman Web Anda seperti bawang, setiap item pada halaman dapat dilapis di atas item lain. Properti outline tidak mengambil ruang karena selalu ditempatkan di atas kotak elemen.
Ketika garis besar ditempatkan di sekitar elemen, itu tidak memiliki efek pada bagaimana elemen itu diletakkan di halaman. Itu tidak mengubah ukuran atau posisi elemen. Jika Anda menempatkan garis besar pada elemen, itu akan mengambil jumlah ruang yang sama seperti jika Anda tidak memiliki garis besar elemen itu. Ini tidak benar tentang perbatasan. Batas pada elemen ditambahkan ke lebar dan tinggi luar elemen. Jadi jika Anda memiliki gambar dengan lebar 50 piksel, dengan batas 2-piksel, itu akan membutuhkan 54 piksel (2 piksel untuk setiap sisi perbatasan). Gambar yang sama dengan garis 2-piksel akan mengambil hanya 50 piksel lebar pada halaman Anda, garis besar akan ditampilkan di atas tepi luar gambar.
Garis Besar Dapat Tidak Persegi Panjang
Sebelum Anda mulai berpikir "keren, sekarang saya bisa menggambar lingkaran!" Pikirkan lagi. Pernyataan ini memiliki arti yang berbeda dari yang Anda kira. Ketika Anda menempatkan batas pada elemen, browser menafsirkan elemen seolah-olah itu adalah satu kotak persegi panjang raksasa. Jika kotak itu terpecah menjadi beberapa baris, browser hanya membiarkan bagian tepinya terbuka karena kotaknya tidak tertutup. Seolah-olah browser melihat perbatasan dengan layar lebar tak terbatas - cukup lebar untuk batas itu menjadi satu persegi panjang kontinyu.
Sebaliknya, properti garis tepi menjadi pertimbangan. Jika elemen yang diuraikan mencakup beberapa garis, garis besar akan menutup di akhir garis dan membuka kembali pada baris berikutnya. Jika memungkinkan, garis besar akan tetap terhubung sepenuhnya juga, menciptakan bentuk non-persegi panjang.
Penggunaan Properti Garis Besar
Salah satu kegunaan terbaik dari properti outline adalah untuk menyorot istilah pencarian. Banyak situs melakukan ini dengan warna latar belakang, tetapi Anda juga dapat menggunakan properti garis besar dan tidak perlu khawatir menambahkan spasi tambahan di halaman Anda.
Properti outline-color menerima istilah "invert" yang membuat garis tepi warna kebalikan latar belakang saat ini. Ini memungkinkan Anda untuk menyorot elemen di halaman Web dinamis tanpa perlu tahu warna apa yang digunakan .
Anda juga dapat menggunakan properti outline untuk menghapus garis putus-putus di sekitar tautan aktif. Artikel ini dari CSS-Trik menunjukkan cara menghapus garis putus-putus.