เบราว์เซอร์จะเปลี่ยนสไตล์เริ่มต้นของ <h1> โดยจะไม่ลดขนาดตัวอักษรอัตโนมัติแล้ว และอาจถูก Lighthouse เตือนเรื่อง Best Practices
1. อย่าพึ่งพาสไตล์เริ่มต้นของเบราว์เซอร์ในการจัดลำดับหัวข้อ
เนื่องจากเบราว์เซอร์กำลังยกเลิกการปรับขนาดอัตโนมัติของ <h1> ตามระดับการซ้อนของ sectioning elements เช่น <section>, <article>, <nav>, และ <aside> ควรกำหนดลำดับหัวข้ออย่างชัดเจนโดยใช้ <h2> สำหรับหัวข้อระดับสอง, <h3> สำหรับระดับสาม เป็นต้น
.
2. กำหนด font-size และ margin สำหรับ <h1> ด้วยตนเอง
เพื่อหลีกเลี่ยงปัญหาการแสดงผลที่ไม่สอดคล้องกัน ควรกำหนดขนาดตัวอักษรและระยะห่างของ <h1> อย่างชัดเจน เช่น:
h1 {
font-size: 2em;
margin-block: 0.67em;
}
.
3. พิจารณาอัปเดต CSS reset
หากใช้ CSS reset หรือ normalize.css ควรตรวจสอบและอัปเดตให้รองรับการเปลี่ยนแปลงนี้ เพื่อให้แน่ใจว่าสไตล์พื้นฐานของคุณสอดคล้องกับพฤติกรรมใหม่ของเบราว์เซอร์
.
4. ตรวจสอบเว็บไซต์ด้วย Lighthouse และ DevTools
ใช้เครื่องมือเช่น Lighthouse และ DevTools ของเบราว์เซอร์เพื่อตรวจสอบว่าไม่มีการใช้งาน <h1> ที่ไม่มีการกำหนด font-size ซึ่งอาจถูกเตือนว่าเป็นการใช้งานที่ล้าสมัย