I'm doing something absolutely ridiculous. 😂 I created a `RasterizedSvg` component that will render an SVG as though it was a raster image, letting us see the pixels if we scale it up. Left: original SVG Right: rasterized SVG

Wrapping up the week: CSS chaos attractors 🦋 Try it! css.graphics/chaos

Wow, I had no idea. You can already test Open-UI's proposed native menu elements in Chromium (enable "Experimental Web Platform features" flag in about://flags first). Full native menu bar support with just HTML code! Read the explainer: open-ui.org/components/m... Demo: jsbin.com/qorupiwivu/1...

Pixelmatch is cool: a tiny, fast pixel-level image comparison library 🖼️

GitHub - mapbox/pixelmatch: The smallest, simplest and fastest JavaScript pixel-level image comparison library

The smallest, simplest and fastest JavaScript pixel-level image comparison library - mapbox/pixelmatch

github.com

Made a #CSS black hole ⚫ css.graphics/luminet

You may not like it, but this is what peak localization looks like (Asterix: Mega Madness (PS1, 2001))

HTML reminder: if you're dealing with elements that shouldn't be accessible or reachable at all, the `inert` attribute helps out! https://developer.mozill...

When 1,500 divs collide: css.graphics/galaxy 💥

This article has been a great reference while learning about per-frame rendering optimization 🧑‍💻

The Web Animation Performance Tier List | Motion Magazine

Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.

motion.dev

Having fun with 3D CSS particles: css.graphics/cyclone 🌪️

Cloth physics in 3D CSS (no WebGL). Ported from three.js examples 👕 try it: css.graphics/cloth fork it: github.com/layoutit/css...

A field guide to the Chrome DevTools Performance panel. Joan León explains it with interactive figures: the colors, network request bars, flame chart depth and self time, the four LCP phases, CLS, and INP. #performance #devtools perf.reviews/profile...

To target multiple classes with the same prefix, you'd typically have to resort to brittle attribute selectors. To make things easier, CSS is getting a new selector: the “Class Prefix Selector” (`.foo-*`). Check brm.us/class-prefix... to get the details. (Browser Support: None 😛 — just resolved!)

The Future of CSS: Target Multiple Classes with the Class Prefix Selector

To target multiple classes that share the same prefix, you'd typically have to resort to brittle attribute selectors or add extra base classes to your markup. To make things easier, CSS is getting a n...

brm.us

🚀 I made a smol ~2kb syntax highlighter that uses the CSS `::highlight()` API. davatron5000.github.io/microlighter/

CSS Graphics #006: Solitaire win screen 🃏 Try it! css.graphics/solitaire

💡 CSS Tip! Using modern CSS, it is now easy to extract information from a responsive grid. You can get the number of columns, the number of rows, and item coordinates. css-tip.com/grid-informa... A handy code to save for (hopefully) the near future.

Google images now uses a masonry layout. Looks like they are using CSS grid with hundreds of columns & rows. Debug grid overlay looks like needlepoint

Div Shuffling... (CSS Only) Anyone who knows me knows how much I love playing with cards, and I've wanted to do something like this for a long time. ☺️ Live on @codepen.io: codepen.io/editor/amit_...

What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More Plus, how to style skeleton UIs, how to enable diagonal scrolling, how images can overflow themselves, and yet, still more. Basically, how to do a lot... https://css-tricks.com/whats-important-17/

What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing text-stroke, and More

Plus, how to style skeleton UIs, how to enable diagonal scrolling, how images can overflow themselves, and yet, still more. Basically, how to do a lot of really cool (CSS) stuff.

css-tricks.com

This is the most important video I've ever made. In this, I explore the negative and positive mental health effects of AI coding, with data and expert commentary. www.youtube.com/watch?v=iPUn...

The True Cost of AI Coding

YouTube video by Syntax

youtube.com

Many thanks to @frontendfocus.bsky.social for featuring the CSS pipes demo and PolyCSS in the latest issue🖖💚

I'm recreating ElectroPaint, a mythical screensaver from '90s SGI workstations. It features 3D CSS quads dancing in hypnotic rhythm 🕺 Try it: css.graphics/electropaint

New 3D CSS screensaver: Menger Sponge, ported from XScreenSaver. Try it: css.graphics/menger

My talk on pragmatic browser support at the @pixelpioneers.co conference is now live www.youtube.com/watch?v=uOtx... I talk about Baseline, polyfills, progressive enhancement, and cover a bunch of interesting web platform features along the way.

A Pragmatic Guide to Browser Support - Rachel Andrew - Pixel Pioneers 2026

YouTube video by Pixel Pioneers

youtube.com

#CSS scroll-axis-lock: none unhinged 2d scroll gesture freedom 🤘🏻 nerdy.dev/css-scroll-a...

Scroll Axis Lock

Go off the scroll rails with one CSS property

nerdy.dev

XScreenSaver is cool: an archive of three decades of open-source screensavers and graphic art. Pretty much the perfect test suite for PolyCSS!

GitHub - xscreensaver/xscreensaver: XScreensaver for Linux X11, Gnome, Plasma KDE, Wayland, and others (android, MacOS, and iOS). RPM and DEB Releases at the link below.

XScreensaver for Linux X11, Gnome, Plasma KDE, Wayland, and others (android, MacOS, and iOS). RPM and DEB Releases at the link below. - xscreensaver/xscreensaver

github.com

New CSS screensaver: 3D maze, ported from XScreenSaver. Try it! css.graphics/maze

🔥 The new “Gap Decorations” API allows us to add borders between grid rows/columns and Flexbox children. I spent some time playing around with it and it’s a lovely new feature. 😄 You can learn more on CSS Tricks:

Gap Decorations Are Now Available, Here’s What’s New | CSS-Tricks

Today, with CSS gap decorations fully supported in Chrome and Edge, starting with version 149, you can now very easily style gaps, and with a lot of control.

css-tricks.com

Up next on the 3D #CSS classic screensaver series: gears! ⚙️ try it: css.graphics/gears fork it: github.com/layoutit/css...

I'm recreating classic screensavers in 3D #CSS, without WebGL. First up: pipes! 🧪 try it: css.graphics/pipes fork it: github.com/layoutit/css...