Inverted themes with light-dark() - "The goal was to make it so that when the browser switched from light/dark modes, themed elements would switch to their inverse theme. The trick I uncovered was setting the current theme as a #CSS variable." daverupert.com/2026/04/inve...

CSS or BS? Think you know CSS? Real property or made-up nonsense? 20 rounds. No mercy.

CSS or BS? "We show you a #CSS property name. You tell us if it's real or if we made it up. That's it. It starts easy. It does not stay easy. The CSS spec has over 600 properties. Some of them sound made up. Some of our fakes sound terrifyingly real. Good luck." www.keithcirkel.co.uk/css-or-bs/

Responsive Type Doesn’t Have To Be Complicated Miriam has spent a lot of time digging into the different approaches, the math involved, the user implications, and the ways modern CSS can help us out. There are equations and graphs! But you don’t…

Today's lunch video is "Responsive Type Doesn’t Have To Be Complicated" - "You don’t need anything complicated to build a type scale for your site. With the right units, we can get excellent results from a few lines of code without relying on third party tools." #CSS www.youtube.com/watch?v=B-r6...

There’s no need to include ‘navigation’ in your navigation labels Marking up navigation is pretty straightforward, but here’s a nice reminder on how the aria-label should be written.

There’s no need to include ‘navigation’ in your navigation labels: "Marking up navigation is pretty straightforward, but here’s a nice reminder on how the aria-label should be written." #a11y www.tempertemper.net/blog/theres-...

Making Complex CSS Shapes Using shape() | CSS-Tricks Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task…

Making Complex #CSS Shapes Using shape() - "Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task if we rely on modern features." css-tricks.com/complex-css-...

Sorry for the extra post, but my newsletter provider, Curated, seems to be falling apart and I'm considering switching. Anyone have recommendations for link-based newsletters?

What Is CSS Containment and How Can I Use It? – CSS Wizardry CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely.

What Is #CSS Containment and How Can I Use It? "CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely." csswizardry.com/2026/04/what...

CSS subgrid is super good The one where I code a simple but powerful grid layout

"#CSS subgrid is perfect for CMS content that is a giant blob of HTML. We centre the content wrapper for top-level prose to look presentable, then we break out complex patterns and use subgrid to align their contents back inside. It only takes a single class to start!" dbushell.com/2026/04/02/c...

CSS is DOOMed! Every wall, floor, barrel, and imp is a div — DOOM rendered entirely in CSS. Using 3D transforms, CSS math functions, @property, clip-path, anchor positioning, and SVG filters to build a fully…

CSS is DOOMed! "I built DOOM in CSS. Every wall, floor, barrel, and imp is a <div>, positioned in 3D space using CSS transforms. The game logic runs in JavaScript, but the rendering is entirely #CSS. You can play it right now." nielsleenheer.com/articles/202...

Level, Up your Scroll UX - Adam Argyle - CSS Day 2025 Slide by slide, CSS feature by feature, we'll incrementally enhance and craft a rad scroll experience. Normally a pain in the box; styling and managing scroll across touch, keyboard, mouse and more…

Today's lunch video is "Level, Up your Scroll UX" - "Styling and managing scroll across touch, keyboard, mouse and more can be daunting. Learn when to use what, and a whole bunch of niche details about #CSS and scrolling." www.youtube.com/watch?v=vPb7...

Experimenting With Scroll-Driven corner-shape Animations | CSS-Tricks The new CSS corner-shape() property is mathematical, so it’s easily animated. Author Daniel Schwarz pokes at animating the property for interesting UI effects.

Experimenting With Scroll-Driven corner-shape Animations: "The new #CSS corner-shape() property is mathematical, so it’s easily animated. Author Daniel Schwarz pokes at animating the property for interesting UI effects." css-tricks.com/experimentin...

When All You Can Do Is All or Nothing, Do Nothing – CSS Wizardry If your design system can only apply `loading=lazy` or `fetchpriority=high` blindly, it may be safer not to apply them at all.

When All You Can Do Is All or Nothing, Do Nothing: "If your design system can only apply `loading=lazy` or `fetchpriority=high` blindly, it may be safer not to apply them at all." #performance csswizardry.com/2026/03/when...

The Great CSS Expansion CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their…

The Great #CSS Expansion: "CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JS for. Here is how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out." blog.gitbutler.com/the-great-cs...

Two Circles, One Arrow, and Anchor Positioning Drawing an line with arrows pointing to the center of two arbitrary elements measuring and displaying the distance between them doesn't seem like it would be possible in CSS alone... but...

Two Circles, One Arrow, and Anchor Positioning: "Drawing an line with arrows pointing to the center of two arbitrary elements measuring and displaying the distance between them doesn't seem like it would be possible in #CSS alone… but…" frontendmasters.com/blog/two-cir...

Sneaky Header Blocker Trick • Josh W. Comeau There is a lil’ UI detail on this blog. Most people don’t even notice it, but the ones who do often reach out, asking how on earth it works. It feels like it defies the rules of CSS! In this blog…

Sneaky Header Blocker Trick: "When people notice it, they ask how on earth it works. It feels like it defies the rules of #CSS! I’ll break down the surprisingly-straightforward implementation so you can start using this trick yourself." www.joshwcomeau.com/css/header-b...

Is Sass Dead Yet? CSS Mixins and Functions - Miriam Suzanne - CSS Day 2025 Sass has inspired new developments in CSS for over a decade – from variables to nesting, and now author-defined CSS mixins and functions. As these features make the jump from Sass to CSS, they tend…

Today's lunch videos is "Is Sass Dead Yet? #CSS Mixins and Functions" - "What can we do with functions and mixins, how will they be different from Sass, and what other features might this open up in the future?" www.youtube.com/watch?v=IIvq...

