- Các trình duyệt lớn đang triển khai bản cập nhật thay đổi kiểu mặc định (UA style) của thẻ
<h1>
- Đặc biệt ảnh hưởng tới
<h1> được dùng bên trong các section, article, nav, aside lồng nhau
- Nhà phát triển cần lưu ý vì thay đổi này có thể gây ra biến đổi kiểu hiển thị ngoài dự kiến trên website hoặc cảnh báo từ Lighthouse
Điểm thay đổi là gì
- Trong đặc tả HTML từng có một quy tắc gọi là “outline algorithm”, khiến
<h1> được xử lý để nhìn giống <h2>, <h3> tùy theo số lượng phần tử sectioning lồng nhau
- Ví dụ,
section > h1 được render như <h2>, còn section > section > h1 được render như <h3>
- Điều này không được phản ánh trong accessibility tree thực tế, và còn bị các công cụ diễn giải khác nhau nên gây ra nhầm lẫn
- Cuối cùng thuật toán này đã bị loại khỏi đặc tả HTML vào năm 2022, và giờ các trình duyệt cũng đang loại bỏ UA style liên quan
Ví dụ UA style của trình duyệt trước đây
- 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 }
Ví dụ cấu trúc 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>
Những thay đổi có thể kỳ vọng và thời điểm áp dụng
<h1> giờ sẽ không tự động đổi kiểu chỉ vì nằm bên trong các phần tử section lồng nhau- UA style sẽ áp dụng cùng một kiểu cho mọi
<h1>
- Lighthouse sẽ hiển thị cảnh báo nếu
<h1> không được định nghĩa font-size
- Cảnh báo hiển thị:
H1UserAgentFontSizeInSection
Firefox
- Từ ngày 31/3/2025, Firefox Beta 138 bắt đầu triển khai thay đổi kiểu cho 50% người dùng desktop
- Firefox Stable 138 sẽ triển khai cho 5% trước, sau đó rollout toàn bộ đến phiên bản 140
- Từ Firefox 136 trở lên, nếu
font-size hoặc margin chưa được định nghĩa thì sẽ có cảnh báo trong console
- Cách đổi thiết lập: trong
about:config, đặt layout.css.h1-in-section-ua-styles.enabled thành false
Chrome
- Từ Chrome 136, nếu
<h1> đang dùng kiểu mặc định bị thu nhỏ thì sẽ xuất hiện cảnh báo
- Điều này có thể ảnh hưởng tới điểm “Best Practices” của Lighthouse
Safari
- Hiện chưa có cập nhật cụ thể hay bug tracking rõ ràng, nhưng WebKit cũng được kỳ vọng sẽ có cập nhật tương tự
Cách sửa cảnh báo Lighthouse
- Lighthouse hiển thị cảnh báo khi
<h1> không có font-size, dựa trên cảnh báo của Chromium DevTools
- Để tránh điều này, cần chỉ định style cho
<h1> một cách tường minh
Ví dụ style
h1 {
margin-block: 0.67em;
font-size: 2em;
}
- Để tránh specificity (độ ưu tiên), hãy dùng
:where()
:where(h1) {
margin-block: 0.67em;
font-size: 2em;
}
Checklist tóm tắt
- Không phụ thuộc vào kiểu mặc định của trình duyệt
- Dùng
<h2>, <h3>... phù hợp để biểu đạt phân cấp một cách tường minh
- Chỉ định rõ
font-size và margin cho mọi <h1>
- Cập nhật CSS reset để phản ánh thay đổi này
- Kiểm tra cảnh báo bằng Lighthouse và DevTools
- Tham khảo tài liệu liên quan trên MDN để cập nhật nội dung mới nhất
Tài liệu liên quan
1 bình luận
Ý kiến trên Hacker News
Trên bản ổn định của Firefox 138, thay đổi này sẽ được triển khai cho 5% người dùng và có kế hoạch mở rộng lên 50%
Bối cảnh lịch sử của thuật toán outline được W3C chấp nhận khá thú vị
Có ý kiến thắc mắc từ khi nào hành vi của H1 được đưa vào đặc tả
Có ý kiến nói rằng chưa từng suy nghĩ sâu về hành vi của các phần tử section (
<section>,<aside>,<nav>,<article>) và thẻ<h1>Có ý kiến tiếc rằng thuật toán outline đã không thành công
<h1>và gán cho nó ý nghĩa là "tiêu đề cấp cao nhất trong ngữ cảnh của tôi", thay vì theo ngữ cảnh toàn cục của tài liệuCó ý kiến cho rằng thẻ
<h1>phải luôn là<h1>bất kể vị trí ở đâuCó ý kiến cho rằng chính sự phức tạp này khiến nhiều nhà thiết kế dùng
<div>cho mọi thứCó ý kiến cho rằng phần tiêu đề trong HTML hơi ngớ ngẩn
<section>là cách biểu đạt tốt hơn