Select your Fruit!
They said we can customize select elements so let's have some fun...
I'd heard <select> is customizable now, but I didn't understand just how much until I saw this demo. The <select> opens a full Duck Hunt-style game with no JS! And because it's still just a native <select> under the hood, it's even keyboard accessible! Wild stuff. #CSS codepen.io/t_afif/pen/P...
10.03.2026 17:01
π 2
π 0
π¬ 0
π 0
How We Do Code Reviews at Cloud Four
If your team members dread the notification that theyβve been added as a reviewer on a pull request, I think the following guidelines can help.
How We Do Code Reviews at Cloud Four: "If your team members dread the notification that theyβve been added as a reviewer on a pull request, I think the following guidelines can help." cloudfour.com/thinks/how-w...
09.03.2026 17:01
π 2
π 0
π¬ 0
π 0
Smart Layouts - Ahmad Shadeed - CSS Day 2025
Today is the best time to start learning how to use modern CSS features to build truly responsive components. Responsive design doesnβt mean designing for the viewport anymore. There are many factorsβ¦
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...
06.03.2026 19:30
π 3
π 1
π¬ 0
π 0
You Know What? Just Donβt Split Words into Letters
This is an unplanned part two for Barriers from Links with ARIA. The title reflects my exasperation because this isnβt new, Iβve simply failed to be explicit about it over the last decade or so. Inβ¦
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-...
06.03.2026 18:03
π 6
π 4
π¬ 0
π 0
Sprites on the Web β’ Josh W. Comeau
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 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...
05.03.2026 18:02
π 2
π 0
π¬ 0
π 0
Breakpoints
Screen resolutions and the 320/360 devide mishap.
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...
04.03.2026 18:03
π 1
π 1
π¬ 0
π 0
Graph Theory using Modern CSS
A CSS-only implementation of a shortest path algorithm
Graph Theory using Modern #CSS: "A CSS-only implementation of a shortest path algorithm" css-tip.com/graph-theory/
03.03.2026 18:03
π 1
π 0
π¬ 0
π 0
x86CSS
x86CSS is a working CSS-only x86 CPU/emulator/computer. No JavaScript required!
"x86CSS is a working #CSS-only x86 CPU/emulator/computer. Yes, the *Cascading Style Sheets* CSS. No JavaScript required." lyra.horse/x86css/
02.03.2026 18:03
π 4
π 2
π¬ 0
π 0
A Dao of CSS - John Allsopp - CSS Day 2025
What if we stopped trying to control the webβand started working with it?
In this talk, I return to A Dao of Web Design, an essay I wrote 25 years ago, to look againβthis time through the lens ofβ¦
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...
27.02.2026 19:30
π 3
π 0
π¬ 0
π 0
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.
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
27.02.2026 18:03
π 3
π 1
π¬ 0
π 0
Hereβs how to instruct a LLM to reference the ARIA Authoring Practices Guide
The deck is a bit stacked, folks.
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...
26.02.2026 18:01
π 4
π 1
π¬ 0
π 0
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.
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...
25.02.2026 18:02
π 2
π 0
π¬ 0
π 0
Everything you never wanted to know about visually-hidden
The one where I attempt to answer a question
"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...
24.02.2026 18:03
π 3
π 0
π¬ 0
π 0
una.im | border-shape: the future of the non-rectangular web
Learn about new geometry capabilities with this game-changing experimental CSS feature.
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/
23.02.2026 18:02
π 1
π 0
π¬ 0
π 0
CSS properties that solve annoying problems
π CSS Demystified: https://thecascade.dev/courses/css-demystified/
βΉοΈ The more in-depth video on the button with fit-content: https://youtu.be/3ugXM3ZDUuE
β
Examples from this video:
-β¦
Today's lunch video is about #CSS properties that solve annoying problems. www.youtube.com/watch?v=dQ8_...
20.02.2026 19:30
π 4
π 1
π¬ 0
π 0
Wishcessibility - Nic Chan
No recycling was contaminated in the creation of this post.
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...
20.02.2026 18:04
π 0
π 0
π¬ 0
π 0
Scroll indicators on tables with background colours using animation-timeline
I have a table, with alternating rows having different background colors, and the table content overflows the container on the right. I want to have a shadow/indicator on the side of the table thatβ¦
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...
19.02.2026 18:02
π 0
π 0
π¬ 0
π 0
Approximating contrast-color() With Other CSS Features | CSS-Tricks
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?
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...
18.02.2026 18:01
π 3
π 0
π¬ 0
π 0
A Broken Heart
Or, getting a 100x speedup with one dumb line of code.
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...
17.02.2026 18:03
π 1
π 0
π¬ 0
π 0
Refactoring CSS - Ana Rodrigues - CSS Day 2025
In recent years, updates in CSS have given us many exciting possibilities for creating modern, dynamic web experiences. Yet, for many developers, the day-to-day reality often involves working withinβ¦
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...
13.02.2026 19:30
π 4
π 0
π¬ 0
π 0
The Too Early Breakpoint
An opinion on why we shouldn't switch to the smallest design too early.
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-...
13.02.2026 18:03
π 2
π 0
π¬ 0
π 0
Nice Select Β· February 3, 2026
Building a modern custom select with base-select.
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
12.02.2026 18:02
π 4
π 2
π¬ 0
π 0
V7: Typographic scales and technical pens
A flexible system for consistent stroke widths across type sizes
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...
10.02.2026 18:03
π 2
π 0
π¬ 0
π 0
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.
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...
09.02.2026 18:01
π 1
π 0
π¬ 0
π 0
Styling new HTML UI capabilities - Brecht De Ruyte - CSS Day 2025
We are getting spoiled with increased UI capabilities, partially thanks to the efforts from the W3C community group Open UI. One of those features is the customizable select. This new capability forβ¦
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...
06.02.2026 19:30
π 5
π 0
π¬ 0
π 0
Anchor Interpolated Morph (AIM) Β· January 23, 2026
Morphing overlay elements from dynamic places
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...
06.02.2026 18:04
π 0
π 0
π¬ 0
π 0
There is No Need to Trap Focus on a Dialog Element | CSS-Tricks
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β¦
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-...
05.02.2026 18:05
π 3
π 1
π¬ 0
π 1
Solving Shrinkwrap: New Experimental Technique
InΒ this article, IΒ present myΒ new technique for solving aΒ CSS problem that was deemed impossible β true shrinkwrapping ofΒ anΒ element with auto-wrapped content. ByΒ using anchor positioning andβ¦
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...
04.02.2026 18:03
π 2
π 0
π¬ 0
π 0