สไตล์เริ่มต้นของแท็ก h1 กำลังจะเปลี่ยน

 (developer.mozilla.org)
3 คะแนน โดย GN⁺ 2025-04-11 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เบราว์เซอร์หลัก ๆ กำลังทยอยอัปเดตเพื่อเปลี่ยนสไตล์เริ่มต้น (UA style) ของแท็ก <h1>
  • การเปลี่ยนแปลงนี้จะส่งผลโดยเฉพาะกับ <h1> ที่ใช้ภายใน section, article, nav, aside ที่ซ้อนกัน
  • นักพัฒนาควรระวัง เพราะการเปลี่ยนแปลงนี้อาจทำให้สไตล์ของเว็บไซต์เปลี่ยนไปโดยไม่คาดคิด หรือเกิดคำเตือนจาก Lighthouse ได้

อะไรที่เปลี่ยนไป

  • ในสเปก HTML เคยมีกฎที่เรียกว่า “outline algorithm” ซึ่งทำให้ <h1> ถูกแสดงผลให้ดูเหมือน <h2>, <h3> ตามจำนวน sectioning elements ที่ซ้อนอยู่
  • ตัวอย่างเช่น section > h1 จะเรนเดอร์เหมือน <h2> และ section > section > h1 จะเรนเดอร์เหมือน <h3>
  • แต่สิ่งนี้ไม่ได้สะท้อนใน accessibility tree จริง และเครื่องมือแต่ละตัวก็ตีความไม่เหมือนกันจนทำให้เกิดความสับสน
  • สุดท้ายอัลกอริทึมนี้ถูกถอดออกจากสเปก HTML ในปี 2022 และตอนนี้เบราว์เซอร์ก็เริ่มถอด UA style ที่อิงกับมันออกตามไปด้วย

ตัวอย่าง 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 ที่ซ้อนกันอีกต่อไป
  • UA style จะใช้สไตล์เดียวกันกับ <h1> ทุกตัว
  • หากไม่ได้กำหนด font-size ให้ <h1> จะมีคำเตือนแสดงใน Lighthouse
  • คำเตือนที่จะแสดงคือ H1UserAgentFontSizeInSection

Firefox

  • ตั้งแต่ 31 มีนาคม 2025 Firefox Beta 138 จะเริ่มปล่อยการเปลี่ยนแปลงสไตล์ให้ผู้ใช้เดสก์ท็อป 50%
  • ใน Firefox Stable 138 จะเริ่มปล่อยให้ 5% ก่อน และจะทยอย rollout ครบทั้งหมดภายในเวอร์ชัน 140
  • ใน Firefox 136 ขึ้นไป หากไม่ได้กำหนด font-size หรือ margin จะมีคำเตือนในคอนโซล
  • วิธีเปลี่ยนการตั้งค่า: ตั้งค่า layout.css.h1-in-section-ua-styles.enabled เป็น false ใน about:config

Chrome

  • ตั้งแต่ Chrome 136 เป็นต้นไป หาก <h1> ยังใช้สไตล์ค่าเริ่มต้นแบบเล็กลง จะเกิดคำเตือน
  • สิ่งนี้อาจส่งผลต่อคะแนน “Best Practices” ของ Lighthouse

Safari

  • แม้ตอนนี้จะยังไม่มีการอัปเดตหรือการติดตามบั๊กที่ชัดเจน แต่คาดว่า WebKit ก็จะมีการอัปเดตในลักษณะเดียวกัน

วิธีแก้คำเตือนของ Lighthouse

  • Lighthouse อ้างอิงคำเตือนจาก Chromium DevTools และจะแสดงคำเตือนหาก <h1> ไม่มี font-size
  • เพื่อหลีกเลี่ยงสิ่งนี้ ควรกำหนดสไตล์ให้ <h1> อย่างชัดเจน

ตัวอย่างสไตล์

h1 {  
  margin-block: 0.67em;  
  font-size: 2em;  
}
  • หากต้องการหลีกเลี่ยง specificity (ลำดับความสำคัญ) ให้ใช้ :where()
:where(h1) {  
  margin-block: 0.67em;  
  font-size: 2em;  
}

