iiinova — where your digital self keeps evolving

Chris Coyier @chriscoyier.net · 28/09/2026

get ready web design-elopers.

The APPLE phone DUO has multiple SIDES. This means in CSS you can float the sides to either sides and have different content on those SIDES. These websites can also respond to finger touches.

4855

Chris Coyier @chriscoyier.net · 21/09/2026

This is such a weird thing you can do.

<h1 id="setMePlease"></h1>

<script data-some-value="foo">
const scriptData = document.currentscript.dataset;
setMeplease.textContent = scriptData.someValue;
</script>

This sets the h1 to "foo"

4523

Chris Coyier @chriscoyier.net · 16/09/2026

Definitely. It's in the Save Menu dropdown.

110

Chris Coyier @chriscoyier.net · 16/09/2026

I was hoping we could get <svg> output out of developer.apple.com/sf-symbols/ but it doesn't seem like it. It's got an SVG option but it only copies the file name (?!?!). Maybe just a beta bug.

190

Chris Coyier @chriscoyier.net · 15/09/2026

This GIF from @joshwcomeau.com's last email is mesmerizing. Here's the border-shape he made of that codepen.io/editor/joshw...

1849

Chris Coyier @chriscoyier.net · 10/09/2026

I've never seen this "Add to Preferred Sources" button like @flaviocopes.com has on posts. developers.google.com/search/docs/... Seems like a good idea?!

7201

Chris Coyier @chriscoyier.net · 25/08/2026

She was bluegrass when bluegrass wasn't cool, they said. But she was always cool. RIP Dolly.

0501

Chris Coyier @chriscoyier.net · 23/08/2026

I actually strive for perfect clarity with my color theme pickers. codepen.io/editor/chris...

2265174

Chris Coyier @chriscoyier.net · 23/08/2026

Life is amazing. You can order this thing, it’ll power like 1,700 jumping jacks, and come out just like that. #arbys #fitness

350

Chris Coyier @chriscoyier.net · 21/08/2026

Website I recently visited. No particular comment.

Photo of an old bar on a corner from across the street. Large red text covers the photo.

"With a long history of being a favorite neighborhood hangout. The Crystal Corner Bar offers some of the best music in town But the real attraction that draws a crowd every day of the week is the crowd itself. Everyone goes to the Crystal Corner Bar to have a great time!"

15531

Chris Coyier @chriscoyier.net · 20/08/2026

Yeah right on. Not the end of the world, but favicons show up under who-knows-what hostile situations, might as well force them to look good.

110

Chris Coyier @chriscoyier.net · 20/08/2026

This is why I was ranting the other day on @shoptalkshow.com about why favicons need to have a protective background so you get visiblity/contrast no matter what weird shit is happening in the browser UI.

diagram that shows a favicon on a weird green browser tab. The favicon has a white background and the icon is black, so there is contrast no matter what.

1303

Chris Coyier @chriscoyier.net · 12/08/2026

Pretty niche, but @codepen.io passes the ?query params from a Pen down to the preview, so you can access and use them inside of a Pen. Like a "timer" Pen that you can set with ?h=2&m=30 or the like.

2452

Chris Coyier @chriscoyier.net · 08/08/2026

Realizing backpacks have these strap things to attach them to luggage handles is a game changer.

Straps half way up the back of the backpack that slip over the handle. Two examples on different backpacks.

9590

Chris Coyier @chriscoyier.net · 01/08/2026

Which reminds me! Have you ever been like... damn I need like 1,000 divs right here in the middle of this HTML? In CodePen, you can just switch over to Pug (or Markdown, etc) with the `lang` attribute and do it. We call it "Inline Block Processing" blog.codepen.io/docs/pens/bl...

1100

Chris Coyier @chriscoyier.net · 01/08/2026

I still think this is a very cool demo. codepen.io/editor/chris... random()-ly positioned "stars" split into three groups via :nth-child() fanciness. Each group moves a different amount by just a single @keyframes mapped to a scroll-driven animation timeline. Not hard!

5513

Chris Coyier @chriscoyier.net · 30/07/2026

The fact that even _this_ is a no-JS situation in CSS is wild to me. master.dev/blog/masonry... That's how the original Masonry.js library animated to new positions. (Based on an idea I saw from @bram.us)

2354

Chris Coyier @chriscoyier.net · 29/07/2026

I think it's hilarious and awesome they have an `<mj-carousel>` element that works¹ in emails. codepen.io/editor/chris... ¹ ... in some email clients, and tries to do good fallbacks

2213

Chris Coyier @chriscoyier.net · 28/07/2026

Data dump from @deque.com's latest survey. www.deque.com/blog/new-rep... Feels like an awfully high number of people saying they actively prompt for accessible output.

- 96% of engineering leaders say they actively prompt for accessible output

Yet

- 96% of homepages have accessibility failures
- 60% of models fail *every& accessibility test

2204

Chris Coyier @chriscoyier.net · 28/07/2026

Hey ya'll — If you need to use the Classic Editor it's codepen.io/pen still. The Console in 2.0 is this button, or find it in the Omnibar, or Cmd-Opt-5.

150

Chris Coyier @chriscoyier.net · 28/07/2026

I got into the idea that conic-gradient() is pretty cool for drawing triangles. master.dev/blog/when-yo...

2695

Chris Coyier @chriscoyier.net · 23/07/2026

(sniffs the air) Is that a new homepage? codepen.io

Screenshot of the new CodePen 2.0 homepage. Says in large type "Code Online / Make Websites / Build Fast". The background has different panels of functionality spread out like a fan behind a colorful gradient.

