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

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...

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/...

For my last blog post of 2025, let me end the year with something personal. 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

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.

CSS text-decoration-inset landed in Firefox 146! Here's how it works:

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/

💡 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?

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

#CSS quick tip: You can conditionally load a stylesheet based on feature detection. 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

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...

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.

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

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

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...

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%; }

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?

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.

#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...

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.

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

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

`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

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

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.

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 👉 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.

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

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.

Hashtag fake news

Still early days for the new #CSS `space-size` property, as no browser maker has started implementing it, but here’s what you need to know: cssence.com/2025/space-s... Begs the question, are you on Team Tabs or Team Spaces? #WebDev

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-na...

There's a good opportunity to support @oddbird.dev's CSSWG work on a sticky wicket of an issue with logical terms in shorthand properties. Looks like the solution could be a new at-rule for opting into logical shorthands. css-tricks.com/support-logi...

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. #CSS

Sure, @matuzo.at 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: matuzo.at/blog/2023/re... I’ve been using it in production many times, no downsides. Did anyone have issues with it? #CSS

I made a little tool to better visualize the effect of the new text-box property and also generate the code for you! css-tip.com/text-box/ #CSS

In case you are wondering why I’m relatively silent in 2025 (especially compared to last year), no reason. At the moment I’m still having “fun” with the Popover API, I’ve just filed a Firefox issue: cssence.com/2025/popover... #WebDev #PopoverAPI #Firefox

At #FFConf I talked about Accessibility & AI: the good, the bad, and the bollocks, and the video is now available here: www.youtube.com/watch?v=Ij-G... #AI #accessibility #a11y

Last week, @adactio.com tagged me to take part in the Blog Questions Challenge … well, not me per se, but all of us. cssence.com/2025/blog-qu... #Blog #WebDev

And that’s a wrap. Sorry about masquerading my year in review as an Advent Calendar. Happy Holidays, and see you all in 2025. cssence.com/2024/advent-...

#CSSence #AdventCalendar Day 24 A CodePen that may contain traces of Media Queries Level 5 completes the calendar. »Media Queries Test Page« cssence.com/2024/media-q... #CSS #MediaQueries