`h1` टैग की डिफ़ॉल्ट स्टाइल बदल रही है

 (developer.mozilla.org)
3 पॉइंट द्वारा GN⁺ 2025-04-11 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • प्रमुख ब्राउज़र <h1> टैग की डिफ़ॉल्ट स्टाइल (UA style) बदलने वाला अपडेट जारी कर रहे हैं
  • इसका खास असर section, article, nav, aside आदि के भीतर नेस्टेड रूप में इस्तेमाल किए गए <h1> पर पड़ेगा
  • डेवलपर्स को सावधान रहना होगा, क्योंकि इस बदलाव से साइट पर अप्रत्याशित स्टाइल परिवर्तन या Lighthouse warnings आ सकती हैं

क्या बदल रहा है

  • HTML specification में कभी "outline algorithm" नाम का एक नियम था, जिसके अनुसार नेस्टेड sectioning elements की संख्या के आधार पर <h1> को विज़ुअली <h2>, <h3> जैसा दिखाया जाता था
  • उदाहरण के लिए section > h1 को <h2> की तरह, और section > section > h1 को <h3> की तरह render किया जाता था
  • यह असल accessibility tree में प्रतिबिंबित नहीं होता था, और अलग-अलग tools इसे अलग तरह से interpret करते थे, जिससे भ्रम पैदा होता था
  • अंततः यह algorithm 2022 में HTML specification से हटा दिया गया, और अब ब्राउज़र भी इसके अनुसार UA styles हटा रहे हैं

पुराने ब्राउज़र UA style का उदाहरण

  • 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 संरचना का उदाहरण

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

अपेक्षित बदलाव और समयसीमा

  • अब <h1> सिर्फ नेस्टेड section elements के अंदर होने से अपने आप अलग स्टाइल में नहीं बदलेगा
  • UA style अब सभी <h1> पर एक जैसी स्टाइल लागू करेगा
  • अगर <h1> पर font-size define नहीं है, तो Lighthouse में warning दिखाई देगी
  • दिखाई जाने वाली warning: H1UserAgentFontSizeInSection

Firefox

  • 31 मार्च 2025 से Firefox Beta 138 में desktop users के 50% के लिए style change rollout शुरू
  • Firefox Stable 138 में 5% users को rollout के बाद, version 140 तक पूरा rollout होने की योजना
  • Firefox 136 या उसके बाद के versions में, अगर font-size या margin define नहीं है तो console warning दिखाई देगी
  • सेटिंग बदलने का तरीका: about:config में layout.css.h1-in-section-ua-styles.enabled का मान false करें

Chrome

  • Chrome 136 से, अगर <h1> पुरानी डिफ़ॉल्ट छोटी style इस्तेमाल करता है, तो warning आएगी
  • इसका असर Lighthouse के "Best Practices" score पर पड़ सकता है

Safari

  • अभी कोई ठोस अपडेट या bug tracking नहीं है, लेकिन WebKit में भी ऐसा ही अपडेट आने की उम्मीद है

Lighthouse warning को कैसे ठीक करें

  • Lighthouse, Chromium DevTools warnings के आधार पर, <h1> पर font-size न होने पर warning दिखाता है
  • इससे बचने के लिए <h1> पर explicitly style देनी चाहिए

उदाहरण style

h1 {  
  margin-block: 0.67em;  
  font-size: 2em;  
}
  • specificity (प्राथमिकता) से बचने के लिए :where() का उपयोग करें
:where(h1) {  
  margin-block: 0.67em;  
  font-size: 2em;  
}

संक्षिप्त चेकलिस्ट

  • ब्राउज़र की डिफ़ॉल्ट style पर निर्भर न रहें
  • <h2>, <h3> आदि का उचित उपयोग करके hierarchy को स्पष्ट रूप से व्यक्त करें
  • सभी <h1> पर font-size और margin स्पष्ट रूप से define करें
  • CSS reset को अपडेट करें ताकि यह बदलाव शामिल हो सके
  • Lighthouse और DevTools के जरिए warnings की जांच करें
  • MDN के संबंधित दस्तावेज़ देखकर नवीनतम जानकारी अपनाएँ

संबंधित सामग्री

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-04-11
Hacker News टिप्पणियाँ

  • Firefox 138 के stable version में इसे 5% users के लिए rollout किया जा रहा है, और इसे 50% तक बढ़ाने की योजना है

    • यह राय है कि web developers के लिए testing मुश्किल होगी क्योंकि users का browser behavior उनसे अलग हो सकता है
    • यह Facebook की deployment approach से प्रेरित लगता है, लेकिन Firefox server-side software नहीं है, इसलिए यह तरीका उपयुक्त नहीं लगता

  • W3C द्वारा अपनाए गए outline algorithm की ऐतिहासिक पृष्ठभूमि दिलचस्प है

    • browsers और screen readers ने existing web content के साथ ambiguity और maintenance issues के कारण इसे अपनाने से इनकार किया
    • 8 साल बाद WHATWG ने आखिरकार इसे छोड़ दिया

  • कुछ लोगों को जिज्ञासा है कि H1 behavior कब से specification का हिस्सा था

    • एक राय है कि 1995 से HTML लिखने के बावजूद उन्होंने इसके बारे में कभी नहीं सुना
    • यह भ्रम पैदा कर सकता है, इसलिए इसे हटा देना बेहतर होगा

  • कुछ लोगों का कहना है कि उन्होंने section elements (<section>, <aside>, <nav>, <article>) और <h1> tag के behavior के बारे में कभी गहराई से नहीं सोचा

  • यह अफसोस जताया गया है कि outline algorithm सफल नहीं हो पाया

    • एक राय है कि अलग-अलग स्रोतों की content को मनमाने ढंग से compose किया जा सकना चाहिए
    • उनका कहना है कि <h1> fragments लिखे जा सकें और उन्हें document के global context के बजाय "मेरे context का सबसे ऊपरी शीर्षक" जैसा अर्थ दिया जा सके

  • एक राय है कि <h1> tag, उसकी position चाहे जो भी हो, हमेशा <h1> ही होना चाहिए

    • default behavior को बदला नहीं जाना चाहिए, और इससे screen readers की accessibility समस्याएँ भी सुलझ सकती हैं

  • यह भी कहा गया है that इस जटिलता की वजह से कई designers हर चीज़ के लिए <div> का इस्तेमाल करते हैं

    • role attribute का उपयोग करने से accessibility भी सुनिश्चित की जा सकती है

  • कुछ लोगों को लगता है कि HTML के headers कुछ हद तक मूर्खतापूर्ण हैं

    • एक राय है कि किताब के sections को <section> tag से अलग करना बेहतर अभिव्यक्ति होती
    • उनका कहना है कि h1 और h2, HTML के दूसरे formats से अलग explicit tags और hierarchy बनाते हैं
    • मज़ाक में कहा गया है कि काश समय में वापस जाकर Tim Berners-Lee से यह समस्या ठीक करवाई जा सकती