CodePen

Chris’ Corner: Lovingly Esoteric CSS

Chris Coyier |
Can you reason out the difference between a selector doing :has(:not) vs :not(:has)? Kilian Valkhof wrote up that post I just linked to. I like how he teaches the way to think it out is to write out all the implied selectors at work. For instance: is really: The latter becomes a lot more clear […]... read more

Chris’ Corner: Type

Chris Coyier |
Have you seen Kiel Danger Mutschelknaus’ Space Type Generator? This thing is absolute monster of amazing text-on<canvas> effects. Bought a coffee for this beautiful bit of work for sure. The effect you see when landing on that homepage is extremely cool. Playing around with the sliders and pre... read more

Chris’ Corner: Two Liners

Chris Coyier |
The real reason that fancy modern CSS is exciting is because of what we can now actually do in CSS. I remember one of my favorite dudes Hakim El Hattab made a thing called “Progress Nav” ten years ago. The idea is a Table of Contents component that could tell where you are scrolled in […]... read more

Chris’ Corner: Type

Chris Coyier |
Jake Archibald writes that we should just not use footnotes on the web. Not use footnotes?! I love a good footnote. Or at least, I thought I did. It’s where you can stick some information that provides a bit of extra context, but would be distracting if smashed into the main text. They can even […]... read more

Chris’ Corner: Freshly-Fallen CSS

Chris Coyier |
First corner of the new year, so, ya know: ✺◟(^∇^)◞✺ I feel like we should do CSS for this one. It’s easily my favorite technology thing and basically BFFs with the spirit of CodePen. In brand-spanking-new news (gnu neues?) the whole “masonry” saga is starting to come to a close. The naming is (drum... read more

Chris’ Corner: Cloud Four

Chris Coyier |
This is an appreciation post for the Cloud Four Blog. It’s one of those must-subscribes. I find myself adding almost every post they put out to my archive of posts to dig into. So since I’m overflowing with them a bit, and there is a hot-off-the-presses one, I figured I’d share that and a bunch […]... read more

Chris’ Corner: HTML

Chris Coyier |
There’s a new term in town: soft navigations. Basically it means “single page app” (SPA) style navigations where page stuff changes, and the URL changes, but the browser didn’t do a traditional full-reload thing. I like the term in the sense that it sounds like a light insult. Whattaya too weak, chi... read more

Chris’ Corner: Web Components

Chris Coyier |
I’d never heard of a CEM before. That’s a “Custom Elements Manifest” or a custom-elements.json file in your project. It’s basically generated documentation about all the web components your project has. Dave calls them the killer feature of web components. With a Custom Element Manifest, community p... read more

Chris’ Corner: Kagi Blog Typography

Chris Coyier |
I’ve been using Kagi for search for the last many months. I just like the really clean search results. Google search results feel all junked up with ads and credit-bereft AI sludge, like the incentives to provide a useful experience have been overpowered by milking profit and a corporate mandates on... read more

417: Iframe Allow Attribute Saga

Chris Coyier |
There was a day not long ago where a Google Chrome browser update left any page with a CodePen Embed on it throwing a whole big pile of red JavaScript errors in the console. Not ideal, obviously. The change was related to how the browser handles allow attributes on iframes (i.e. <iframe allow="..... read more