Outline

Tekan tombol Tab pada sebuah halaman dan perhatikan: salah satu elemen tampil bergaris. Garis itulah outline — penanda fokus yang menjadi satu-satunya petunjuk arah bagi pengguna keyboard. Outline mirip border, tetapi perannya berbeda: border bagian dari desain, outline bagian dari interaksi. Pada chapter ini kita membedakan keduanya, mempelajari property outline-width, outline-style, outline-color, dan outline-offset, lalu menyusun focus ring custom yang nyaman dan tetap aksesibel.

Perbedaan outline dan border #

Aspek	`border`	`outline`
Letak gambar	pada tepi elemen, di dalam margin	di luar tepi border
Ruang layout	memakan ruang, bagian box model	tidak memakan ruang, tidak menggeser elemen lain
Sisi	bisa diatur per sisi (`border-left`, dst.)	satu lingkar utuh, tidak bisa per sisi
Peran utama	bagian dari desain	penanda fokus dan penekanan

Karena tidak memakan ruang, outline yang digambar bisa menimpa elemen tetangga bila elemen berdempetan — inilah alasan outline-offset menjadi property penting di bab ini. Satu kabar baik: browser modern menggambar outline mengikuti border-radius, sehingga tombol membulat mendapat lingkar yang membulat juga.

Perbedaan terpentingnya bisa dicoba langsung — fokuskan tombol-tombol berikut dengan tombol Tab:

Empat Property dan outline-offset #

css
.tautan-nav:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: #1f6f54;
  outline-offset: 2px;
}

Sama seperti border, tiga property pertama diringkas menjadi outline: 2px solid #1f6f54; — dengan dua catatan:

outline-style wajib ada. Nilai default-nya none, persis seperti border-style; outline tanpa style tidak digambar sama sekali.
outline-offset berada di luar shorthand. Nilai positif mendorong garis menjauh dari elemen; nilai negatif menariknya masuk hingga menimpa tepi elemen.

outline-color juga memahami currentColor, sehingga outline: 2px solid; tanpa warna akan mengikuti warna teks elemen tersebut.

Bahaya Menghapus outline #

css
/* pola yang perlu dihindari */
.tombol:focus {
  outline: none;
}

Motivasi para penulis biasanya estetika: ring bawaan browser dianggap bentrok dengan desain halaman. Jalan keluarnya bukan menghapus, melainkan mengganti dengan ring custom melalui :focus-visible — pseudo-class yang aktif saat fokus datang dari keyboard (misalnya tombol Tab) dan umumnya tidak muncul saat elemen diklik dengan mouse. Untuk browser lama, pasangkan dengan aturan :focus sebagai fallback.

Pola Focus Ring yang Nyaman #

css
.tombol:focus-visible {
  outline: 2px solid #1f6f54;
  outline-offset: 2px;
}

Resep pendek ini cukup untuk mayoritas kasus: garis 2px yang jelas, ditambah offset 2px agar ring tidak menempel ke tepi tombol. Beberapa penyesuaian yang sering dibutuhkan:

Kontras garis. Ring harus terlihat di atas latar mana pun; ambang 3:1 untuk elemen antarmuka akan kita hitung pada chapter Kontras Warna.
Warna dari teks. outline: 2px solid; mengikuti color elemen — praktis untuk tombol yang punya beberapa varian warna.
Radius. Ring mengikuti border-radius elemen pada browser modern, jadi tidak perlu pengaturan tambahan.

Kesalahan Umum #

Kesalahan	Akibatnya	Perbaikannya
`outline: none` tanpa ring pengganti	Pengguna keyboard kehilangan petunjuk fokus	Sediakan ring custom via `:focus-visible`
Mencari `outline-left` atau `outline-top`	Property tersebut tidak ada	Gunakan border bila garis perlu diatur per sisi
Menghitung outline sebagai ruang layout	Perhitungan meleset; outline tidak memakan ruang	Pakai border bila ruang harus masuk hitungan box model
Menulis longhand tanpa `outline-style`	Outline tidak digambar sama sekali	Tulis shorthand `outline: 2px solid ...`

Ringkasan #

Outline adalah lingkar garis di luar box model: tidak memakan ruang, tidak bisa diatur per sisi, dan dirancang untuk pekerjaan yang berbeda dari border — menandai fokus. Property-nya mengikuti pola border (width, style, color) ditambah outline-offset untuk mengatur jarak. Aturan terpentingnya justru menyangkut manusia: jangan pernah menghapus outline tanpa menyediakan ring :focus-visible yang setara. Selanjutnya kita beralih dari garis ke keseluruhan elemen: mengatur kadar transparansi dengan opacity.