Skip to main content

Chris Coyier

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

Article

The Browser Can Remember Edited Content

You can make the text inside any HTML element editable by adding the contenteditable attribute.

<div contenteditable>
  Hey, I'm like a textarea kinda now!
</div>

I wouldn't say there are wheelbarrows full of use-cases for that, but it's neat. One possible use might be an in-progress design in which editing the content from the design itself is useful either for you, or for someone else (a client?) who needs to change the text.

So, great, contenteditable. Now someone can … Read article

Article

What Does it Mean to Be “Full Stack”?

I was asked this recently by a fellow developer who was at the same web tech conference I was at. This developer had met a lot of new people who literally introduced themselves as full-stack developers sort of the way Bob Vance, Vance Refrigeration would on The Office, but it was Tony Frank, Full-Stack Developer instead.

I suspect the developer asking the question taken from the title of this post already knew the basic idea of what people mean … Read article

Article

The “Inside” Problem

So, you're working on a design. You need a full-width container element because the design has a background-color that goes from edge-to-edge horizontally. But the content inside doesn’t necessarily need to be edge-to-edge. You want to:

  1. Limit the width (for large screens)
  2. Pad the edges
  3. Center the content

It's "the inside problem" in web layout. It's not hard, it's just that there are lots of considerations. … Read article

Article

Footnotes That Work in RSS Readers

Feedbin is the RSS reader I'm using at the moment. I was reading one of Harry's blog posts on it the other day, and I noticed a nice little interactive touch right inside Feedbin. There was a button-looking element with the number one which, as it turned out, was a footnote. I hovered over it, and it revealed the note.… Read article

Link

Evergreen Googlebot

Article

Change Color of SVG on Hover

There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover, :active, :focus, class name change, etc. — is different.

Let's look at the ways.… Read article

Article

CSS-Tricks Chronicle XXXV

I like to do these little roundups of things going on with myself, this site, and the other sites that are part of the CSS-Tricks family. … Read article

Link

Getting To Know The MutationObserver API

Link

The Place of UX

Link

Split

icon-link icon-logo-star icon-search icon-star