Author: Chris Coyier

  • Home
  • Author: Chris Coyier

The Widening Responsibility for Front-End Developers

This is an extended version of my essay “When front-end means full-stack” which was published in the wonderful Increment magazine put out by Stripe. It’s also something of an evolution of a couple other of my essays, “The Great Divide” and “Ooops, I guess we’re full-stack developers now.” The moment I fell in love with […]
Read more

A tiny, permissive CSS selector parser – Lea Verou

I’ve posted before about my work for the Web Almanac this year. To make it easier to calculate the stats about CSS selectors, we looked to use an existing selector parser, but most were too big and/or had dependencies or didn’t account for all selectors we wanted to parse, and we’d need to write our […]
Read more

Optimizing CSS for faster page loads

Not long ago I decided to improve the loading times of my website. It already loads pretty fast, but I knew there was still room for improvement and one of them was CSS loading. I will walk you through the process and show you how you can improve your load times as well. Why loading […]
Read more

the new CSS property that boosts your rendering performance

Improve initial load time by skipping the rendering of offscreen content. Aug 5, 2020 The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance. content-visibility enables the user agent to skip an element’s rendering work, including layout and painting, until it is needed. […]
Read more

One Action, Multiple Terminal Windows Running Stuff

Many development environments require running things in a terminal window. npm run start, or whatever. I know my biggest project requires me to be running a big fancy Docker-based thing in one terminal, Ruby on Rails in another, and webpack in another. I’ve worked on other projects that require multiple terminal windows as well, and […]
Read more

Stroke Text CSS: 📕 The Definitive Guide

In this tutorial I will show you how to create the stroke text CSS effect. Before we go into the HTML and CSS code, if you only need to create a stroke text image, check out this tutorial and learn how to outline text in Photoshop. Or, if you don’t have Photoshop, you can use […]
Read more

Copy the Browser’s Native Focus Styles

Remy documented this the other day. Firefox supports a Highlight keyword and both Chrome and Safari support a -webkit-focus-ring-color keyword. So if you, for example, have removed focus from something and want to put it back in the same style as the browser default, or want to apply a focus style to an element when […]
Read more

Why you should hire a frontend developer

Every website has a frontend; it’s everything about the service a user will actually see. Because it’s what users interact with, the frontend has to be accessible, well-designed, intuitive for the user, and it has to perform well. What is frontend development? Frontend development is a specialism of software development. In simple terms, the frontend […]
Read more

Offering Options for mailto: and tel: Links

I generally like mailto: links. But I feel like I can smell a mailto: link without even inspecting or clicking it, like some kind of incredibly useless superpower. I know that if I’ve got my default mail client set, clicking that link will do what I want it to do, and if I want, I […]
Read more

The New CSS-Tricks Video Intro by dina Amin

You know we do video screencasts, right? It’s not, like, super regular, but I have done them for a long time, still like doing them, and plan to keep doing them. I publish them here, but you can subscribe over on YouTube as well. I’ve had a couple of different custom video intro animations over […]
Read more

That’s Just How I Scroll

How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that’s a pretty good indication. You might still have to scrapple with your client about “the fold” or whatever, but I don’t think anyone is confused at what a scrollbar is or what it indicates. But […]
Read more

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
X