`h1` etiketinin varsayılan stili değişiyor

• Başlıca tarayıcılar, `` etiketinin varsayılan stilini (UA stili) değiştiren bir güncellemeyi uygulamaya alıyor
• Özellikle iç içe geçmiş section, article, nav, aside gibi yapıların içinde kullanılan `` etiketlerini etkiliyor
• Geliştiricilerin, bu değişiklik nedeniyle sitelerinde beklenmedik stil değişiklikleri veya Lighthouse uyarıları oluşabileceği için dikkatli olması gerekiyor

Neler değişiyor

• HTML spesifikasyonunda bir dönem "outline algorithm" adlı bir kural vardı; buna göre , iç içe geçmiş sectioning öğelerinin sayısına bağlı olarak görsel olarak , `` gibi gösteriliyordu
• Örneğin section > h1, gibi; `section > section > h1` ise gibi render ediliyordu
• Bu durum gerçek erişilebilirlik ağacına yansımıyor, araçlar tarafından da farklı biçimlerde yorumlanarak kafa karışıklığı yaratıyordu
• Sonunda bu algoritma 2022'de HTML spesifikasyonundan kaldırıldı ve şimdi tarayıcılar da buna bağlı UA stillerini kaldırıyor

Eski tarayıcı UA stili örneği

• 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 }

HTML yapı örneği

  Level 1

    Level 2

      Level 3

        Level 4

Beklenebilecek değişiklikler ve zamanlama

• ``, artık iç içe geçmiş section öğelerinin içinde diye otomatik olarak farklı stillenmeyecek
• UA stili, tüm `` etiketlerine aynı stili uygulayacak
• Lighthouse, `` için font-size tanımlanmadığında uyarı gösterecek
• Gösterilen uyarı: H1UserAgentFontSizeInSection

Firefox

• 31 Mart 2025'ten itibaren Firefox Beta 138'de masaüstü kullanıcılarının %50'sine stil değişikliği dağıtılmaya başlandı
• Firefox Stable 138'de önce %5'e dağıtım yapılıp ardından 140 sürümüne kadar tam yaygınlaştırma planlanıyor
• Firefox 136 ve sonrasında, font-size veya margin tanımlı değilse konsolda uyarı gösteriliyor
• Ayarı değiştirme yöntemi: about:config içinde layout.css.h1-in-section-ua-styles.enabled değerini false olarak ayarlayın

Chrome

• Chrome 136'dan itibaren, `` varsayılan küçük stile dayanıyorsa uyarı veriliyor
• Bu durum Lighthouse'un "Best Practices" puanını etkileyebilir

Safari

• Henüz somut bir güncelleme ya da bug takibi yok, ancak WebKit tarafında da benzer bir güncelleme bekleniyor

Lighthouse uyarısı nasıl düzeltilir

• Lighthouse, Chromium DevTools uyarılarını temel alarak `` için font-size yoksa uyarı gösteriyor
• Bunu önlemek için `` etiketine açıkça stil vermek gerekiyor

Örnek stil

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

• specificity'yi (öncelik) önlemek için :where() kullanın

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

• İlgili bilgiler MDN'nin heading öğeleri dokümantasyonunda derlenmiş durumda https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1

Özet kontrol listesi

• Tarayıcı varsayılan stillerine güvenmeyin
• Hiyerarşiyi açıkça göstermek için , gibi etiketleri uygun şekilde kullanın
• Tüm `` etiketleri için font-size ve margin değerlerini açıkça tanımlayın
• Bu değişikliği yansıtacak şekilde CSS reset'inizi güncelleyin
• Uyarıları Lighthouse ve DevTools üzerinden kontrol edin
• En güncel içerik için MDN'nin ilgili dokümantasyonuna başvurun

İlgili kaynaklar

• MDN heading öğeleri dokümantasyonu
• Google Lighthouse
• Firefox DevTools

[GN⁺]

Hacker News görüşleri

• Firefox 138’in kararlı sürümünde kullanıcıların %5’ine dağıtılacak ve ardından %50’ye çıkarılması planlanıyor

  • Web geliştiricilerinin kullanıcılarla farklı tarayıcı davranışları görebileceği ve bunun testleri zorlaştıracağı yönünde görüşler var
  • Bunun Facebook’un dağıtım yönteminden esinlenmiş göründüğü, ancak Firefox sunucu tarafı bir yazılım olmadığı için bu yaklaşımın uygun olmayabileceği söyleniyor

• W3C’nin benimsediği outline algoritmasının tarihsel arka planı ilgi çekici bulunuyor

  • Tarayıcılar ve ekran okuyucular, mevcut web içeriğiyle ilgili belirsizlikler ve bakım sorunları nedeniyle bunu benimsemeyi reddetmiş
  • 8 yıl sonra WHATWG sonunda bundan vazgeçmiş

• H1 davranışının spesifikasyona ne zamandan beri dahil olduğunu merak eden görüşler var

  • 1995’ten beri HTML yazdığını ama bunu hiç duymadığını söyleyenler var
  • Kafa karıştırabileceği için kaldırılmasının daha iyi olacağı düşünülüyor

• Bölüm öğeleri (, , , ) ile `` etiketinin davranışı üzerine hiç derinlemesine düşünmediğini söyleyen görüşler var

• Outline algoritmasının başarılı olamaması üzücü bulunuyor

  • Farklı kaynaklardan gelen içeriğin serbestçe bir araya getirilebilmesi gerektiği söyleniyor
  • Bir `` parçası yazıp buna belgenin genel bağlamı yerine "kendi bağlamımdaki en üst başlık" anlamını verebilmek gerektiği ifade ediliyor

• etiketi, bulunduğu yere bakılmaksızın olarak kalmalı görüşü var

  • Varsayılan olarak değişmemesi gerektiği ve ekran okuyucu erişilebilirlik sorunlarını çözebileceği söyleniyor

• Bu karmaşıklık yüzünden birçok tasarımcının her şey için `` kullandığı söyleniyor

  • role özniteliği kullanılırsa erişilebilirliğin de sağlanabileceği belirtiliyor

• HTML başlık yapısını biraz saçma bulan görüşler var

  • Bir kitabın bölümlerini `` etiketiyle ayırmanın daha iyi bir ifade olduğu söyleniyor
  • h1 ve h2nin, HTML’nin diğer biçimlerinden farklı olarak açık etiketler ve bir hiyerarşi oluşturduğu belirtiliyor
  • Zamanda geriye dönüp Tim Berners-Lee’ye bu sorunu çözdürmek isteyeceğine dair şakalar yapılıyor