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 ``
  • Perubahan ini terutama memengaruhi `` 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 tampil secara visual seperti, ``, dan seterusnya sesuai jumlah elemen sectioning yang bertingkat
  • Misalnya, section > h1 dirender seperti , dan `section > section > h1` dirender seperti
  • 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


  Level 1

    Level 2

      Level 3

        Level 4

Perubahan yang bisa diharapkan dan waktunya

  • `` kini tidak lagi otomatis berubah gaya hanya karena berada di dalam elemen section yang bertingkat
  • Gaya UA akan menerapkan gaya yang sama untuk semua ``
  • Lighthouse akan menampilkan peringatan jika `` 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 `` 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 `` tidak memiliki font-size, berdasarkan peringatan Chromium DevTools
  • Untuk mencegahnya, Anda perlu menetapkan gaya untuk `` 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 , , dan seterusnya secara tepat untuk mengekspresikan hierarki secara eksplisit
  • Tentukan font-size dan margin secara eksplisit untuk semua ``
  • 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 (, , , ) dan tag ``

  • 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 `` dan memberinya makna sebagai "judul tingkat tertinggi dalam konteks saya", bukan dalam konteks global dokumen

  • Ada pendapat bahwa tag harus tetap 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 `` 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 `` 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