Matthias Zöchling

I have a new article out!

Super Simple Full-Bleed & Breakout Styles
frontendmasters.com/blog/super-s... - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS @chriscoyier.net told me to be proud of it 😛

#CSS

No close quote? There are multiple ways to do ornamental quotation marks.

I watched @kevinpowell.co go through “five super useful CSS properties that don’t get enough attention”, and his use of `open-quote` led to this piece about #CSS quotation marks and the depth counter:
cssence.com/2025/no-clos...

NaN, the not-a-number number that isn’t NaN We're pretty aware, generally that JavaScript is weird, but did you know Not-A-Number (NaN) is a type of number? Mat Marquis walks us through why that is and how to deal with NaN well in your codebases.

We're pretty aware, generally that JavaScript is weird, but did you know Not-A-Number (NaN) is a type of number? Mat Marquis walks us through why that is and how to deal with NaN well in your codebases.

small details that matter 🧑‍🍳

use CSS pseudoelements to bridge the :hover gap w/ :has() + inset

a:has(+ .dots) a::after,
.dots + a::after {
position: absolute;
content: '';
}
a:has(+ .dots) a::after { inset: 0 -50% 0 100%; }
.dots + a::after { inset: 0 100% 0 -50%; }

www.whatismyscreenresolution.org, or web search if I can’t remember it.

Market research!

How often do you use one of those "what is my browser" websites (personally or sent to someone)?

Would you use one that isn't littered with ads or has a design from 1995? What features should it have?

What if you could also use it to collect info to emulate devices in Polypane?

They do the job. I guess they are laden with ads, but I’d have to ask my ad blocker.

BTW, you had me at “design from 1995”. 🙂

I sometimes use one of those "what is my screen resolution" sites, especially on mobile, to figure out device pixels and CSS pixels, does that count?

I remembered that the Basic theme on my blog handles everything just fine without any `box-sizing` declaration, so it’s `content-box` all the way. Maybe I’ll spend a couple of minutes to figure out how easy it would be to convert another theme of mine.

That aside, what’s your take on this?

YouTube video by Kevin Powell It might be time to rethink box-sizing: border-box

But it doesn’t stop there, Pawel also added a YouTube video from @kevinpowell.co, who showcases that `border-box` may not always be your friend:
youtu.be/PtAcpV6TAGM

Don't Inherit the Box Model It's time to stop spreading this out-dated practice

I’m fairly certain that you have already abandoned the old way of declaring `box-sizing: border-box` that includes inheritance, but in case you ask yourself why you should, it’s because @miriam.codes told you so:
www.oddbird.net/2025/09/04/b...

The CSS Reset, again | pawelgrzybek.com Apparently you are not a real CSS dev if you don’t maintain your own CSS reset. Challenge accepted! Not a typical reset, but for sure a bunch of opinions.

Triple link alert!

I’m a sucker for #CSS resets, I will read any article on that subject. So sure enough I did read this one from @pawelgrzybek.com:
pawelgrzybek.com/the-css-rese...

However, I didn’t get that far, because what Pawel wrote about `box-sizing` got me thinking.

Instant snapport How to tweak the optimal viewing region of the scrollport.

#CSS quick tip: How to tweak the optimal viewing region of the scrollport…
cssence.com/2025/scroll-...

Instant snapport How to tweak the optimal viewing region of the scrollport.

#CSS quick tip: How to tweak the optimal viewing region of the scrollport…
cssence.com/2025/scroll-...

Container queries and CSS make it simple to smoothly transition an element to the other side of its parent container without knowing exact dimensions or distance.

Read more in my latest post: ryanmulligan.dev/blog/transit...

Color scheme switcher HTML-only and beyond: Automatic, light, or dark color scheme.

Left as an exercise for the reader is to figure out how things get out of hand when you not only nest color schemes, but also throw my color scheme switcher on steroids from last year into the mix:
cssence.com/2024/color-s...

#CSS #WebDev

A tiny bit-o-CSS for Stable Scrollbar Gutters—zachleat.com A post by Zach Leatherman (zachleat)

Tired:
`html { overflow-y: scroll; }`

Wired:
`html { scrollbar-gutter: stable; }`

Nice little #CSS gem from @zachleat.com.
www.zachleat.com/web/stable-s...

The feature detection is the cherry on top.

Nesting color schemes This is indeed about having dark and light mode on the same page.

I could’ve written a simple article about the `color-scheme` property. I could’ve written a simple article about the `light-dark()` function.

But nooo.

I had to nerd out and write about nesting color schemes. 🙄

cssence.com/2025/nesting...

#CSS #WebDev #ColorScheme #LightDark

Messenger It's a small planet, but someone's gotta make the deliveries.

It’s hard to imagine how this is even possible on the web, but it is, and we should celebrate that.

messenger.abeto.co

Oh hi 👋
thanks for the shout-out, Manuel.
I’m currently on what seems to be a blogging (and Bluesky, and Mastodon) hiatus, but more #CSS content should be coming soon. 🙂

CSS margin-trim and line height units | 12 Days of Web Learn ways of perfecting design with line height units and margin-trim.

`text-box` was originally called `leading-trim`. Now it’s two longhand’s, `text-box-trim` and `text-box-edge` — or just use the `text-box` shorthand.

The `margin-trim` property is different, and it’s still the same as it was originally.

12daysofweb.dev/2024/css-mar...

💡 CSS Tip!

Create an infinite logo marquee using modern CSS and less than 10 lines of code.

css-tip.com/logo-marquee/

Where's the novelty, you might ask? It's responsive, works with any number of images, doesn't rely on magic numbers, and you can easily control it using CSS variables.

Should we remove XSLT from the web platform? #11523

github.com/whatwg/html/...

Weigh in with an emoji or more complex thoughts

new Date("wtf") How well do you know JavaScript's Date class?

I made a quiz about the JS Date parser is. It's very easy and you will score very high.

jsdate.wtf

Animating emojis The waiting is the hardest part.

It’s once again time for my annual Emoji animation. How those end up is always hit or miss, they can be either quite nice or just meh. This year’s works best if the emoji in question is in 2D and has no transparent areas. Yeah, big if.

cssence.com/2025/animati...

#CSS #Animation

The story of how the latest #CSS logo came to be:

"Kind of Rebeccapurple" www.ondrejkonecny.com/blog/kind-of...

I had missed this writeup. It's been great reading it to get a short history of how the logo evolved into what it came to be.

Screenshot of linked demo with subgrid elements not aligned to parent grid.

Help? 😟

Stupid #CSS #layout question: why isn't my subgrid respected?

codepen.io/thebabydino/...

Automatic repositioning logic! 🏗️

One really cool built-in feature of native customizable select:

Default styles for h1 elements are changing | MDN Blog Browsers are starting to roll out changes in default UA styles for nested section headings. This post describes the incoming changes, how to identify if it's an issue on your websites, and hints for c...

Default styles for <h1> elements are changing

👉 developer.mozilla.org/en-US/blog/h...

#webdev

Re: Design - Structure and semantics URLs and HTML. The foundation of every website.

Today is #CSSNakedDay 🎉

On participating sites you’ll see how they are structured, and thus what comes first: Skip links, a banner, the navigation, or will you see the actual content with its heading level one right away? […]

cssence.com/2020/redesig...

Also, Happy Birthday to me.