Atribut `style=` Ganda di Satu Elemen — Browser Diam-Diam Hanya Pakai yang Pertama

Bug ini menarik karena CSS-nya benar, nilainya benar, dan elemennya benar — tapi salah satu blok style saya tidak pernah dipakai sama sekali. Di sebuah situs konten yang saya rawat, satu logo seharusnya tampil kecil dan rapi (32×32, di-fit ke dalam kotak). Tapi di produksi logo itu malah membludak memenuhi seluruh card di ukuran asli PNG-nya — sekitar 386×360 — seolah width, height, dan object-fit yang saya tulis menguap begitu saja.

Yang bikin makin membingungkan: di screenshot headless yang saya pakai untuk QA, logonya kelihatan benar. Baru saat saya buka di browser sungguhan, ukurannya kacau. Ternyata penyebabnya satu kesalahan markup yang sangat mudah terlewat: dua atribut style= di elemen yang sama.

Markup yang bermasalah

Markup yang dihasilkan kira-kira begini — perhatikan ada style= muncul dua kali di satu <img>:

<img
  style="display:block"
  src="/logo.png"
  style="width:32px;height:32px;object-fit:contain"
/>

Kelihatannya seperti dua style itu akan digabung. Tidak. Hasilnya logo tampil di ukuran natural PNG-nya, dan semua aturan sizing — width, height, object-fit — hilang tanpa jejak.

Kenapa hanya style= pertama yang menang

Ini perilaku yang ditentukan spesifikasi HTML, bukan bug browser. Saat sebuah elemen punya atribut dengan nama yang sama lebih dari sekali, parser hanya mengambil yang pertama dan mengabaikan sisanya. Tidak ada penggabungan, tidak ada peringatan, tidak ada error di konsol.

Jadi pada <img> di atas, browser membaca style="display:block" lalu membuang style="width:32px;height:32px;object-fit:contain" sepenuhnya. Yang tersisa cuma display:block. Karena tidak ada batasan dimensi, gambar jatuh ke ukuran intrinsiknya — 386×360 — dan memenuhi card.

Ini juga menjelaskan kenapa screenshot headless menyembunyikannya. Renderer headless yang saya pakai menormalkan / menulis ulang atribut elemen sebelum melakukan layout, jadi style ganda secara tidak sengaja "terdedup" dan QA-nya lolos. Browser sungguhan tidak melakukan itu — ia mengikuti aturan spesifikasi apa adanya: yang pertama menang, sisanya diam-diam dibuang. Pelajaran kerasnya: verifikasi di browser asli, bukan cuma di screenshot headless.

Solusi: jangan pernah kirim dua style= di satu elemen

Perbaikannya simpel begitu Anda tahu penyebabnya — gabungkan semua deklarasi ke dalam satu atribut style=:

<img
  src="/logo.png"
  style="display:block;width:32px;height:32px;object-fit:contain"
/>

Satu atribut, semua aturan hidup. Logonya kembali ke 32×32.

Karena ini biasanya muncul dari templating — satu lapisan menambahkan style="display:block", lapisan lain menambahkan style sizing — saya audit codebase dengan regex sederhana untuk menangkap setiap elemen yang punya dua style=:

# Cari tag dengan style= muncul dua kali pada satu elemen
grep -rEn 'style=[^>]*style=' .

Pola style=[^>]*style= mencocokkan dua style= dalam tag yang sama (selama keduanya sebelum > penutup). Setiap hit adalah elemen yang aturannya diam-diam dibuang.

Kapan dua style justru tidak apa-apa

Penting dibedakan: masalahnya adalah dua style= di satu elemen yang sama, bukan dua elemen yang masing-masing punya style=. Pola wrapper di bawah ini benar — ada dua elemen, masing-masing satu atribut style:

<!-- Aman: dua elemen berbeda, satu style= masing-masing -->
<div style="display:block">
  <img src="/logo.png" style="width:32px;height:32px;object-fit:contain" />
</div>

Sering kali memisahkan jadi wrapper + inner seperti ini malah pendekatan yang lebih bersih: container mengurus layout, gambar mengurus sizing dirinya sendiri, dan tidak ada elemen yang pernah membawa atribut duplikat.

Catatan tambahan

• Aturan "atribut pertama menang" berlaku untuk semua atribut, bukan cuma style. Dua class=, dua id=, dua href= — yang kedua dan seterusnya selalu diabaikan. style paling sering menggigit karena sizing yang hilang langsung terlihat secara visual.
• Kalau gambar mendadak tampil di "ukuran random tapi konsisten", curigai ukuran intrinsik aset. 386×360 di kasus saya persis dimensi natural file PNG-nya — petunjuk kuat bahwa semua constraint sizing sedang diabaikan.
• Tempatkan dedup di tahap templating/build, bukan cuma di review. Kalau dua helper berbeda bisa menyuntik style ke elemen yang sama, cepat atau lambat keduanya akan bertabrakan lagi.

Intinya: ketika CSS Anda "benar" tapi tidak berefek, periksa apakah deklarasinya benar-benar sampai ke elemen. Atribut duplikat adalah salah satu cara paling sunyi sebagian markup Anda menghilang — tanpa error, tanpa peringatan, hanya aturan yang pertama yang bertahan.