CodePen

Chris’ Corner: Real World CSS

Chris Coyier |
I enjoyed Lee Robinson’s take on How I’m Writing CSS in 2024. Rather than jump right into tools and syntax, it starts with the user: Agreed! Number 3, and to some degree 4, are almost more in the JavaScript bucket than CSS, but it’s a good starter list. I’d add “The page styles shouldn’t interfere [... read more

Chris’ Corner: Cool Ideas

Chris Coyier |
Lossy compression can be good. For something like a JPG, that naturally uses compression that can be adjusted, that compression leads to lost image data. In a good way. The image may end up being much smaller, which is good for performance. Sometimes the lost image data just isn’t a big deal, you ba... read more

Chris’ Corner: Performance is Good for Brains

Chris Coyier |
I was darn impressed by Scott Jehl’s personal charge to bring back an idea known as “responsive video”. If you’ve seen the <picture> element, and how you can provide multiple <source>s with different @media queries allowing for only the best match to be shown, you already get it. It turn... read more

Chris’ Corner: Some AdviCSS

Chris Coyier |
Get it?! Like “advice”, but for CSS. When should you nest CSS? Scott Vandehey says: There’s a simple answer and a slightly more complicated answer. The simple answer is “avoid nesting.” The more practical, but also more complex answer is “nest pseudo-selectors, parent modifiers, media queries, and s... read more

Chris’ Corner: Scroll Driven Delight

Chris Coyier |
I’m pretty hot on Scroll-Driven Animations! What a wonderful idea that we can tie @keyframe animations timelines to scroll positions. And I’m sure the creators of it thought long and hard, because the API makes a ton of things possible. It’s not just “how far the entire page has scrolled”, although ... read more

Chris’ Corner: More Like Scalable Vector Goodness

Chris Coyier |
I’m going to do an SVG issue here, because I find that technology persistently interesting. It’s a bit of a superpower for front-end developers who know how it works and can leverage it when needed to pull of interesting effects. For example, this compelling line drawing scroll effect is powered by ... read more

Chris’ Corner: People Be Doing Web Components

Chris Coyier |
Native Web Components are still enjoying something of a moment lately. Lots of chatter, and a good amount of it positive. Other sentiment may be critical, but hopeful. Even more important, we’re seeing people actually use Web Components more and more. Like make them and share them proudly. Here are ... read more

Chris’ Corner: More Like Celebrating Style Skills

Chris Coyier |
It’s January and we’re seeing a little round of CSS wishlists make the rounds. Phew! That’s a lot of people taking the time to be pumped about CSS and make clear what they want. The way CSS is going lately I would not be surprised to see massive progress again in 2024. Stephanie Eckles points […]... read more

Chris’ Corner: Type

Chris Coyier |
I’m in the mood for a typography focused edition. I have some links saved up I’ve been meaning to read. I’m going to start reading now and the links that turn out any good I’ll put below. Mike Mai put together a Typography Manual (for type on the web). It’s a pretty random spattering of […]... read more

Chris’ Corner: Swinging For It

Chris Coyier |
New year, new local code editor? It’s maybe worth a peak at Zed, at least. They do a good job in the one-sentence pitch: Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter. All tech things have to be fast, so check. No shade either, speed is vital in all […]... read more