Outlines

Coba navigasikan sebuah halaman web menggunakan tombol Tab: cincin atau kotak garis akan berpindah dari tautan ke tautan, menandai elemen yang sedang difokuskan. Penanda itu biasanya digambar properti outline — garis yang dilukis di luar tepi elemen. Walaupun bentuknya mirip border, outline bekerja sangat berbeda dan punya peran khusus: menandai fokus tanpa menggeser tata letak. Pada Chapter ini kita membandingkan outline dengan border, membedah properti penyusunnya, lalu membahas aturan aksesibilitas yang menyertainya.

Perbedaan Outline dan Border #

Tabel berikut merangkum perbedaan keduanya:

Karena tidak menempati ruang, outline dapat menimpa elemen di sekitarnya tanpa menggeser apa pun. Menambahkan border 3px pada daftar item akan merombak susunan halaman; menambahkan outline 3px tidak. Sifat itulah yang membuat outline cocok untuk penanda sesaat seperti fokus, sementara border dipakai untuk batas permanen. Kelemahannya, outline dapat tertutup elemen lain yang ditumpuk di atasnya, atau terpotong bila induknya memakai overflow: hidden dengan jarak yang kurang.

Width, Style, Color, dan Offset #

Outline memiliki tiga longhand — outline-width , outline-style , dan outline-color — plus outline-offset untuk mengatur jarak garis dari tepi:

.kotak {
  outline: 3px solid rgb(217, 70, 239);
  outline-offset: 6px;
}

1. Baris 2 (outline: 3px solid rgb(217, 70, 239);): shorthand dengan urutan width style color, pola yang sama seperti shorthand border. Urutan garis yang digambar seragam di keempat sisi.
2. Baris 3 (outline-offset: 6px;): menarik garis 6 piksel menjauh dari tepi elemen. Nilai negatif dapat dipakai untuk menarik garis ke dalam hingga menimpa tepi.

Berbeda dengan border yang bawaannya none untuk gaya namun punya tebal standar, outline pada mayoritas elemen memang tidak digambar sama sekali sampai kita menetapkannya. Warna garis juga dapat diserahkan kepada browser melalui outline-color: auto — browser yang memilih warna yang kontras dengan konten di belakangnya. Pada elemen biasa di Chromium, nilai tersebut mengikuti currentColor, warna teks elemen: kotak demo dengan teks abu-abu kebiruan pun tercatat rgb(51, 65, 85).

.kotak-auto {
  outline: 2px solid;
  outline-color: auto;
}

Focus Ring dan Aksesibilitas #

Peran terpenting outline adalah menandai fokus. Saat pengguna menekan Tab, browser menampilkan outline pada elemen yang menerima fokus; inilah satu-satunya petunjuk posisi bagi pengguna keyboard. Karena itu, pola berikut perlu dihindari:

/* Pola yang merugikan pengguna keyboard */
.tombol:focus { outline: none; }

Bila ring bawaan terasa kurang serasi dengan desain, ganti — jangan hapus. Selector :focus-visible menampilkan ring hanya untuk fokus dari navigasi keyboard, bukan saat elemen diklik dengan mouse, sehingga desain tetap bersih tanpa kehilangan petunjuk fokus:

.tombol:focus-visible {
  outline: 3px solid rgb(2, 132, 199);
  outline-offset: 2px;
}

Deklarasi di atas menggambar ring biru 3px dengan jarak 2px dari tepi tombol, hanya saat fokus datang dari keyboard.

Hasil di Browser:

Kotak pertama digambar outline solid 3px berwarna rgb(217, 70, 239) —
lebar kotaknya tetap 160px karena outline tidak memengaruhi layout.
Kotak kedua memakai outline 2px dengan computed outline-offset 6px.
Kotak ketiga memakai outline-color: auto yang mengikuti warna
teksnya — computed rgb(51, 65, 85) di Chromium. Kotak keempat tanpa
aturan outline memiliki computed outline-style: none.

Demo lengkap chapter ini menampilkan keempat kotak perbandingan plus sebuah tombol yang dapat difokuskan dengan Tab. Setiap elemen uji membawa atribut data-expected yang memeriksa nilai computed — termasuk bukti bahwa lebar kotak dengan outline tetap 160px — sehingga klaim di atas diverifikasi otomatis oleh harness uji Course ini.