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.
I needed to get this off my chest.
Are you doing web accessiblity work too? Can you relate? Did you blog about something similar? Let me know.
#WevDevelopment #A11Y
Are you doing web accessiblity work too? Can you relate? Did you blog about something similar? Let me know.
#WevDevelopment #A11Y
For my last blog post of 2025, let me end the year with something personal.
cssence.com/2025/accessi...
#WebDev #A11Y
cssence.com/2025/accessi...
#WebDev #A11Y
Accessibility is personal
Is A11Y work rewarding? Demanding? Exhausting? All of the above?
cssence.com
December 22, 2025 at 7:48 AM
I needed to get this off my chest.
Are you doing web accessiblity work too? Can you relate? Did you blog about something similar? Let me know.
#WevDevelopment #A11Y
Are you doing web accessiblity work too? Can you relate? Did you blog about something similar? Let me know.
#WevDevelopment #A11Y
The HTMHell Advent Calendar never disappoints, but this year contained an article that came out of left field, given that I’ve never used MathML so far.
htmhell.dev/adventcalend...
htmhell.dev/adventcalend...
A11y Considerations in Math on the Web - HTMHell
A collection of bad practices in HTML, copied from real websites.
htmhell.dev
December 21, 2025 at 8:32 AM
The HTMHell Advent Calendar never disappoints, but this year contained an article that came out of left field, given that I’ve never used MathML so far.
htmhell.dev/adventcalend...
htmhell.dev/adventcalend...
Reposted by Matthias Zöchling
Interactive demo explaining the how behind the #SVG #matrix #filter used to extract individual RGB channels as alpha masks from an input.
You can play with it on @codepen.io: codepen.io/thebabydino/...
You can play with it on @codepen.io: codepen.io/thebabydino/...
feColorMatrix: alpha masks from individual channels
Interactive demo to illustrate using RGB channels as alpha masks. --- Adaptive layout depending on viewport width, aspect-ratio and on how much space...
codepen.io
December 20, 2025 at 8:45 AM
Interactive demo explaining the how behind the #SVG #matrix #filter used to extract individual RGB channels as alpha masks from an input.
You can play with it on @codepen.io: codepen.io/thebabydino/...
You can play with it on @codepen.io: codepen.io/thebabydino/...
Reposted by Matthias Zöchling
For my last blog post of 2025, let me end the year with something personal.
cssence.com/2025/accessi...
#WebDev #A11Y
cssence.com/2025/accessi...
#WebDev #A11Y
Accessibility is personal
Is A11Y work rewarding? Demanding? Exhausting? All of the above?
cssence.com
December 19, 2025 at 8:49 PM
For my last blog post of 2025, let me end the year with something personal.
cssence.com/2025/accessi...
#WebDev #A11Y
cssence.com/2025/accessi...
#WebDev #A11Y
For my last blog post of 2025, let me end the year with something personal.
cssence.com/2025/accessi...
#WebDev #A11Y
cssence.com/2025/accessi...
#WebDev #A11Y
Accessibility is personal
Is A11Y work rewarding? Demanding? Exhausting? All of the above?
cssence.com
December 19, 2025 at 8:49 PM
For my last blog post of 2025, let me end the year with something personal.
cssence.com/2025/accessi...
#WebDev #A11Y
cssence.com/2025/accessi...
#WebDev #A11Y
Reposted by Matthias Zöchling
Delighted to contribute to the HTMLHell advent calendar. I explained how screen readers don’t always announce what’s visually on screen - through the medium of burritos:
www.htmhell.dev/adventcalend...
Thanks to experts @matuzo.at and @hidde.blog for making sure the burrito was structurally sound.
www.htmhell.dev/adventcalend...
Thanks to experts @matuzo.at and @hidde.blog for making sure the burrito was structurally sound.
Don't leave the screen reader hungry - HTMHell
A collection of bad practices in HTML, copied from real websites.
www.htmhell.dev
December 18, 2025 at 4:24 AM
Delighted to contribute to the HTMLHell advent calendar. I explained how screen readers don’t always announce what’s visually on screen - through the medium of burritos:
www.htmhell.dev/adventcalend...
Thanks to experts @matuzo.at and @hidde.blog for making sure the burrito was structurally sound.
www.htmhell.dev/adventcalend...
Thanks to experts @matuzo.at and @hidde.blog for making sure the burrito was structurally sound.
Reposted by Matthias Zöchling
CSS text-decoration-inset landed in Firefox 146! Here's how it works:
December 11, 2025 at 5:11 PM
CSS text-decoration-inset landed in Firefox 146! Here's how it works:
Reposted by Matthias Zöchling
Made a site comparing the sizes of living things :)
The great Julius Csotonyi spent 5 months painting over 60 illustrations for the site, no ai used
> neal.fun/size-of-life/
The great Julius Csotonyi spent 5 months painting over 60 illustrations for the site, no ai used
> neal.fun/size-of-life/
December 10, 2025 at 4:03 PM
Made a site comparing the sizes of living things :)
The great Julius Csotonyi spent 5 months painting over 60 illustrations for the site, no ai used
> neal.fun/size-of-life/
The great Julius Csotonyi spent 5 months painting over 60 illustrations for the site, no ai used
> neal.fun/size-of-life/
Reposted by Matthias Zöchling
💡 CSS Tip!
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
December 4, 2025 at 11:02 AM
💡 CSS Tip!
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
How many selectors do you know for the HTML element? Only two, right? There are more!
It's time to discover the hidden selectors of the HTML element.
css-tip.com/root-selecto...
Are they useful? Probably not, but it's a fun exploration of CSS selectors. Did I miss a cool selector?
I have a list of favorite websites that I revisit when I need inspiration, but these are the three I keep circling back to the most:
- @ethanmarcotte.com for design & layout
- @piccalil.li for rhythm & typography
- @adactio.com for “View source"
What are yours?
#WebDesign
- @ethanmarcotte.com for design & layout
- @piccalil.li for rhythm & typography
- @adactio.com for “View source"
What are yours?
#WebDesign
December 4, 2025 at 8:57 AM
I have a list of favorite websites that I revisit when I need inspiration, but these are the three I keep circling back to the most:
- @ethanmarcotte.com for design & layout
- @piccalil.li for rhythm & typography
- @adactio.com for “View source"
What are yours?
#WebDesign
- @ethanmarcotte.com for design & layout
- @piccalil.li for rhythm & typography
- @adactio.com for “View source"
What are yours?
#WebDesign
#CSS quick tip: You can conditionally load a stylesheet based on feature detection.
cssence.com/2025/import-...
cssence.com/2025/import-...
@import ⚭ @supports
How to load a stylesheet conditionally based on feature detection.
cssence.com
December 3, 2025 at 2:56 PM
#CSS quick tip: You can conditionally load a stylesheet based on feature detection.
cssence.com/2025/import-...
cssence.com/2025/import-...
“Baseline widely available” is a good thing to look out for when it comes to CSS features, but given that my blog’s core audience uses the latest browsers, I just went all in and made my new design the default.
cssence.com/2025/without...
#blog #weblog #redesign
cssence.com/2025/without...
#blog #weblog #redesign
Redesigning in the open - Without further notice
The quiet way: How to not (or how not to) announce a redesign.
cssence.com
December 2, 2025 at 3:26 PM
“Baseline widely available” is a good thing to look out for when it comes to CSS features, but given that my blog’s core audience uses the latest browsers, I just went all in and made my new design the default.
cssence.com/2025/without...
#blog #weblog #redesign
cssence.com/2025/without...
#blog #weblog #redesign
Reposted by Matthias Zöchling
On day 1 of the #HTMHellAdventCalendar @5t3ph.bsky.social describes an accessibility issue that can arise when you use popovers and dialogs together.
htmhell.dev/adventcalend...
htmhell.dev/adventcalend...
Top layer troubles: popover vs. dialog - HTMHell
A collection of bad practices in HTML, copied from real websites.
htmhell.dev
December 1, 2025 at 8:54 PM
On day 1 of the #HTMHellAdventCalendar @5t3ph.bsky.social describes an accessibility issue that can arise when you use popovers and dialogs together.
htmhell.dev/adventcalend...
htmhell.dev/adventcalend...
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