The world of the internet stood still. The brains behind the HTML and CSS browser specifications had gone mad. Their decisions — hitting like lightning — had sent shockwaves through the web developer community, the obvious victim of this folly.
If you did not know about this earthquake of a story but worry about its tremors and how they might affect you, here is the gist of it: an element within an
by default anymore. It gets worse: the same will happen within a
element.
I know, it’s awful, and I’m just as flabbergasted as you are. As soon as I learned about this, I needed to ventilate my emotions in writing, so here I am. Apparently, the news has been out for a while, and yet I wasn’t aware of it; it wasn’t on the news, nobody in my circles talked about it, I heard no sirens. Somehow, the Earth kept spinning.
Imagine my surprise this morning when I saw that this very site scored only 82 out of 100 in the Best Practices section of Pagespeed Insights. The horror. Surprised, I looked at the explanations, pointing to MDN Web Docs:
Before May 2025, the HTML standard specified that
,elements in a,, orelement should render as an(smaller font-size with an adjusted margin-block), or as anif nested another level, and so on. This special context-dependent default style has now been removed.To ensure consistent
rendering for browsers that implement the old context-dependent default style, use the following style rule:
h1 { margin-block: 0.67em; font-size: 2em }
After having to define nothing, are we now supposed to add this line of CSS? How elegant, how great (!)
My philosophy when it comes to CSS is that the less of it, the better. For years, this website has been as minimal as possible, as long as it didn’t hurt readability and, dare I say, style. Now one of the foundations of my design is in shambles. Should I take a day off to fix this? Should I completely rethink the 342 bytes of CSS living in the section? Should I find a new style for the Jolly Teapot? Should I change my whole personality?
I’m going to get this off my chest while completely ignoring the reasons and explanations behind this change: it’s dumb. Cue the Ron Swanson “And now it’s gone, and I hate everything” scene.
I loved that different levels of headings could be styled the same way depending on their position or level on the page. When I think about it, it’s quite logical that the title of an article — meaning an within an
outside of it, doesn’t it? Not only did it made sense in terms of displaying the hierarchy of information, but it was also a very elegant system.
I guess it was first implemented to prevent main titles within sections like articles from appearing as large as the main heading of the page, regardless of their actual role. The same goes for
This relatively unknown characteristic of HTML/CSS rendering seduced me to the point of building the whole design of this blog around it: and
or
element, both appear as
. I loved it because it was possible to achieve this only using HTML, relying on the browser’s default rendering.
I know I’m probably one of the few people in the world who has been using this and will therefore be affected by this change.
So now, I am apparently supposed to define headings’ relative sizes using CSS, like an animal (even if the previous default behaviour and values were perfect). Do we need to define everything for the sake of defining it? What’s next? Having to specify the transparent background of a default page? The #000 default colour of text? Can’t we rely on defaults, not even a little?
The worst (or best) part of this news is that now, finally with a proper excuse to tweak CSS instead of writing, here I am writing a blog post. Usually, I work on the CSS instead of doing any writing, without any good reason.
In the meantime, to get my score of 100 back, I’ve added the previously unnecessary 15 bytes to the CSS giving my and
