Author: Chris Coyier

Chrome 83 Form Element Styles

There have been some aesthetic changes to what form elements look like as of Chrome 83. Anything with gradient colorization is gone (notably the extra-shiny stuff). The consistency across the board is nice, particularly between inputs and textareas. Not a big fan of the new styling, but I hear a lot of accessibility research went […]

Increment Issue 13: Frontend | CSS-Tricks

Increment is a beautiful quarterly magazine (print and web) published by Stripe “about how teams build and operate software systems at scale”. While there is always stuff about making websites in general, this issue is the first focused on front-end¹ development. I’ve got an article in there: When frontend means full stack. I’ll probably someday […]

The Fastest Google Fonts – CSS Wizardry – Web Performance Optimisation

19 May, 2020 Written by Harry Roberts on CSS Wizardry. Table of Contents Testing Default/Legacy font-display: swap; Async CSS preload preconnect Bonus: font-display: optional; Comparisons and Visualisations Findings Google Fonts Async Snippet For the most part, web fonts nowadays are faster than ever. With more standardised FOUT/FOIT behaviour from browser vendors, to the newer font-display […]

A “new direction” in the struggle against rightward scrolling

The other day I was building a responsive website with a navigation menu that slides into view from the left when you click the menu button. I was about to head off to the pub, but then I learned the menu was supposed to slide in from the right side instead. No big deal. With […]

CSS fix for 100vh in mobile WebKit

CSS fix for 100vh in mobile WebKit Not long ago there was some buzz around how WebKit handles 100vh in CSS, essentially ignoring the bottom edge of the browser viewport. Some have suggested avoid using 100vh, others have come up with different alternatives to work around the problem. In fact, this issue goes further back […]

Notion-Powered Websites | CSS-Tricks

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 […]

Recent Episodes of ShopTalk Show

There is a super cool new Podcast block for WordPress Gutenberg you use Jetpack (released in 8.5). I wanted to try it out, so below you’ll see recent episodes from ShopTalk Show. I’d tell you all about the recent episodes, except then this blog post wouldn’t age very well, because the point of this blog […]

Chromium lands Flexbox gap

Chromium lands Flexbox gap

Chromium’s CSS Flexbox and Multi-Column layout engines now support gap. grid-gap is old news. May 7, 2020 CSS Grid brought a delightful spacing feature called grid-gap, which quickly became a popular way to put space into layouts. It was easy to fall in love with because it took upon itself so much responsibility with such […]

I’m getting back to making videos

It’s probably one part coronavirus, one part new-fancy-video setup, and one part “hey this is good for CodePen too,” but I’ve been doing more videos lately. It’s nice to be back in the swing of that for a minute. There’s something fun about coming back to an old familiar workflow. Where do the videos get […]

Playing With (Fake) Container Queries With watched-box & resizeasaurus

Heydon’s is a damn fantastic tool. It’s a custom element that essentially does container queries by way of class names that get added to the box based on size breakpoints that are calculated with ResizeObserver. It’s like a cleaner version of what Philip was talking about a few years ago. I’m sure I’d be happy […]