demo · v140
Heading Hierarchy
A side-by-side document tree showing the legacy UA stylesheet behaviour (smaller h1 nested inside article) vs the deprecated behaviour after removal. Toggle the rules and watch the same markup render two ways.
legacy UA — depth shrinks h1
Top-level h1 (2em)
depth controls font-size via UA stylesheet
post-deprecation — depth ignored
Top-level h1 (2em)
Nested h1 inside article (still 2em)
Twice-nested h1 (still 2em)
all h1s render at the same size — author controls
/* OLD ua sheet — removed in Chrome 140 */
:where(article, aside, nav, section) h1 {
font-size: 1.5em;
margin-block: 0.83em;
}
:where(article, aside, nav, section) :is(article, aside, nav, section) h1 {
font-size: 1.17em;
}
why the rule was removed
The intent was good: HTML5 sectioning elements were supposed to define an implicit outline so authors could use <h1> everywhere. The outline algorithm never shipped to AT, so the visual scaling rule sat orphaned in the UA sheet for a decade, surprising authors who couldn't understand why their h1 got smaller. Chrome removes the rule, gated by a `