Articles by

Chris Coyier

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

Lessons with Media Queries

Direct Link

Sam Collins with a big writeup on his experience using media queries and comparing them against other mobile optimization techniques. There are lots of good practical tips to use inside your media queries like:

  • Remove all CSS and JavaScript animations

Implied Block

Jeff Starr tweeted a simple tip the other day:

If you’re floating an inline element, it’s treated as block, so no need to include “display: block;” in your stylesheet.

Indeed that is exactly what happens. The spec:

The values

Equal Height Blocks in Rows

A jQuery based solution for equalizing the heights of boxes across the horizontal row they are in. Different rows can have different heights. Originally by Stephen Akins.
(Updated on )

Ajax Load Container Contents

Use jQuery to replace a section of the page with that same section of the page from a different URL. The trick is to grab the contents of the section, not the section itself.

CSS properties that affect type rendering

Direct Link

Tim Brown reminds us that:

When it comes to type rendering on the web, there’s not much web designers can do.

He’s talking about literally how well type renders on the screen. There are a handful of properties that have …

Unmatched Style Site Review

Direct Link

My buddies at Unmatched Style reviewed this here very site. Make sure to check out the video at the top where Gene and I talk about some of the design decisions and behind the scenes tech. …

humans.txt

Direct Link

I kinda like this idea:

It’s a TXT file [at the root of your site] that contains information about the different people who have contributed to building the website.

A lot of websites should just have an about page where …

Native CSS Variables Closer To Reality

Direct Link

Tab Atkins Jr:

…the time until this starts showing up in nightly builds of Webkit is measurable in months.

and

…this is one of those things that you’ll have to wait a decade for before you can reliably use in

Animated Knockout Letters

I was watching some commercial the other day and they had these letters fly in over a black screen and reveal an image beneath them. It was a pretty cool looking effect and it reminded me how WebKit has that …

The Shadow DOM

Direct Link

You know the little blue knobby on WebKit range inputs? And all those fancy <video> controls? That stuff is all built with regular ol’ (styled) HTML elements, only they are behind a bit of a glass wall. You can see, …