Outline

Apa itu outline?

outline adalah garis yang digambar di luar border, dan yang penting: tidak memakan ruang layout. Menambah outline tidak menggeser elemen lain.

.tombol:focus {
  outline: 3px solid #38bdf8;
  outline-offset: 2px; /* jarak dari border */
}

Outline vs border

Karena tidak memakan ruang, outline ideal untuk indikator fokus keyboard tanpa merusak layout.

Jangan hapus outline fokus!

Banyak tutorial mengajarkan ini, dan ini buruk untuk aksesibilitas:

/* JANGAN lakukan ini tanpa pengganti */
button:focus {
  outline: none;
}

Pengguna keyboard butuh tahu elemen mana yang sedang fokus. Kalau mau mengganti tampilannya, ganti dengan style fokus yang jelas, bukan menghilangkannya:

button:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 2px;
}

:focus-visible hanya tampil untuk navigasi keyboard, tidak saat diklik mouse. Ini perilaku ideal.

Catatan teknis: outline-offset bisa bernilai negatif untuk menggambar outline di dalam border. Trik ini dipakai untuk efek fokus ganda (double ring).

Analogi: garis polisi

Outline seperti garis polisi di TKP: digambar DI LUAR area, tidak mengubah apa pun di dalamnya, dan bisa dipasang-dicabut tanpa menggeser barang bukti. Border seperti membangun pagar: menggeser tata letak sekitarnya.

Kenapa outline ada? (aksesibilitas!)

KENAPA terbesar: pengguna keyboard (tuna netra dengan screen reader, atau power user) menavigasi dengan Tab. Tanpa indikator fokus yang jelas, mereka tidak tahu posisi mereka. Browser memberi outline default pada :focus, dan menghapusnya tanpa pengganti adalah pelanggaran aksesibilitas serius.

Aturan emas: boleh mengganti gaya outline, JANGAN PERNAH menghilangkannya tanpa pengganti yang sama jelasnya.

/* SALAH: buta keyboard */
.tombol:focus {
  outline: none;
}

/* BENAR: ganti dengan yang lebih bagus */
.tombol:focus-visible {
  outline: 3px solid #a855f7;
  outline-offset: 3px;
}

:focus-visible hanya tampil untuk navigasi keyboard, tidak mengganggu pengguna mouse.

Contoh bertahap: dari default ke custom

Biarkan default (sudah cukup baik):

/* Tidak perlu apa-apa, browser menangani */
a:focus { }

Custom yang tetap aksesibel:

.kartu-fokus:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 4px;
  border-radius: 8px;
}

outline-offset memberi jarak antara outline dan elemen: terlihat modern dan tidak menempel.

Kesalahan umum pemula

Salah: outline: none tanpa pengganti. Sudah dibahas: jangan.

Salah: mengira outline menambah ukuran. Outline tidak memengaruhi layout SAMA SEKALI. Elemen tidak bergeser saat outline muncul, tidak seperti border. Ini justru kelebihannya untuk indikator fokus.

Salah: outline untuk dekorasi permanen. Outline tidak mengikuti border-radius (tetap persegi di kebanyakan browser) dan tidak bisa diatur per sisi. Untuk dekorasi, pakai border atau box-shadow.

Latihan kilat

1. Kenapa menghapus outline pada :focus tanpa pengganti adalah ide buruk? Siapa yang dirugikan?
2. Tulis gaya fokus custom yang aksesibel: outline ungu 3px dengan jarak 2px dari tombol.
3. Apa beda perilaku layout antara border: 2px solid red dan outline: 2px solid red saat ditambahkan ke elemen?

Kunci: (1) Pengguna keyboard/screen reader kehilangan penanda posisi; navigasi menjadi mustahil. (2) .tombol:focus-visible { outline: 3px solid #a855f7; outline-offset: 2px; }. (3) Border menambah ukuran dan menggeser layout; outline tidak memengaruhi layout sama sekali.

Istilah kunci

• Outline: garis DI LUAR border yang tidak memengaruhi layout.
• :focus: state saat elemen menerima fokus keyboard.
• :focus-visible: fokus khusus navigasi keyboard (disarankan).
• outline-offset: jarak antara outline dan elemen.
• Aksesibilitas: memastikan semua pengguna (termasuk keyboard) bisa memakai situs.

Pola focus-visible global

/* Satu aturan untuk seluruh situs */
:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 2px;
  border-radius: 4px;
}

Tempelkan di stylesheet global: setiap elemen fokusable otomatis punya indikator yang jelas dan konsisten. Aksesibilitas dasar selesai dalam 5 baris.

Rangkuman

Outline = garis luar yang tidak mengganggu layout. Jangan pernah hapus indikator fokus tanpa pengganti; pakai :focus-visible untuk aksesibilitas yang benar.