The actual archive, every post ever written on CSSence.com.
Matthias Zöchling wrote on August 5, 2026 at 06:53 Nifty! @supports at-rule(@supports) { /* ✅ The browser supports `@supports at-rule(…)` */ } As seen in “Detect at-rule support in CSS with @supports at-rule(@keyword) ” by @bram.us Nicolas Chevobbe wrote on August 5, 2026 at 07:46 In reply to: @CSSence@mas.to . eh, this was just sent “Intent to Prototype: CSS at-rule() function for @supports”
Sebastian Hädrich wrote on July 25, 2026 at 02:29 Is there a way to indicate “[sic]” to a #screenreader without it reading the brackets verbatim? Matthias Zöchling wrote on July 25, 2026 at 05:09 In reply to: @shaedrich@mastodon.online . I wouldn’t worry about it: 🔗 “Don’t Override Screen Reader Pronunciation”
Next week would have been be my fifteenth Twitter anniversary, but that ain’t gonna happen, and it’s anyhow not a thing. For two reasons: Someone renamed Twitter, but more importantly, I deactivated my account 30 days ago, meaning the grace period is over and the account is gone. No big deal, I replaced it with Mastodon in 2022 and after an unnecessary course correction I stopped tweeting in 2024.…
I’ve traveled to Graz to for once *not* speak at the Frontend Graz meetup, and instead be a regular attendee who can simply enjoy the show. By the way, this was the tenth edition, because we include the times when it was still called CSS-in-Graz. Train delays and extreme heat cannot take away from the fact that it was once again a great experience. Talks & Speakers “Fighting Hardware Obsolescence…
Matthias Zöchling wrote on June 13, 2026 at 13:02 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 🔗 “Speed is Not Conducive to Wisdom” Jan Dittrich wrote on June 13, 2026 at 14:48 In reply to: @CSSence@mas.to . there is a great book, “moral mazes”, on raising in corporate hierarchies,…
Matthias Zöchling wrote on June 5, 2026 at 08:13 🚀 New article on gap decorations (coming soon) in CSS. I have a small obsession with clean layout lines, and this is the first time it feels easy to draw them without polluting the markup. Goes through the new properties, a playground, and some experiments… 👾 🔗 “CSS is filling the gaps with rules” Great article by @utilitybend@front-end.social on…
This is the third blog post of my Tales from the hospital miniseries. I wrote about edge cases in web design that I encountered between surgeries. Breakpoints Breaking points Breaking bad Contrary to my earlier hospital encounters this year, my third visit was planned. As are most site designs not an accident, someone did put in the effort. Which makes one thing even more worrisome: There being so…
Manuel Matuzović wrote on June 2, 2026 at 06:51 I should probably do a 2026 update of my HTML boilerplate post. I just need to figure out what changed in the past 5 years. Matthias Zöchling wrote on June 2, 2026 at 07:51 In reply to: @matuzo@front-end.social . Please do. Looking forward to the cutting the mustard part. @gray17@mastodon.social wrote on June 2, 2026 at 14:58 In reply to:…
@piccalil.li wrote on April 23, 2026 at 12:03 Mat Marquis has waited 14 years to write this article. The sizes attribute has been a necessary evil but now, with an auto value capability, it’s completely transformed authoring responsive images on the web. 🔗 “The end of responsive images” by @wil.to. Matthias Zöchling wrote on April 23, 2026 at 14:07 In reply to: @piccalil.li . Is there a place…
Matthias Zöchling wrote on April 14, 2026 at 09:00 Most of your screen time isn’t leisure. It isn’t addiction. It isn’t even a choice. It’s maintenance. 🔗 »The last quiet thing« by @tg@indieweb.social.
Sara Joy wrote on April 13, 2026 at 09:36 Quick front end question: How often have you seen elaborate mid-sentence CSS flex and gap or padding styling within React apps, when all that’s missing is what I’m calling a “React space”: {' '} ? Matthias Zöchling wrote on April 13, 2026 at 09:56 In reply to: @sjoy.lol . My answer is “not yet”, and I’d hope so is yours, but I guess there’s a reason the…
While I knew that Unicode has Variation Selectors (VS), I had no idea that CSS has a font-variant-emoji property. So it was time to connect the dots. A variation selector is a Unicode code point that, when placed immediately after another character, signals a specific presentation preference to the renderer. Variation selectors produce no visible output of their own — they are invisible modifiers.…
I dedided to stay in glass territory: After last year’s use of the two Hourglass emojis I’m moving on to sunglasses . We all know that the smiling face with sunglasses 😎 exists in Unicode, but what about creating it manually? Putting 🕶️ on 🙂 should take us there. After finishing the initial animation, I realized I could throw in another one, so I made the smiley squint while the glasses are…
Matthias Zöchling wrote on April 9, 2026 at 07:22 So long stylesheets, see you again tomorrow. Happy #CSSNakedDay! Tamás Dohány wrote on April 9, 2026 at 14:44 In reply to: @CSSence@mas.to . +1
Alex Trost wrote on March 4, 2026 at 14:56 Can we all agree that this named CSS color is a poor representation of the color brown? More like a BrickRed than a Brown. Chris Coyier wrote on March 4, 2026 at 15:08 In reply to: @trost.codes . all this shittalk while the great tragedy still looms. Matthias Zöchling wrote on March 4, 2026 at 15:47 In reply to: @chriscoyier.net . There’s a typo on the…
When I write a blog post on this site, the workflow to get it live is quite simple: I commit the post on my main branch—aptly named “main”—and push it to GitHub. At this point Netlify takes over and publishes it. Then I let people on the social networks know that I wrote a thing. It’s quite likely that I get some comments this way, those then also become part of the blog post. To get the comments…
@mayank.co wrote on February 27, 2026 at 02:01 this year i'm going to write at least one print stylesheet 🖨️ (i've never written one before!) Matthias Zöchling wrote on February 27, 2026 at 05:27 In reply to: @mayank.co . That reminds me, my Print First movement never took off. 🫣
This is the second blog post of my Tales from the hospital miniseries. I wrote about edge cases in web design that I encountered between surgeries. Breakpoints Breaking points Breaking bad For the first couple of weeks I refused to join the hospital Wi-Fi, instead I relied on my phone’s data plan. The problem is, there are thousands of patients and personnel all connecting to the same set of…
Matthias Zöchling wrote on February 24, 2026 at 08:05 First order of business: Read »Continvoucly Morged Value« by @matthiasott.com. The care is the work. The care creates the value. AI doesn’t care. AI is just another tool.
This is the first blog post of my Tales from the hospital miniseries. I wrote about edge cases in web design that I encountered between surgeries. Breakpoints Breaking points Breaking bad The ambulance took me to the hospital. When it became clear that I wouldn’t be leaving anytime soon, I realized that I didn’t have my reading glasses with me. So to be able to read comfortably on my mobile phone,…
Matthias Zöchling wrote on January 16, 2026 at 18:44 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! 🔗 “Better defaults for popovers”
Manuel Matuzović wrote on January 14, 2026 at 12:55 Which cool (new) thing in CSS did you discover recently that I should check out, too? Matthias Zöchling wrote on January 14, 2026 at 13:05 In reply to: @matuzo@front-end.social . @page 😬 I’ll show myself out. Manuel Matuzović wrote on January 14, 2026 at 13:12 In reply to: @CSSence@mas.to . still TIL 😁 Matthias Zöchling wrote on January 14,…
Before I start, let me get two things out of the way: In this article I’m not going to include the admittedly cool browsh, because it only works by utilizing Firefox under the hood. When I say text-based, I’m talking about old-school browsers like ELinks , Lynx or w3m. These are also the three browsers I’ve used to test everything described below. Eventually I even looked into chawan. [1] The…
Matthias Zöchling wrote on January 2, 2026 at 12:24 Having read “Justified Text: Better Than Expected” 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 getting full support across browsers. (Sure, it can be progressively enhanced, but still.) Adam Kuhn wrote on January 2, 2026 at 13:48 In…
Matthias Zöchling wrote on January 1, 2026 at 10:28 Me: Style queries are a game changer! Also me: CanIUse CSS Container Style Queries?
Matthias Zöchling wrote on December 21, 2025 at 08:32 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. 🔗 A11Y considerations in math on the web Matthias Zöchling wrote on December 21, 2025 at 08:35 Continued from previous comment. But that’s not all: The author Manuel Sánchez has an #A11Y…
It’s no coincidence that my online identity starts with CSS: I get paid to make HTML look nice. But for many years now, web accessibility—or A11Y, if you are into numeronyms —plays an even bigger role. Is making the web more accessible rewarding? That too. But at the same time, it is demanding. And quite often exhausting. Over at work, I’ve been the web accessibility go-to guy for a long time. The…
Matthias Zöchling wrote on December 4, 2025 at 08:57 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? Tyler Sticka wrote on December 4, 2025 at 16:04 In reply to: @CSSence@mas.to . All three…
You probably know that the @charset declaration can only be placed at the very beginning of a stylesheet. We have a similar situation with @import , here’s what the MDN article on the ability to import a stylesheet from within another stylesheet has to say: An @import rule must be defined at the top of the stylesheet, before any other at-rule (except @charset and @layer ) and style declarations,…
Matthias Zöchling wrote on November 9, 2025 at 08:26 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: 🔗 “Fixing baselines” Initially I misinterpreted the title, I thought this was about Baseline browser compatibility (maybe that’s why I did a 😈 smile when I saw the pun in your post,…
New design coming soon? No, not on this site in the foreseeable future. I like my current way of doing incremental changes. … is what I wrote last year about this site’s design, only to start working on another redesign a couple of months later. Well, guess what, after working incrementally on it from February to May, I think I’m done. But now it’s November, and you still see the to-be-replaced…
I watched Kevin Powell go through five super useful CSS properties that don’t get enough attention. When he talked about isolation, I saw his use of open-quote and thought to myself: “This will cause problems down the line.” Seconds later Editing Kevin Powell (with headphones) chimed in to make an amendment on how to address the issue. In doing so he also made me aware that no-close-quote is a…
Kilian Valkhof wrote on October 2, 2025 at 13:54 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? Matthias Zöchling wrote on October 2, 2025 at 14:14 In…
Matthias Zöchling wrote on October 22, 2025 at 13:07 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: 🔗 “The CSS Reset, again” However, I didn’t get that far, because what Pawel wrote about box-sizing got me thinking. Matthias Zöchling wrote on October 22, 2025 at 13:07 Continued from previous…
Sorry about the title, I guess it won’t create an instant rapport with you, dear reader. But I find it fascinating to peruse MDN and encounter words like “snapport” , that surely make no sense to people outside of web development. But here we are, so I might as well add the definition: The snapport is the area of the scrollport that is used as the alignment container for the scroll snap areas when…
Matthias Zöchling wrote on October 12, 2025 at 17:07 Tired: html { overflow-y: scroll; } Wired: html { scrollbar-gutter: stable; } Nice little #CSS gem from @zachleat.com. 🔗 “A tiny bit-o-CSS for Stable Scrollbar Gutters” The feature detection is the cherry on top.
When I wrote about the six (eight) levels of dark mode , I briefly mentioned that the CSS color-scheme declaration can be set anywhere, not just on the root element. But until now I’ve never explained how this can be put to good use. Well, here I go. Two ways come to mind, limiting a color scheme to a particular area, and proper nesting. But first things first, do you agree that setting…
Kevin Powell wrote on October 2, 2025 at 13:54 Do you have any smaller/under-the-radar CSS sites/people that you follow? Looking for blogs, YouTube channels, or anyone who just shares cool CSS stuff. Reply if you know any, and look at the replies for new people/sites to follow 😊 Manuel Matuzović wrote on October 3, 2025 at 05:01 In reply to: @kevinpowell.co . Definitely @cssence.com and…
Scott Kellum wrote on July 29, 2025 at 15:29 The cheap and easy way to get a full-bleed background on an element: background-color: var(--background); box-shadow: 33vw 0 0 0 var(--background), -33vw 0 0 0 var(--background); Wenzel Massag wrote on July 29, 2025 at 16:27 In reply to: @scott@typetura.social . or use border. Scott Kellum wrote on July 29, 2025 at 16:41 In reply to:…
Last year I realized that the Camera emoji comes in two flavors. Well, brace yourselves, I found another pair: Hourglass Done, and Hourglass Not Done. Here’s what Emojipedia has to say about the former: A classic hourglass, all of its sand having flowed into the bottom bulb. Indicates time has passed. […] Not to be confused with Hourglass Not Done, [where the] sand is still flowing. When I put…
Matthias Zöchling wrote on June 30, 2025 at 05:56 I use Linux personally and Windows at work, but in both cases my previous OS used to be MacOS. Both laptops feature an en_US keyboard layout (BTW, getting them in Austria is a challenge), so to type accented characters, on Linux I compose keys like a caveman, and on Windows… don’t get me started on Windows. Having read “I Didn’t Know This: Typing…
Matthias Zöchling wrote on June 17, 2025 at 08:23 I just read “Can accessibility be whimsical?” by the extremely online @sarajw@front-end-social over on Good Internet Magazine (you should too), … Matthias Zöchling wrote on June 17, 2025 at 08:24 Continued from previous comment. … and by a chain of events I ended up realizing that she is not only running the CSS Joy webring, but also RSS Joy!…
I went to Graz with a talk named “CSS has come full circle” in my backpack, that I presented at the seventh CSS-in-Graz meetup. I was followed by other attendees and our host Manuel , who made up some inspiring impromptu talks on the spot. Usually I do a little coverage of the event, but it was overshadowed by current events [content warning: disturbing scenes]. Violence has no place in society.…
Matthias Zöchling wrote on May 27, 2025 at 16:19 Everything— everything —that comes out of these “AI” platforms is a “hallucination.” Spot on, @beep@follow.ethanmarcotte.com, as always. 🔗 “Hallucinating.” Matthias Zöchling wrote on May 27, 2025 at 16:27 Continued from previous comment. And if you are interested in an ever so thorough take on the subject of AI, I highly recommend this…
Inspired by a few lines of CSS from Adam Argyle, I forked his CodePen where he randomly added a color and a delay in HTML, to be then applied in CSS. In my fork I only used the idea of the random delay, which I too apply to a transition. But while he made dots appear, I make squares (basically large pixels) disappear, to reveal what’s underneath. Check out my CodePen to see the effect. And yes,…
Matthias Zöchling wrote on April 2, 2025 at 08:51 That’s what I call artificial malnutrition. Stunning work from @heydon@front-end.social: 🔗 “Poisoning Well” At the same time, it’s not a good sign when this is the level of creativity we need these days.
Ah, the size of space! No, not the great visualisation by Neal Agarwal. — Hubble telescope image (Source: NASA) In an ever-growing universe, I guess it’s tough for scientists to calculate how big space is, but that’s beside the point, because this article is dedicated to the new CSS space-size property, which finally gives us a way to tweak indentation when space characters instead of tabs are in…
Matthias Zöchling wrote on March 28, 2025 at 06:57 Really looking forward to this year’s #CSSNakedDay. In 2024 my site participated for the first time, and I did my homework, so here’s hoping that on April 9 things just work unsupervised. 🤞 How does your site look without style sheets? There’s still time to prepare. cssence.com/about/css-naked-day Sara Joy wrote on March 28, 2025 at 08:18 In…
Matthias Zöchling wrote on March 23, 2025 at 19:47 This one slipped under my radar: Providing alt text for pseudo-elements works in all browsers, eventually there’ll be no more need for a fallback: a::after { /* content: "↗"; 👋 */ content: "↗" / " (opens in new tab)"; } Safari caught up in early 2024, and Firefox not long after. — Screenshot from caniuse.com
Matthias Zöchling wrote on March 17, 2025 at 09:55 Sure, @matuzo@front-end.social is doing a lot of great work, but his discovery that the use of list-style-type: "" to remove indicators from lists keeps semantics is of utmost importance: 🔗 Removing list styles without affecting semantics I’ve been using it in production many times, no downsides. Did anyone have issues with it? Koos Looijesteijn…