89315

Chris Coyier @chriscoyier.net · 22/07/2026

background: conic-gradient( from 0 at 0 0, white, red ); kinda weirdly perfectly chill 3D look. codepen.io/editor/chris...

1572

Chris Coyier @chriscoyier.net · 21/07/2026

A bonus reason to have `alt` text is so when your images fail, it's funnier.

59614

Chris Coyier @chriscoyier.net · 12/07/2026

Vouri t-shirts are the absolute best. But there is precious little to tell you which way to put it on (tiny Vouri flag slightly on front side at bottom of shirt). So I color a little dot on the inside neck like I’m a toddler.

6290

Chris Coyier @chriscoyier.net · 18/06/2026

Oh snort that happened fast.

The little ⓘ icons showing up in Chrome because of interest invokers on some buttons.

7323

Chris Coyier @chriscoyier.net · 03/06/2026

This is quite niche, but, if you force a <table> into CSS grid, then use the new grid gap decorations for the lines, only the horizontal ones print?? codepen.io/editor/chris...

2171

Chris Coyier @chriscoyier.net · 07/05/2026

A browser plugin that just div:hover, div:hover * { transform: none; } to get all these claude sites to calm the hell down.

4473

Chris Coyier @chriscoyier.net · 05/05/2026

I did up a new talk! I'm calling it In-N-Out Animations, and covers animating elements in and out of view/existence. It's FREE to see tomorrow at @smashingconf.com's Meet Style Sheets event. smashingconf.com/meets-style-... See ya there or, be `display: none;` or... uh, a funny version of that.

2489

Chris Coyier @chriscoyier.net · 05/05/2026

`zoom` in CSS was so known to be unreliable for so long I don't think I ever really learned what it was supposed to do. But I think that's all fixed now and @stefanjudis.com's demo makes it super clear. Scales stuff while keeping the element in flow. www.stefanjudis.com/today-i-lear...

37413

Chris Coyier @chriscoyier.net · 27/04/2026

Browserslist works across Babel, PostCSS (preset-env), and Lightning CSS (on CodePen). I like it. One place to store browser support information, multiple tools use it.

0172

Chris Coyier @chriscoyier.net · 27/04/2026

Got this sweet DTF St. Louis commemorative cup from Target.

110

Chris Coyier @chriscoyier.net · 25/04/2026

who i believe is part of this species.

150

Chris Coyier @chriscoyier.net · 25/04/2026

finally secured some footage of my ancestors

180

Chris Coyier @chriscoyier.net · 22/04/2026

Claude keeps offering/making sure it will work on @codepen.io. Cool by me! They should know React works fine on CodePen also. Actually we should probably just work together, right? 🤙 Call me.

070

Chris Coyier @chriscoyier.net · 11/04/2026

Is the Tailscale loader a Conway's Game of Life "Glider" going by?

2231

Chris Coyier @chriscoyier.net · 07/04/2026

You've heard it over and over. But it's really astonishing(ly bad) what we're doing these days. 277 MB for the *text transcript* of a podcast. My browser nearly freezes.

New York Time article of the text transcript of a podcast with DevTools open showing 277 MB of downloaded files

89010

Chris Coyier @chriscoyier.net · 28/03/2026

Ghostty has `background-opacity` why don't YooOOOuUUUuu have `background-opacity` CSS?

window-padding-x = 20
window-padding-y = 20
background-opacity = 0.75
background-blur = true
background = #582884
keybind
= shift+enter=text:

2260

Chris Coyier @chriscoyier.net · 27/03/2026

There is "Real" Tailwind (v4) processing in the 2.0 editor. No more faking it. You can straight up look at the output and see what it's doing.

0326

Chris Coyier @chriscoyier.net · 26/03/2026

Godspeed! Small thing re: Feedbin integration 1) errors for me 2) two-way sync would be ideal (e.g. I favorite something, it's favorited there, read something, read there, sub/unsub, it's done there too)

110

Chris Coyier @chriscoyier.net · 18/03/2026

Vertical split? Like code on top and preview on bottom? We kinda force that on small enough screens, it was like that in the classic editor too. Was able to confirm Android browsers failing to select all on a real select all. Will log bug!

100

Chris Coyier @chriscoyier.net · 18/03/2026

You can just pluck one-off Web Awesome components to use as you please. See how easy:

15816

Chris Coyier @chriscoyier.net · 14/03/2026

Couple of reasons to put a width (and height!) on images.

29414

Chris Coyier @chriscoyier.net · 10/03/2026

The way our @codepen.io 2.0 editor deals with npm packages is pretty cool. 1. Detect package usage 2. Create/edit `package.json` file to reflect needed packages 3. Inject an `<script type="importmap">` into any HTML produced by compiler Here's using React in 53 seconds.

1476

Chris Coyier @chriscoyier.net · 07/03/2026

behold this Pinewood Derby car that *is* a Pinewood Derby.

514010

Chris Coyier @chriscoyier.net · 06/03/2026

Chrome: • Split view? Yes please. • Side tabs? Yes please. • ⌘-Shift-C to copy URL? Yes please. Easily the top three features I need from Arc. (Option-click for split view would be nice, tab spaces would be nice. Side tabs is a feature flag for now.)

5233

Chris Coyier @chriscoyier.net · 06/03/2026

Design trend noted by Steve McKinney: "pages in pages" iamsteve.me/notes/pages-...

apple.com page with an entire web page open in a modal-like layout

2100