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

 (developer.mozilla.org)
3 puan yazan GN⁺ 2025-04-11 | 1 yorum | WhatsApp'ta paylaş
  • Başlıca tarayıcılar, <h1> 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 <h1> 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 <h1>, iç içe geçmiş sectioning öğelerinin sayısına bağlı olarak görsel olarak <h2>, <h3> gibi gösteriliyordu
  • Örneğin section > h1, <h2> gibi; section > section > h1 ise <h3> 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

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

Beklenebilecek değişiklikler ve zamanlama

  • <h1>, artık iç içe geçmiş section öğelerinin içinde diye otomatik olarak farklı stillenmeyecek
  • UA stili, tüm <h1> etiketlerine aynı stili uygulayacak
  • Lighthouse, <h1> 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, <h1> 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 <h1> için font-size yoksa uyarı gösteriyor
  • Bunu önlemek için <h1> 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;  
}

Özet kontrol listesi

  • Tarayıcı varsayılan stillerine güvenmeyin
  • Hiyerarşiyi açıkça göstermek için <h2>, <h3> gibi etiketleri uygun şekilde kullanın
  • Tüm <h1> 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

İlgili okumalar

1 yorum

 
GN⁺ 2025-04-11
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 (<section>, <aside>, <nav>, <article>) ile <h1> 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 <h1> 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

  • <h1> etiketi, bulunduğu yere bakılmaksızın <h1> 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 <div> 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 <section> 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