Skip to main content

Chris Coyier

Founder, writer, designer, spam-deleter, email personality

Article

Unprefixed `appearance `

It’s interesting how third-parties are sometimes super involved in pushing browser things forward. One big story there was how Bloomberg hired Igalia to implement CSS grid across the browsers.

Here’s another story of Bocoup doing that, this time for the appearance property. The story is told in a Twitter thread, but the thread is broken somehow (looks like a deleted Tweet), so your best bet is to go to this one, then scroll up and down to see … Read article “Unprefixed `appearance `”

Link

CSS fix for 100vh in mobile WebKit

Article

Comparing Social Media Outlets for Developer Tips

As a little experiment, I shared a development tip on three different social networks. I also tried to post it in a format that was most suitable for that particular social network:

How did each of them “do”? Let’s take a look. But bear in mind… this ain’t scientific. This is just me … Read article “Comparing Social Media Outlets for Developer Tips”

Link

WTF is a Static API

Article

Notion-Powered Websites

I’m a big fan of Notion, as you likely know from previous coverage and recent video. It’s always interesting to see what other people do with Notion, and even how Notion uses Notion.

I’d say most usage of Notion is private and internal, but any page on Notion can be totally public with the flip of a switch. We do that with some stuff like our post ideas page and here’s a simple camping checklist I made … Read article “Notion-Powered Websites”

Article

Equal Width Columns in CSS Grid are Kinda Weird

Everything is flexible these days. If you write grid-template-columns: 200px 200px 200px;, sure, you’d have equal-width columns, but that’s a rare day. What you usually mean is three columns of equal fluid width.

We’ve got fractional units for that, like grid-template-columns: 1fr 1fr fr;. That’s usually fine, but they aren’t very sturdy like pixels. A large bit of media (or something like a <pre>, or long bit of text like a URL) can cause those columns … Read article “Equal Width Columns in CSS Grid are Kinda Weird”

Link

Pseudo-elements in the Web Animations API

Video

#186: Notion for Web Development Teams

I’m a big fan of Notion, particularly for keeping teams in sync. I work on teams of developers, and I find it works particularly well for that. If I had to sum it up really quickly, I’d tell Notion is for collaborative documents. But that undersells it.

Sign Up for Notion

In this video, I take my time explaining what Notion is and how I use it so that you can really understand it. This is the first a … Read article “#186: Notion for Web Development Teams”

Video

#185: Playing with CSS Masks

Masking in CSS is one way to hide parts of the element and show others. Another is clip-path, but let’s not focus on that today. “Masks are images; Clips are paths” is one way to think about the difference, although it certainly gets confusing.

In this video, we’ll look at how similar mask and its mask-* properties are really similar to the background and background-* properties. And they can be used together nicely, sinces a mask is a … Read article “#185: Playing with CSS Masks”

Article

React Single File Components Are Here

Shawn Wang is talking about RedwoodJS here:

…  it is the first time React components are being expressed in a single file format with explicit conventions.

Which is the RedwoodJS idea of Cells. To me, it feels like a slightly cleaner version of how Apollo wants you to do it with useQuery. Shawn makes that same connection and I know RedwoodJS uses Apollo, so I’m thinking it’s some nice semantic sugar.

There is a lot of cool stuff … Read article “React Single File Components Are Here”