Dropdowns Inside Scrollable Containers: Why They Break And How To Fix Them Properly — Smashing Magazine Dropdowns often work perfectly until they’re placed inside a scrollable panel, where they can get clipped, and half the menu disappears behind the container’s edge. Godstime Aburu explains why this…

Dropdowns Inside Scrollable Containers: Why They Break And How To Fix Them Properly #CSS www.smashingmagazine.com/2026/03/drop...

Modal vs. Separate Page: UX Decision Tree — Smashing Magazine How to choose between modals and pages, when to avoid modals, and how to determine the right level of interruption or navigation. Brought to you by Smart Interface Design Patterns, a **friendly video…

Modal vs. Separate Page: #UX Decision Tree: "How to choose between modals and pages, when to avoid modals, and how to determine the right level of interruption or navigation." www.smashingmagazine.com/2026/03/moda...

SVG favicons that respect theme preference | pawelgrzybek.com Less of guide about the favicons and more a bug report of Safari that at the moment ignores media query user preferences in SVG favicons.

SVG favicons that respect theme preference: "Less of guide about the favicons and more a bug report of Safari that at the moment ignores media query user preferences in #SVG favicons." pawelgrzybek.com/svg-favicons...

Building dynamic toggletips using anchored container queries Anchored container queries are only available in Chrome 143 upwards right now, but here’s Daniel Schwarz to show you how to use progressive enhancement to build up to using that new capability in the…

Building dynamic toggletips using anchored container queries: "With anchored container queries and other modern #CSS features like attr(), corner-shape, and interest invokers, we can use progressive enhancements to create some really awesome toggletips." piccalil.li/blog/buildin...

Flexbox Masonry Layout (Explained with Math) Flexbox has a very specific algorithm for determining how to deal with remaining (or lack of) space in a row. Let's use actual math to understand it then apply it to a masonry layout.

Flexbox Masonry Layout (Explained with Math): "Flexbox has a very specific algorithm for determining how to deal with remaining (or lack of) space in a row. Let's use actual math to understand it then apply it to a masonry layout." #CSS frontendmasters.com/blog/flexbox...

Little Dummies: Simple FPO Content Helpers with Tyler Sticka | 11ty Meetup Little Dummies: Simple FPO Content Helpers Eleventy is great for rapid prototyping! Tyler shows off a few of his favorite shortcodes, filters and other techniques to quickly populate interactive…

Today's lunch video is "Little Dummies: Simple FPO Content Helpers" - "Eleventy is great for rapid prototyping! Here are my favorite shortcodes, filters and other techniques to quickly populate interactive mockups and wireframes with 'dummy' placeholder content." www.youtube.com/watch?v=NHgi...

The Enforced Accessibility of the Geolocation Element It's a strange situation where some CSS is disallowed, some is allowed but breaks the button, and some is capped.

The Enforced Accessibility of the Geolocation Element: "It enforces a variety of accessibility requirements quite strictly. I’m not sure if we’ve had an element in HTML that behaves quite like this before." #a11y frontendmasters.com/blog/the-enf...

Un-Sass'ing My CSS: Colour Functions Without Sass Always Twisted A practical guide to replacing Sass color functions like lighten(), darken(), and tint() with modern CSS using color-mix() and relative color syntax.

Un-Sass'ing My #CSS: Colour Functions Without Sass: "A practical guide to replacing Sass color functions like lighten(), darken(), and tint() with modern CSS using color-mix() and relative color syntax." www.alwaystwisted.com/articles/UnS...

una.im | contrast-color() beyond black & white Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes.

#CSS contrast-color() beyond black & white: "Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes." una.im/advanced-con...

The Big Gotcha of Anchor Positioning As it stands, you have to think about the layout engine and whether an element is

The Big Gotcha of Anchor Positioning: "I thought that one of the benefits of #CSS Anchor Positioning is you can position elements relative to others regardless of where they are in the DOM. But no, you can’t. There are limitations which feel inscrutable at first." frontendmasters.com/blog/the-big...

Abusing Customizable Selects | CSS-Tricks Let’s go over a few demos using the new customizable <select> feature that may be wild, but also give us a great chance to learn new things in CSS.

Abusing Customizable Selects: "Let’s go over a few demos using the new customizable `<select>` feature that may be wild, but also give us a great chance to learn new things in #CSS." css-tricks.com/abusing-cust...

Building a Computer with CSS - Amit Sheen - CSS Day 2025 Ever wondered how a computer actually works? What a CPU is actually built of? And if it's possible to build one using only CSS? If so, this talk is for you. We’ll break down the fundamentals of a…

Today's lunch video is "Building a Computer with #CSS" - "Ever wondered how a computer actually works? What a CPU is actually built of? And if it's possible to build one using only CSS? If so, this talk is for you." www.youtube.com/watch?v=PFqt...

AI will Eliminate the Need for Accessibility Professionals? I think not. A robotic hand puts a note saying “You’re fired” into a human hand Every day, there are more articles about AI replacing people in tech. Accessibility...

AI will Eliminate the Need for Accessibility Professionals? I think not. "Let AI handle mechanical checks and grunt work. But can it replace humans who understand the nuanced reality of disability? Don't say you weren’t warned when your next lawsuit arrives." #a11y buttondown.com/access-abili...

Why we teach our students progressive enhancement | Blog Cyd Stumpel With new CSS features seemingly coming out every week, I’ve been doing more and more progressive enhancement (PE) in my projects. It’s also a big part of what we teach our students at the Associate…

Why we teach our students progressive enhancement: "A famous example of PE is when an escalator breaks down it can still be used as stairs, which satisfies its core task. Progressive enhancement isn't about preventing failure, it’s about defining what must always work." cydstumpel.nl/why-we-teach...