Sign in

Matthias Zöchling

@cssence.com
147 followers 120 following 111 posts

#CSS enthusiast & #A11Y advocate. Makes websites and design systems. Works for george-labs.com in Vienna, Austria.

PostsRepliesMedia
Reposted by Matthias Zöchling
Patrick Brosset @patrickbrosset.com · 23/08/2026
Great news! The CSS sibling-count() and sibling-index() functions are now Baseline Newly Available! I.e implemented in all major browsers.
web-platform-dx.github.io
sibling-count() and sibling-index() - Web platform features explorer
The sibling-count() and sibling-index() CSS functions return integers that are useful to style elements based on their positions among siblings or on the number of siblings, for example as part of a c...
413830
Reposted by Matthias Zöchling
zeldman @zeldman.bsky.social · 17/08/2026
★ Required reading for makers of websites: Matuzo’s HTML boilerplate in 2026. Every element that world-class front-end dev, author, a11y auditor & web standards speaker @matuzo.at uses for the basic structure of an HTML document … with explanations. Updated from his classic 2021 boilerplate.
matuzo.at
My HTML boilerplate in 2026 - Manuel Matuzović
Every element I use for the basic structure of a HTML document, with explanations why.
05612
Reposted by Matthias Zöchling
Vale @vale.rocks · 10/08/2026
@lea.verou.me published an interesting article on website theme toggle design, which set me off thinking about them. After a bit of experimenting and testing with users, I've got a pattern I quite like. vale.rocks/micros/20260... #UI #UX
vale.rocks
Light/Dark/System Theme Setting Design - 10 Aug 2026 03:30 UTC
84410
Reposted by Matthias Zöchling
rem / Remy Sharp @remysharp.com · 05/08/2026
I wrote this after travelling by train (after a long time of not really travelling anywhere): Progressive Enhancement inside of JavaScript remysharp.com/2026/08/05/p... Nothing new, just nice to see it up close.
remysharp.com
Progressive Enhancement inside of JavaScript
Lately I've had the opportunity to travel by train and coach, during which time I also tend to work. It's really only during these periods that I'm reminded of…
3265
Matthias Zöchling @cssence.com · 05/08/2026
Nifty! ``` @supports at-rule(@supports) { /* ✅ The browser supports `@supports at-rule(…)` */ } ``` As seen in www.bram.us/2026/03/15/a... by @bram.us
bram.us
Detect at-rule support in CSS with @supports at-rule(@keyword)
Back in January 2022, I wrote about an exciting new CSS Working Group decision: a function to detect at-rule support using @supports at-rule(@keyword). Fast forward to today, and the CSS Conditional R...
010
Reposted by Matthias Zöchling
Matthias Zöchling @cssence.com · 09/07/2026
Something something masonry layout. cssence.com/2026/farewel... #CSS
cssence.com
Farewell Twitter
@CSSence on Twitter: July 14, 2010 – July 8, 2026.
011
Matthias Zöchling @cssence.com · 09/07/2026
Something something masonry layout. cssence.com/2026/farewel... #CSS
cssence.com
Farewell Twitter
@CSSence on Twitter: July 14, 2010 – July 8, 2026.
011
Matthias Zöchling @cssence.com · 13/06/2026
> Speed is how you avoid reckoning. It guarantees you miss things, and you can’t learn from what you don’t notice. A blog post full of wisdom, by @jim-nielsen.com blog.jim-nielsen.com/2026/speed-n...
blog.jim-nielsen.com
Speed is Not Conducive to Wisdom
Writing about the big beautiful mess that is making things for the world wide web.
020
Matthias Zöchling @cssence.com · 04/06/2026
Dance like nobody’s watching?
010
Matthias Zöchling @cssence.com · 04/06/2026
As it happens, I just watched youtu.be/KSFsZmxM9sA by @kevinpowell.co ... he too wants to revisit the topic in five years. 🙃
m.youtube.com
The future of the web might lie in its past
YouTube video by General Musings with Kevin Powell
020
Matthias Zöchling @cssence.com · 04/06/2026
✍️ Part Three of my miniseries about edge cases in web design: Will your site still be seen by anyone? Outlook not so good. cssence.com/2026/breakin... #WebDev #WebDesign
cssence.com
Breaking bad
Will your site still be seen by anyone?
271
Matthias Zöchling @cssence.com · 09/05/2026
My pleasure. Glad it helps. 🙂
000
Matthias Zöchling @cssence.com · 29/04/2026
I was made aware of the text-based web browser named chawan. I finally looked into it, and updated my article from earlier this year. Tl;dr, the point still stands. cssence.com/2026/text-ba...
cssence.com
Text-based web browsers
How do they fare with (not so) recent additions to HTML?
010
Matthias Zöchling @cssence.com · 23/04/2026
Is there a place where I can see “some of the best t-shirts the web standards game has ever seen”?
100
Reposted by Matthias Zöchling
Matthias Zöchling @cssence.com · 13/04/2026
✍️ In case you haven’t heard of `font-variant-emoji`, neither have I. cssence.com/2026/font-va... #CSS #Emoji #Unicode
cssence.com
Unicode Variation Selectors
In case you haven’t heard of font-variant-emoji…
1227
Matthias Zöchling @cssence.com · 14/04/2026
> Most of your screen time isn't leisure. It isn't addiction. It isn't even a choice. It's maintenance. www. terrygodier.com/the-last-quiet-thing by @terrygodier.bsky.social
terrygodier.com
The Last Quiet Thing
Your possessions came alive. Now they won't stop talking.
011
Matthias Zöchling @cssence.com · 13/04/2026
My answer is “not yet”, and I’d hope so is yours, but I guess there's a reason the question exists. Full disclosure: The answer comes from someone who has to endure React. And I sprinkle in quite a few `{' '}` on an average work day.
110
Matthias Zöchling @cssence.com · 13/04/2026
✍️ In case you haven’t heard of `font-variant-emoji`, neither have I. cssence.com/2026/font-va... #CSS #Emoji #Unicode
cssence.com
Unicode Variation Selectors
In case you haven’t heard of font-variant-emoji…
1227
Matthias Zöchling @cssence.com · 11/04/2026
My annual Emoji animation returns, meaning there are now eight animations nobody asked for. I made this on Linux, fingers crossed that it’ll look decent with the emoji set on your OS too. cssence.com/2026/animati... #CSS #emoji #animation
cssence.com
Animating emojis (2026)
Looking cool. Eventually. Hopefully. Ideally.
010
Reposted by Matthias Zöchling
⭑ salma @whitep4nth3r.com · 09/04/2026
we don't talk enough about how cool the color-interpolation-method is in CSS gradients all of these slices have the same gradient: linear-gradient(#00ffff 0%, #ff00ff 100%) each one is just using a different colour interpolation
A demonstration of the same gradient defined as a light blue to fuschia gradient, with 5 different color interpolation methods. From left to right, srgb, which kind of muddies the blended colours in the middle to a light pastel purple, lch, which moves seems to move to the blue colour quicker, not creating the purple muddiness, oklch, which does move through the purple but in a more subtle way, oklab, which remains more pink than anything, and hsl, which adds a very dark almost internet blue at the centre of the gradient
620046
Matthias Zöchling @cssence.com · 09/04/2026
So long stylesheets, see you again tomorrow. Happy #CSSNakedDay!
011
Reposted by Matthias Zöchling
Piccalilli @piccalil.li · 26/03/2026
This is not an article that Steve, the author, thinks should exist in a healthy industry, but the shape of our industry — especially right now — makes this sort of article very necessary and hopefully helpful to you in your job. piccalil.li/blog/applyin...
piccalil.li
Applying accessibility fixes with stealth for the greater good
This is not an article that Steve, the author, thinks should exist in a healthy industry, but the shape of our industry — especially right now — makes this sort of article very necessary and hopefully...
13414
Reposted by Matthias Zöchling
Adam Argyle @nerdy.dev · 15/11/2024
#CSS trick not enough folks know about: painting into the sub boxes of an element - border - padding - content you can paint into one, or all of them differently! here's a gradient border, a solid padding fill, and a gradient content (inner) box see fur yerself codepen.io/argyleink/pe...
div {
  border: 20px solid transparent;
  padding: 20px;
  background: 
    linear-gradient(in oklch, cyan, lime)        content-box, 
    conic-gradient(deeppink 0 0)                 padding-box,
    linear-gradient(to top in oklch, cyan, lime) border-box;
}a box filled in 3 different way as described in the post
619129
Reposted by Matthias Zöchling
Bramus @bram.us · 15/03/2026
New in Chromium 148: detect at-rule support in CSS with `@supports at-rule(@keyword)` www.bram.us/2026/03/15/a... Chrome 148 is currently available on the Canary and Dev release channels. It goes stable at the end of April.
bram.us
Detect at-rule support in CSS with @supports at-rule(@keyword)
Back in January 2022, I wrote about an exciting new CSS Working Group decision: a function to detect at-rule support using @supports at-rule(@keyword). Fast forward to today, and the CSS Conditional R...
34212
Reposted by Matthias Zöchling
Patrick Brosset @patrickbrosset.com · 09/03/2026
I feel like this is either very dumb or very clever. Either way, I blogged about it: Using CSS animations as state machines to remember focus or hover states in CSS only. patrickbrosset.com/articles/202...
Abstract illustration of a CSS animation in the shape of a series of square that get incresingly rotated. The text reads: CSS animations as state machines.
5399
Matthias Zöchling @cssence.com · 05/03/2026
After watching youtu.be/XVIgKEOVfVg, where @matuzo.at talks about the new HTML text-scale meta tag, I had to revise my »Breakpoints« article from last week.
youtu.be
A new meta tag for respecting text scaling on mobile
YouTube video by HTMHell
020
Matthias Zöchling @cssence.com · 05/03/2026
Check out “Clashes between web and X11 colors in the CSS color scheme” under en.wikipedia.org/wiki/X11_col...
en.wikipedia.org
X11 color names - Wikipedia
020
Matthias Zöchling @cssence.com · 04/03/2026
There’s a typo on the body element, namely `bacgkround: gray;`, but the tragedy is real.
The color “gray” in CSS is actually darker than than the color “darkgray”.
2130
Matthias Zöchling @cssence.com · 04/03/2026
✍️ I usually write about HTML, CSS and JS. Doing a bit about git feels alien to me. Primarily I put it out there to attract crowd wisdom. cssence.com/2026/rebase-... #git
cssence.com
Rebase feature branch
Here’s what I do when my target branch got amended.
011
Matthias Zöchling @cssence.com · 27/02/2026
That reminds me, my Print First movement never took off. 🫣 cssence.com/2015/print-f...
cssence.com
Print first
Forget Mobile First. Providing Styles for Print should be your first media query.
010
Reposted by Matthias Zöchling
Nilesh Prajapati @nileshprajapati.com · 25/02/2026
Modern #CSS code snippets, side by side with the old hacks they replace.
modern-css.com
Modern CSS Code Snippets | modern.css
A collection of modern CSS code snippets. Every old CSS hack next to its clean, native replacement, side by side.
091
Matthias Zöchling @cssence.com · 25/02/2026
Long Distance High Five! 🙂
000
Matthias Zöchling @cssence.com · 25/02/2026
Seconds after I posted my latest article I ran into this gem from @dbushell.com, so I‘m gonna to link to it: dbushell.com/2025/06/13/y... Throwing such an error message towards your visitors violates my “Fail gracefully” bullet point.
dbushell.com
Your Framework is Showing
The one where I’ve had enough of the same Next.js error
110
Matthias Zöchling @cssence.com · 25/02/2026
✍️ Part Two of my miniseries about edge cases in web design: Will all the resources on your site finish loading? Only at the best of times. cssence.com/2026/breakin... #WebDev #WebDesign
cssence.com
Breaking points
Will your site load under extreme conditions?
110
Matthias Zöchling @cssence.com · 24/02/2026
First order of business: Read »Con­tin­voucly Morged Value« by @matthiasott.com > The care is the work. > > The care creates the value. > > AI doesn’t care. AI is just another tool. matthiasott.com/notes/contin...
matthiasott.com
Continvoucly Morged Value · Matthias Ott
Web design engineer, UX designer, teacher, and speaker – helping teams build websites and digital products with a focus on CSS, accessibility, and performance.
010
Matthias Zöchling @cssence.com · 23/02/2026
Wow, that’s tiny. Thanks for the tip.
010
Matthias Zöchling @cssence.com · 23/02/2026
Part One of my miniseries about edge cases in web design: What is the agreed-upon minimum resolution? 320px, 360px? It’s complicated. cssence.com/2026/breakpo... #CSS #WebDesign
cssence.com
Breakpoints
Screen resolutions and the 320/360 devide mishap.
483
Reposted by Matthias Zöchling
Matthias Ott @matthiasott.com · 09/02/2026
✍️ New article: Webspace Invaders 👾👾👾👾👾👾👾👾👾👾👾👾 matthiasott.com/articles/web...
matthiasott.com
Webspace Invaders · Matthias Ott
There’s something happening on the Web at the moment that almost feels like watching that old arcade game Space Invaders play out across our servers. Bots and scrapers marching in formation, attacking...
107131
Reposted by Matthias Zöchling
Kevin Powell @kevinpowell.co · 05/02/2026
corner-shape is one of those things where when you first see it, it's like "oh cool, I can make a scoop!" It's something new, which is fun, but it can be hard to think of good use cases. But, as @cassidoo.co looks at here, it's going to open up a lot of possibilities 🙂 cassidoo.co/post/css-cor...
cassidoo.co
Making interesting borders with CSS corner-shape
You can make cool beveled, rounded, notched, scooped, and elliptical borders with the new CSS corner-shape property!
4399
Reposted by Matthias Zöchling
Web Standards @web-standards.dev · 22/01/2026
Introducing the <geolocation> HTML element. Chrome 144 adds a declarative, click-to-share location control that reduces boilerplate and improves user intent signals, with origin trials showing fewer capture errors, better user flows, and recovery. #html #api developer.chrome.com/blog/geoloca...
Graphic with Chrome for Developers branding, a location permission dialog saying “permission.site wants to Know your location,” buttons “Allow while visiting the site” and “Allow this time,” and text “Introducing the  HTML element” with a “Use location” button.
143
Reposted by Matthias Zöchling
Una Kravets @una.im · 16/01/2026
You know that annoying experience on mobile websites where you need to find the little close button and can't swipe a menu closed? The solution is simpler than you think. With basic CSS scroll APIs, you can get built-in interruptible swipe gestures 🥳
927038
Matthias Zöchling @cssence.com · 16/01/2026
What a week! With the release of Firefox 147 Anchor Positioning became Baseline Newly Available, and thanks to @matuzo.at I learned that popovers have an implicit anchor. Sweet! matuzo.at/blog/2026/be... #CSS
matuzo.at
Better defaults for popovers - Manuel Matuzovic
I recently added a rule to my reset style sheet UA+ that I wanted to share with you.
071
Matthias Zöchling @cssence.com · 09/01/2026
If you don’t care about text-based web browsers (I can’t blame you), this article doubles as a list of all the cool stuff that got added to HTML.
000
Matthias Zöchling @cssence.com · 08/01/2026
Oof! That rabbit hole wasn’t even on my radar.
000
Matthias Zöchling @cssence.com · 08/01/2026
It’s 2026 and text-based web browsers still do not know how to handle (not so) recent additions to HTML. cssence.com/2026/text-ba... #HTML #WebDev
cssence.com
Text-based web browsers
How do they fare with (not so) recent additions to HTML?
100
Matthias Zöchling @cssence.com · 02/01/2026
Fully agree. > Nevertheless, CSS is awesome. —https://cssence.com/2024/hyphenation/
cssence.com
Hyphenation
Consistent browser behavior, but still hard to grasp.
010
Matthias Zöchling @cssence.com · 02/01/2026
Agreed. I just looked at caniuse, this is sadly still `display: float` territory. cssence.com/2023/drop-ca...
cssence.com
Drop caps with initial-letter
Do we still need floats to create a large first letter in a paragraph in 2023?
010
Matthias Zöchling @cssence.com · 02/01/2026
Having read cloudfour.com/thinks/justi... by @tylersticka.com et al., I learned about `hyphenate-limit-chars`, and in a nanosecond it jumped to the top of my list of #CSS properties that I’d like to see full support across browsers. (Sure, it can be progressively enhanced, but still.)
cloudfour.com
Justified Text: Better Than Expected?
Do new CSS properties make justified text with automatic hyphenation more viable?
352
Matthias Zöchling @cssence.com · 01/01/2026
Me: Style queries are a game changer! Also me: caniuse.com/css-containe... #CSS
caniuse.com
CSS Container Style Queries | Can I use... Support tables for HTML5, CSS3, etc
000
Matthias Zöchling @cssence.com · 22/12/2025
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
010