Author: Chris Coyier

  • Home
  • Author: Chris Coyier

How to Italicize Text | CSS-Tricks

HTML and CSS offer us the ability to italicize text. I’m talking about text like this. Let’s cover everything you’ll need to know. What is italic text and why would you italicize text? You italicize text most often to call attention to it. Literally to emphasize a word, so that someone reading the sentence will […]
Read more

Bootstrap 5 alpha! | Bootstrap Blog

16 Jun 2020 Bootstrap 5’s very first alpha has arrived! We’ve been working hard for several months to refine the work we started in v4, and while we’re feeling great about our progress, there’s still even more to do. We’ve been focused on making the migration from v4 to v5 more approachable, but we’ve also […]
Read more

The Return of the 90s Web

In big cultural concepts like music or fashion, things have a way of coming around full circle. I’m pretty sure someday grunge will come back as a hot new sample, and at some point our kids might think frosted hair tips are totally cool. When I look at some of the trends on the web […]
Read more

Quick Tips for High Contrast Mode

May 26, 2020 Windows High Contrast Mode behavior can be a bit of a surprise if you haven’t already spent time studying its ways. Unlike other operating system display modes that invert colors or set a dark mode flag, Windows High Contrast Mode (WHCM) completely overrides authored colors with user-set colors. A mode like invert […]
Read more

Where Do You Learn HTML & CSS in 2020?

The question of how and where to learn HTML & CSS is a highly reasonable thing to ask. The answer depends on all sorts of things: how serious you are, your current foundation, what other resources are available to you, what you hope to do with what you learn, and how much time you have, […]
Read more

CUBE CSS – Piccalilli

If there’s one thing you can guarantee in tech, it’s that someone, somewhere, will declare that CSS isn’t up to the job of “big projects” and what will undoubtedly be recommended by those same people will be either a JavaScript-heavy approach or some sort of all-in utility class approach like Tailwind. There’s mostly nothing wrong […]
Read more

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

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

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

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

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

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

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 […]
Read more
X