Simon Willison’s Weblog

Default styles for h1 elements are changing (via) Wow, this is a rare occurrence! Firefox are rolling out a change to the default user-agent stylesheet for nested <h1> elements, currently ramping from 5% to 50% of users and with full roll-out planned for Firefox 140 in June 2025. Chrome is showing deprecation warnings and Safari are expected to follow suit in the future.

What's changing? The default sizes of <h1> elements that are nested inside <article>, <aside>, <nav> and <section>.

These are the default styles being removed:

/* where x is :is(article, aside, nav, section) */
x h1 { margin-block: 0.83em; font-size: 1.50em; }
x x h1 { margin-block: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block: 2.33em; font-size: 0.67em; }

The short version is that, many years ago, the HTML spec introduced the idea that an <h1> within a nested section should have the same meaning (and hence visual styling) as an <h2>. This never really took off and wasn't reflected by the accessibility tree, and was removed from the HTML spec in 2022. The browsers are now trying to cleanup the legacy default styles.

This advice from that post sounds sensible to me:

• Do not rely on default browser styles for conveying a heading hierarchy. Explicitly define your document hierarchy using <h2> for second-level headings, <h3> for third-level, etc.
• Always define your own font-size and margin for <h1> elements.

# 11th April 2025, 3:54 am / browsers, chrome, css, firefox, html, mozilla, safari, web-standards

CSS 3: Progress! Alex Russell on the new exciting stuff going in to CSS 3 based on real-world implementations in the modern set of browsers. Of particular interest is the new Flexible Box specification, which specifies new layout primitives hbox and vbox (as seen in XUL) and is already supported by both WebKit and Gecko.

# 22nd August 2009, 11:52 am / alex-russell, browsers, css, css3, flexiblebox, gecko, hbox, standards, vbox, webkit

10 Cool Things We’ll Be Able To Do Once IE6 Is Dead. Highlights include child and attribute selectors, 24bit PNGs and max-width and min-width. Simple pleasures, but I can hardly wait.

# 15th April 2009, 2:17 pm / brothercake, browsers, css, ie6, maxwidth, minwidth, pngs, selectors, standards

When Bugs Collide: Fixing Text Dimming in Firefox 2. Handy tips from Drew on fixing the glitchy text rendering in Firefox 2 when you animate opacity without breaking alpha-transparent PNGs in IE6.

# 19th June 2008, 6:09 pm / browsers, bugs, css, drew-mclellan, firefox, firefox2, ie6, javascript, jquery, opacity, pngs

Safari CSS Reference. Official documentation covering the CSS properties supported by Safari, including the -webkit proprietary extensions.

# 22nd November 2007, 11:51 pm / browsers, css, documentation, safari, webkit

CSS Transforms. WebKit can now do transforms (scale, rotate, translate and skew) in CSS via a new -webkit-transform property. Transforms behave like position relative in that they don’t affect the layout of the page. You can also provide a full affine transform matrix as a shortcut.

# 26th October 2007, 9:45 pm / affinetransformation, apple, browsers, css, graphics, matrix, safari, transforms, webkit

WebCore Rendering I—The Basics. Dave Hyatt has started a series of posts explaining the internals of WebCore’s rendering system.

# 10th August 2007, 3:21 pm / browsers, css, dave-hyatt, html, internals, safari, webcore