Matthias Zöchling
@cssence.com
#CSS enthusiast & #A11Y advocate. Makes websites and design systems. Works for https://george-labs.com in Vienna, Austria.
Pinned
Matthias Zöchling
@cssence.com
· Nov 6
CSSence.com «The Essence of CSS»
Weblog and #IndieWeb Hub of Matthias Zöchling (@CSSence).
cssence.com
#introduction 👋
My name is Matthias, but online you are more likely to know me as @CSSence. I’m a web developer from Austria with focus on semantic #HTML and #A11Y. I’m into #CSS since its early days. You’ll find me blogging about web development stuff over at cssence.com.
My name is Matthias, but online you are more likely to know me as @CSSence. I’m a web developer from Austria with focus on semantic #HTML and #A11Y. I’m into #CSS since its early days. You’ll find me blogging about web development stuff over at cssence.com.
Sure, I enjoy reading about anchor positioning and view transitions as much as the next guy, but it’s ever so refreshing to read about down-to-earth #CSS stuff:
blog.kizu.dev/fixing-basel... by @kizu.dev
Initially I misinterpreted the title, I thought this was about Baseline browser compatibility.
blog.kizu.dev/fixing-basel... by @kizu.dev
Initially I misinterpreted the title, I thought this was about Baseline browser compatibility.
Fixing Baselines
Do you know how to center things in CSS? In year 2025? Easy! You just… align… or justify…, ok, maybe just place? your content… or items? …Forget it, this post is not about alignment. Or is it? This po...
blog.kizu.dev
November 9, 2025 at 8:27 AM
Sure, I enjoy reading about anchor positioning and view transitions as much as the next guy, but it’s ever so refreshing to read about down-to-earth #CSS stuff:
blog.kizu.dev/fixing-basel... by @kizu.dev
Initially I misinterpreted the title, I thought this was about Baseline browser compatibility.
blog.kizu.dev/fixing-basel... by @kizu.dev
Initially I misinterpreted the title, I thought this was about Baseline browser compatibility.
I have a philosophical thought experiment for you:
If a redesign happens in the open, and no one is around to see it, did it go live?
cssence.com/2025/without...
#CSS #blog #redesign
If a redesign happens in the open, and no one is around to see it, did it go live?
cssence.com/2025/without...
#CSS #blog #redesign
Redesigning in the open - Without further notice
The quiet way: How to not (or how not to) announce a redesign.
cssence.com
November 7, 2025 at 11:21 AM
I have a philosophical thought experiment for you:
If a redesign happens in the open, and no one is around to see it, did it go live?
cssence.com/2025/without...
#CSS #blog #redesign
If a redesign happens in the open, and no one is around to see it, did it go live?
cssence.com/2025/without...
#CSS #blog #redesign
Reposted by 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
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
October 31, 2025 at 6:28 PM
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
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
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...
cssence.com/2025/no-clos...
No close quote?
There are multiple ways to do ornamental quotation marks.
cssence.com
November 5, 2025 at 12:21 PM
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...
cssence.com/2025/no-clos...
Reposted by Matthias Zöchling
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.
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.
piccalil.li
October 23, 2025 at 11:07 AM
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.
Reposted by Matthias Zöchling
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%; }
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%; }
October 22, 2025 at 4:54 PM
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%; }
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%; }
Reposted by Matthias Zöchling
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?
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?
October 22, 2025 at 1:42 PM
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?
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?
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.
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.
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.
pawelgrzybek.com
October 22, 2025 at 1:15 PM
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.
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.
#CSS quick tip: How to tweak the optimal viewing region of the scrollport…
cssence.com/2025/scroll-...
cssence.com/2025/scroll-...
Instant snapport
How to tweak the optimal viewing region of the scrollport.
cssence.com
October 16, 2025 at 8:41 AM
#CSS quick tip: How to tweak the optimal viewing region of the scrollport…
cssence.com/2025/scroll-...
cssence.com/2025/scroll-...
Reposted by Matthias Zöchling
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...
Read more in my latest post: ryanmulligan.dev/blog/transit...
October 13, 2025 at 1:25 PM
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...
Read more in my latest post: ryanmulligan.dev/blog/transit...
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.
`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.
A tiny bit-o-CSS for Stable Scrollbar Gutters—zachleat.com
A post by Zach Leatherman (zachleat)
www.zachleat.com
October 12, 2025 at 5:30 PM
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.
`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.
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
But nooo.
I had to nerd out and write about nesting color schemes. 🙄
cssence.com/2025/nesting...
#CSS #WebDev #ColorScheme #LightDark
Nesting color schemes
This is indeed about having dark and light mode on the same page.
cssence.com
October 12, 2025 at 6:09 AM
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
But nooo.
I had to nerd out and write about nesting color schemes. 🙄
cssence.com/2025/nesting...
#CSS #WebDev #ColorScheme #LightDark
Reposted by Matthias Zöchling
It’s hard to imagine how this is even possible on the web, but it is, and we should celebrate that.
messenger.abeto.co
messenger.abeto.co
Messenger
It's a small planet, but someone's gotta make the deliveries.
messenger.abeto.co
October 9, 2025 at 3:03 PM
It’s hard to imagine how this is even possible on the web, but it is, and we should celebrate that.
messenger.abeto.co
messenger.abeto.co
Reposted by Matthias Zöchling
`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...
The `margin-trim` property is different, and it’s still the same as it was originally.
12daysofweb.dev/2024/css-mar...
CSS margin-trim and line height units | 12 Days of Web
Learn ways of perfecting design with line height units and margin-trim.
12daysofweb.dev
August 23, 2025 at 9:49 PM
`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...
The `margin-trim` property is different, and it’s still the same as it was originally.
12daysofweb.dev/2024/css-mar...
Reposted by Matthias Zöchling
💡 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.
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.
July 29, 2025 at 11:03 AM
💡 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.
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.
Reposted by Matthias Zöchling
Should we remove XSLT from the web platform? #11523
github.com/whatwg/html/...
Weigh in with an emoji or more complex thoughts
github.com/whatwg/html/...
Weigh in with an emoji or more complex thoughts
August 4, 2025 at 1:16 PM
Should we remove XSLT from the web platform? #11523
github.com/whatwg/html/...
Weigh in with an emoji or more complex thoughts
github.com/whatwg/html/...
Weigh in with an emoji or more complex thoughts
Reposted by Matthias Zöchling
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
cssence.com/2025/animati...
#CSS #Animation
Animating emojis
The waiting is the hardest part.
cssence.com
July 1, 2025 at 6:22 AM
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
cssence.com/2025/animati...
#CSS #Animation
Reposted by Matthias Zöchling
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.
"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.
Ondřej Konečný – Designer, Software Engineer
Ondřej Konečný's personal website.
www.ondrejkonecny.com
June 12, 2025 at 9:04 AM
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.
"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.
Reposted by Matthias Zöchling
June 30, 2025 at 11:36 AM
Reposted by Matthias Zöchling
Automatic repositioning logic! 🏗️
One really cool built-in feature of native customizable select:
One really cool built-in feature of native customizable select:
April 22, 2025 at 5:34 PM
Automatic repositioning logic! 🏗️
One really cool built-in feature of native customizable select:
One really cool built-in feature of native customizable select:
Reposted by Matthias Zöchling
Default styles for elements are changing
elements are changing
👉 developer.mozilla.org/en-US/blog/h...
#webdev
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...
developer.mozilla.org
April 11, 2025 at 7:34 AM
Default styles for elements are changing
elements are changing
👉 developer.mozilla.org/en-US/blog/h...
#webdev
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.
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.
Re: Design - Structure and semantics
URLs and HTML. The foundation of every website.
cssence.com
April 9, 2025 at 4:02 AM
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.
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.
Reposted by Matthias Zöchling
This is the view transition stuff I love to see. Nice and snappy without stuff sliding around.
Designers designing with view transitions in mind is gonna make a big difference IMO
Designers designing with view transitions in mind is gonna make a big difference IMO
April 5, 2025 at 8:15 AM
This is the view transition stuff I love to see. Nice and snappy without stuff sliding around.
Designers designing with view transitions in mind is gonna make a big difference IMO
Designers designing with view transitions in mind is gonna make a big difference IMO
That’s what I call artificial malnutrition.
Stunning work from @heydonworks.bsky.social:
heydonworks.com/article/pois...
At the same time, it’s not a good sign when this is the level of creativity we need these days.
Stunning work from @heydonworks.bsky.social:
heydonworks.com/article/pois...
At the same time, it’s not a good sign when this is the level of creativity we need these days.
Poisoning Well
An experimental strategy for contaminating Large Language Models
heydonworks.com
April 2, 2025 at 9:03 AM
That’s what I call artificial malnutrition.
Stunning work from @heydonworks.bsky.social:
heydonworks.com/article/pois...
At the same time, it’s not a good sign when this is the level of creativity we need these days.
Stunning work from @heydonworks.bsky.social:
heydonworks.com/article/pois...
At the same time, it’s not a good sign when this is the level of creativity we need these days.