เช็กลิสต์สรุป

  • อย่าพึ่งพาสไตล์เริ่มต้นของเบราว์เซอร์
  • ใช้ <h2>, <h3> ฯลฯ ให้เหมาะสม เพื่อแสดงลำดับชั้นอย่างชัดเจน
  • กำหนด font-size และ margin ให้ <h1> ทุกตัวอย่างชัดเจน
  • อัปเดต CSS reset ให้สะท้อนการเปลี่ยนแปลงนี้
  • ตรวจสอบคำเตือนผ่าน Lighthouse และ DevTools
  • อ้างอิงเอกสารที่เกี่ยวข้องของ MDN เพื่อให้เนื้อหาทันสมัย

เอกสารที่เกี่ยวข้อง

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-04-11
ความคิดเห็นบน Hacker News

  • ใน Firefox 138 เวอร์ชันเสถียร จะปล่อยให้ผู้ใช้ 5% ก่อน และมีแผนขยายเป็น 50%

    • มีความเห็นว่าเรื่องนี้จะทำให้การทดสอบยากขึ้น เพราะนักพัฒนาเว็บอาจเจอพฤติกรรมของเบราว์เซอร์ที่ต่างจากผู้ใช้
    • มีความเห็นว่าน่าจะอ้างอิงวิธีการปล่อยของ Facebook แต่ Firefox ไม่ใช่ซอฟต์แวร์ฝั่งเซิร์ฟเวอร์ จึงมีความเห็นว่าวิธีนี้ไม่เหมาะสม

  • ภูมิหลังทางประวัติศาสตร์ของ outline algorithm ที่ W3C รับไปใช้นั้นน่าสนใจ

    • เบราว์เซอร์และ screen reader ปฏิเสธที่จะรองรับ เพราะมีปัญหาเรื่องความกำกวมกับคอนเทนต์เว็บเดิมและภาระในการดูแลรักษา
    • หลังจากนั้น 8 ปี WHATWG ก็เลิกแนวทางนี้ไปในที่สุด

  • มีความเห็นที่สงสัยว่า พฤติกรรมของ H1 ถูกบรรจุไว้ในสเปกตั้งแต่เมื่อไร

    • มีความเห็นว่าเขาเขียน HTML มาตั้งแต่ปี 1995 แต่ไม่เคยได้ยินเรื่องนี้มาก่อน
    • มีความเห็นว่ามันสร้างความสับสน จึงควรถูกลบออก

  • มีความเห็นว่าไม่เคยคิดลึกมาก่อนเกี่ยวกับพฤติกรรมของ section elements (<section>, <aside>, <nav>, <article>) และแท็ก <h1>

  • มีความเห็นว่าเสียดายที่ outline algorithm ไม่ประสบความสำเร็จ

    • มีความเห็นว่าควรสามารถประกอบคอนเทนต์จากหลายแหล่งได้อย่างอิสระ
    • มีความเห็นว่าควรจะเขียนชิ้นส่วน <h1> ได้ และให้ความหมายในฐานะ "หัวข้อระดับบนสุดในบริบทของฉัน" ไม่ใช่อิงจากบริบทโดยรวมของเอกสาร

  • มีความเห็นว่าแท็ก <h1> ก็ควรเป็น <h1> ไม่ว่าจะอยู่ตำแหน่งไหน

    • โดยพื้นฐานแล้วไม่ควรถูกเปลี่ยน และน่าจะแก้ปัญหาด้านการเข้าถึงของ screen reader ได้

  • มีความเห็นว่าเพราะความซับซ้อนแบบนี้ นักออกแบบจำนวนมากจึงใช้ <div> กับทุกอย่าง

    • หากใช้แอตทริบิวต์ role ก็ยังทำให้เข้าถึงได้เช่นกัน

  • มีความเห็นว่า header ของ HTML ค่อนข้างไร้เหตุผลอยู่บ้าง

    • มีความเห็นว่าการแบ่ง section ของหนังสือด้วยแท็ก <section> เป็นการสื่อความหมายที่ดีกว่า
    • มีความเห็นว่า h1 และ h2 สร้างแท็กแบบชัดเจนและลำดับชั้นที่ต่างจากรูปแบบอื่นของ HTML
    • มีมุกว่าถ้าย้อนเวลากลับไปได้ ก็อยากให้ Tim Berners-Lee แก้ปัญหานี้ตั้งแต่แรก