Gaya default tag h1 akan berubah

 (developer.mozilla.org)
3 poin oleh GN⁺ 2025-04-11 | 1 komentar | Bagikan ke WhatsApp
  • Browser-browser utama sedang menjalankan pembaruan yang mengubah gaya default (gaya UA) untuk tag <h1>
  • Perubahan ini terutama memengaruhi <h1> yang digunakan di dalam section, article, nav, aside, dan elemen serupa yang bertingkat
  • Developer perlu berhati-hati karena perubahan ini dapat menyebabkan perubahan gaya yang tidak terduga pada situs atau peringatan Lighthouse

Apa yang berubah

  • Spesifikasi HTML dulu sempat memiliki aturan bernama "outline algorithm" yang membuat <h1> tampil secara visual seperti <h2>, <h3>, dan seterusnya sesuai jumlah elemen sectioning yang bertingkat
  • Misalnya, section > h1 dirender seperti <h2>, dan section > section > h1 dirender seperti <h3>
  • Hal ini tidak tercermin di accessibility tree yang sebenarnya, dan ditafsirkan berbeda oleh tiap alat sehingga menimbulkan kebingungan
  • Pada akhirnya algoritma ini dihapus dari spesifikasi HTML pada 2022, dan kini browser juga sedang menghapus gaya UA yang terkait dengannya

Contoh gaya UA browser lama

  • x h1 { font-size: 1.50em }
  • x x h1 { font-size: 1.17em }
  • x x x h1 { font-size: 1.00em }
  • x x x x h1 { font-size: 0.83em }
  • x x x x x h1 { font-size: 0.67em }

Contoh struktur HTML

<body>  
  <h1>Level 1</h1>  
  <section>  
    <h1>Level 2</h1>  
    <section>  
      <h1>Level 3</h1>  
      <section>  
        <h1>Level 4</h1>  
      </section>  
    </section>  
  </section>  
</body>

Perubahan yang bisa diharapkan dan waktunya

  • <h1> kini tidak lagi otomatis berubah gaya hanya karena berada di dalam elemen section yang bertingkat
  • Gaya UA akan menerapkan gaya yang sama untuk semua <h1>
  • Lighthouse akan menampilkan peringatan jika <h1> tidak memiliki font-size yang didefinisikan
  • Peringatan yang ditampilkan: H1UserAgentFontSizeInSection

Firefox

  • Mulai 31 Maret 2025, Firefox Beta 138 mulai menggulirkan perubahan gaya ke 50% pengguna desktop
  • Di Firefox Stable 138, perubahan digulirkan ke 5% pengguna, lalu direncanakan rollout penuh hingga versi 140
  • Di Firefox 136 ke atas, peringatan konsol ditampilkan jika font-size atau margin tidak didefinisikan
  • Cara mengubah pengaturan: di about:config, setel nilai layout.css.h1-in-section-ua-styles.enabled ke false

Chrome

  • Mulai Chrome 136, peringatan muncul jika <h1> menggunakan gaya default yang diperkecil
  • Ini dapat memengaruhi skor "Best Practices" di Lighthouse

Safari

  • Belum ada pembaruan spesifik atau pelacakan bug, tetapi pembaruan serupa juga diperkirakan akan hadir di WebKit

Cara memperbaiki peringatan Lighthouse

  • Lighthouse menampilkan peringatan jika <h1> tidak memiliki font-size, berdasarkan peringatan Chromium DevTools
  • Untuk mencegahnya, Anda perlu menetapkan gaya untuk <h1> secara eksplisit

Contoh gaya

h1 {  
  margin-block: 0.67em;  
  font-size: 2em;  
}
  • Untuk menghindari specificity (prioritas), gunakan :where()
:where(h1) {  
  margin-block: 0.67em;  
  font-size: 2em;  
}

Checklist ringkasan

  • Jangan bergantung pada gaya default browser
  • Gunakan <h2>, <h3>, dan seterusnya secara tepat untuk mengekspresikan hierarki secara eksplisit
  • Tentukan font-size dan margin secara eksplisit untuk semua <h1>
  • Perbarui CSS reset agar mencerminkan perubahan ini
  • Periksa peringatan melalui Lighthouse dan DevTools
  • Rujuk dokumentasi terkait di MDN untuk mencerminkan isi terbaru

Materi terkait

Bacaan terkait

1 komentar

 
GN⁺ 2025-04-11
Komentar Hacker News

  • Di versi stabil Firefox 138, ini akan dirilis ke 5% pengguna, lalu ada rencana diperluas menjadi 50%

    • Ada pendapat bahwa ini akan menyulitkan pengujian karena pengembang web bisa menghadapi perilaku browser yang berbeda dari pengguna
    • Ada pendapat bahwa ini tampaknya meniru metode rollout Facebook, tetapi karena Firefox bukan perangkat lunak sisi server, pendekatan ini tidak tepat

  • Latar belakang historis dari algoritma outline yang diadopsi W3C menarik

    • Browser dan screen reader menolak mengadopsinya karena ambiguitas dengan konten web yang sudah ada serta masalah pemeliharaan
    • Setelah 8 tahun, WHATWG akhirnya meninggalkannya

  • Ada komentar yang penasaran sejak kapan perilaku H1 dimasukkan ke dalam spesifikasi

    • Ada yang mengatakan sudah menulis HTML sejak 1995 tetapi belum pernah mendengarnya
    • Ada pendapat bahwa sebaiknya ini dihapus karena bisa menimbulkan kebingungan

  • Ada komentar yang mengatakan belum pernah memikirkan secara mendalam perilaku elemen section (<section>, <aside>, <nav>, <article>) dan tag <h1>

  • Disayangkan algoritma outline tidak berhasil

    • Ada pendapat bahwa seharusnya dimungkinkan untuk menyusun konten dari berbagai sumber secara bebas
    • Ada pendapat bahwa seharusnya kita bisa menulis fragmen <h1> dan memberinya makna sebagai "judul tingkat tertinggi dalam konteks saya", bukan dalam konteks global dokumen

  • Ada pendapat bahwa tag <h1> harus tetap <h1> tanpa memandang posisinya

    • Secara default ini tidak boleh berubah, dan hal itu dapat menyelesaikan masalah aksesibilitas pada screen reader

  • Ada pendapat bahwa karena kompleksitas seperti ini, banyak desainer memakai <div> untuk segala hal

    • Dengan memakai atribut role, aksesibilitas juga bisa dipertahankan

  • Ada pendapat bahwa header di HTML agak konyol

    • Ada pendapat bahwa membagi bagian buku dengan tag <section> adalah ekspresi yang lebih baik
    • Ada pendapat bahwa h1 dan h2 membuat tag eksplisit dan hierarki yang berbeda dari bentuk lain di HTML
    • Ada candaan bahwa kalau bisa kembali ke masa lalu, mereka ingin menyuruh Tim Berners-Lee memperbaiki masalah ini