Today's lunch video is "Smart Layouts" - "In this talk, I’ll walk you through my process of building smarter layouts that are aware of their surroundings and context, in the hope of inspiring you to take the next step and use modern #CSS in your workflow." www.youtube.com/watch?v=_njU...
You Know What? Just Don’t Split Words into Letters: "If you need to split words into their constituent letters to adjust kerning, apply gradients, animate them, or whatever, find another method, because screen readers will present the words letter by letter." #a11y adrianroselli.com/2026/02/you-...
Sprites on the Web: "In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web these days. Which is a shame, because we can do some pretty cool stuff with sprites!" #CSS www.joshwcomeau.com/animation/sp...
Breakpoints: "The problem is, there is no agreed-upon minimum resolution. Talking about 360px being some kind of 'minimum' when it comes to #CSS pixels means we only take the phone’s default accessibility settings into account." cssence.com/2026/breakpo...
Graph Theory using Modern #CSS: "A CSS-only implementation of a shortest path algorithm" css-tip.com/graph-theory/
"x86CSS is a working #CSS-only x86 CPU/emulator/computer. Yes, the *Cascading Style Sheets* CSS. No JavaScript required." lyra.horse/x86css/
Today's lunch video is "A Dao of #CSS" - "CSS isn’t broken or lacking—it’s deeply misunderstood. It’s not a language of force. It suggests, it yields, it adapts. The cascade, inheritance, and layout are not problems to overcome, but patterns to follow." www.youtube.com/watch?v=-iV1...
Modern #CSS Code Snippets: "A collection of modern CSS code snippets. Every old CSS hack next to its clean, native replacement, side by side." modern-css.com
Here’s how to instruct a LLM to reference the ARIA Authoring Practices Guide: "The APG was not created as a pattern library, design system, or single source of truth for the right way to make something. Unfortunately, a lot of people treat it this way." #a11y #ai ericwbailey.website/published/he...
Building Fluid Typographic Scales with clamp() and :heading(): "Learn how to create fluid typographic scales using clamp() for responsive typography that adapts smoothly across all screen sizes, building on the :heading pseudo-class." #CSS www.alwaystwisted.com/articles/bui...
"Is there still any point to most styles in visually hidden classes in ’26? The question wriggled its way into my brain. I felt compelled to investigate the whole ordeal. If you enjoy more questions than answers, buckle up!" #a11y dbushell.com/2026/02/20/v...
border-shape: the future of the non-rectangular web: "Unlike clip-path, which masks an element, border-shape redefines the “box” itself. When you apply a shape to a border, the background, the border-image, focus outline, and the box-shadow all follow that new geometry." #CSS una.im/border-shape/
Today's lunch video is about #CSS properties that solve annoying problems. www.youtube.com/watch?v=dQ8_...
Wishcessibility: "Accessibility is really similar to recycling. They're both net positives for the world, so folks want to try their best, even if it requires a bunch of work they're not prepared for. This leads to a problem that I will call ‘wishcessibility.‘" #a11y www.nicchan.me/blog/wishces...
Scroll indicators on tables with background colours using animation-timeline: "I have a table, with alternating row colors, and the content overflows on the right. I want to have a shadow/indicator on the side of the table that is overflowing the container." #CSS benfrain.com/scroll-indic...
Approximating contrast-color() With Other #CSS Features: "The new contrast-color() function is not fully supported yet. But can we still implement it in a cross-browser friendly way using other new CSS features?" css-tricks.com/approximatin...
A Broken Heart, or, getting a 100x speedup with one dumb line of code. “You always know it’s a good bug when your first reaction is, ‘How could this even happen?’” #emoji #performance allenpike.com/2026/a-broke...
The #CSS Selection: "The CSS Selection shows real-world CSS usage from over 100,000 websites and looks at the most important metrics." www.projectwallace.com/the-css-sele...
Today's lunch video is "Refactoring #CSS" - "Practical strategies for maintaining and modernising legacy CSS. Is refactoring an option? What are the pros and cons? How do we approach stakeholders? How do we prioritise changes, measure improvements and quick wins?" www.youtube.com/watch?v=Iufu...
The Too Early Breakpoint: "When I resize the viewport, the design instantly switches to the mobile design. While that sounds that the person who built this cares about responsive web design, it implies that they don’t care that much about the details." ishadeed.com/article/too-...
Nice Select: "This select component shows what's possible when we combine modern #CSS with progressive enhancement. appearance: base-select provides the foundation, while anchor positioning, scroll-state, and entrance animations create a polished, accessible experience." nerdy.dev/nice-select
#CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions: "Prescriptive class name conventions are no longer enough to keep CSS maintainable. Can the new @scope rule give devs the confidence to write CSS that keeps up with modern front ends?" www.smashingmagazine.com/2026/02/css-...
Typographic scales and technical pens: "A flexible system for consistent stroke widths across type sizes. I want my site to look like it was drawn with two technical pens, a standard one with a thinner stroke and a more emphatic one with a thicker stroke." #CSS v7.robweychert.com/blog/2026/01...
Getting Your Article Shared: Tips from Ten Years of Newsletter Curation: "Some tips to make it easier to get your article shared in newsletters and social media, such as OG tags, a good sharing image, and some gotchas to watch out for." cloudfour.com/thinks/getti...
Styling new #HTML UI capabilities: "This presentation is a love letter to new UI capabilities, and #CSS, showing you how to combine features such as anchoring, transitioning, scroll snapping, and more to create fun, progressively enhanced, customized select elements." www.youtube.com/watch?v=SsBC...
Anchor Interpolated Morph (AIM): "Go forth and make more natural transitions that feel spatially contextual. Stop letting your elements 'teleport' into view, start letting them grow, stretch, and evolve directly from the components that triggered them." #CSS nerdy.dev/anchor-inter...
There is No Need to Trap Focus on a Dialog Element: "Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the <dialog> (even in modal mode)." #a11y css-tricks.com/there-is-no-...
Solving Shrinkwrap: New Experimental Technique: "By using anchor positioning and scroll-driven animations, we can adjust our element’s outer dimensions by measuring its inner contents… For many cases this can already work and might unlock a future native feature." #CSS kizu.dev/shrinkwrap-s...
Drawing Connections with #CSS Anchor Positioning: "Every now and then, CSS gets a new feature that makes you pause and go: wait… we can do that now? The idea is deceptively simple: let one element position itself relative to another, without JS or wrapper elements." rolandfranke.nl/frontend-sto...
When will #CSS Grid Lanes arrive? How long until we can use it? "Anytime an exciting new web technology starts to land in browsers, developers want to know 'when in the world am I going to be able to use this?'" webkit.org/blog/17758/w...
