Grow your CSS skills. Land your dream job.

Article Archives

Offscreen Magazine

Hey hey, looks who's in the amazing Issue 3.…

September 3, 2012

CSS :target for Off-Screen Designs

Matty Collins shows us how using the Checkbox Hack (or even :target in simple situations) we can create navigation heavy mobile UIs without any JavaScript.
September 3, 201212 comments

ShopTalk Episode 32

This week Dave and I were joined by Estelle Weyl where we talk about the practicalities of flexbox, getting clients to say yes, .mobi weirdness, and more. Thanks to Squarespace and Environments for Humans for sponsoring.…

August 31, 2012

Play Sound on Hover – Web Audio API Edition

The Web Audio API is a totally different beast than HTML5 audio elements. It provides lower level access to the sound system allowing for higher precision sound output. Notary Sojac explains it and provides a simple framework to make working with it easier.
August 31, 201228 comments

CSS-Tricks Chronicle II

The week in review, chronicle style.
August 30, 20128 comments

position: sticky;

For real. Eric Bidelman explains. It's non-standard (yet) but shipping in WebKit nightly and Canary.…

August 30, 2012

ShopTalk Episode 31

This week Dave and I were joined by Matt Mullenweg and we talk a bunch about WordPress, security, the culture of distraction, and more. Thanks to Harvest and Environments for Humans for sponsoring. …

August 30, 2012

Responsive Web Above The Fold

A guest post by Arley McBlain on using media queries to adjust for available vertical space.
August 28, 201253 comments

Responsive Retrofitting

  1. Go here and install bookmarklet
  2. Go to
  3. Resize browser very narrow and click bookmarklet

Pretty fun project by Ben Callahan. You can submit your own retrofittings through GitHub.…

August 28, 2012

Retina MacBook, Three Weeks In

I rationalized buying a new Retina MacBook Pro a few weeks ago by telling myself 1) it's my responsibility to stay on top of new things that affect the web 2) I want to make sure the redesign looks good …

August 27, 201290 comments

CSS-Tricks Chronicle I

I'm going to start a new style of blog post around here called CSS-Tricks Chronicle. It's going to be a (probably) weekly roundup of all the relevant happenings around the site and stuff I'm doing. Kind of a throwback …

August 23, 201219 comments

The innovations of Internet Explorer

While IE is the butt of half the web developer jokes ever written, it has been responsible for its fair share of web innovation over the years. Nicholas C. Zakas shares some of that, starting as far back as IE …

August 22, 2012

ShopTalk Episode 30 & New Design

This week Dave and I were joined by JavaScript avenger Rebecca Murphey where we talk a little #hotdrama followup, the future of JavaScript, GitHub etiquette, charging while learning, and more. And OH HEY there is a brand new design for …

August 21, 2012

CSS-Tricks GitHub Organization

There is now an "organization" on GitHub for CSS-Tricks. This is a great feature of GitHub and a perfect fit for us.

Why this is good
  • There is a larger core group of people that can work on any
August 20, 201215 comments

Exclude Compressed CSS from Sublime Text 2 Projects

How to exclude compressed CSS from Find in Project search results (because it's not helpful and annoying) in Sublime Text 2.
August 18, 201225 comments

Understanding CSS3 Flexbox

Ben Frain updated his primer on Flexbox to the new standard. Because, you know, the old one is old.…

August 17, 2012

256 Classes Beats an ID

According to the spec, one ID should be infinitely more specific than a class. But as it turns out, if you add 256 classes to a single element (same or different) it will override the ID. Dumb little edge case …

August 17, 2012

Don’t Overthink It Grids

The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a "main content area" floated to the left a "sidebar" floated to the right, it's a …

August 14, 2012124 comments

Smashing Mag CSS Q&A 3

The third installment of my recent question and answer series. This one includes code for dealing with retina version of sprites, fiddling with flexbox, and some of my favorite CSS tricks lately.…

August 13, 2012

ShopTalk Episode 29

This week Dave and I were joined by Tab Atkins and we talk about Tab's job as a spec writer working at Google, Flexbox, the future of float clearing, using encoded characters, smooth animations, and more!

Thanks to the Responsive

August 13, 2012

Made to Measure

Allen Tan:

So if static templates are too limiting, but per-piece art direction is too costly, how else can we make scalable, sustainable digital publications that are beautiful and accessible? To find a middle path, we can take a cue …

August 10, 2012

CSS Style Guides

As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming …

August 10, 2012104 comments

New Poll: Do you listen to music while you work?

Just a fun little poll to start a conversation about music and working. I know people firmly on either side of this poll: those that never ever listen to anything and those that can't work without it.

Where do you …

August 9, 2012268 comments

Multiple Pseudos Work by Adobe

Things are moving along in the pseudo elements world again which is exciting. Alan Stearns put together this mock spec that defines usage like ::before(n) and ::nth-pseudo().…

August 8, 2012

ShopTalk Episode 28

Dave and I were joined by Allison House and we talk about getting better at stuff, CSS grids, changing jobs, and more! Thanks to Squarespace (use code shoptalk8 for 10% off any purchase) and Environments for Humans for sponsoring. …

August 8, 2012

“Old” Flexbox and “New” Flexbox

Just so everyone is clear on this: "Flexbox" (more specifically: CSS Flexible Box Layout Module) has undergone a lot of changes in the last three years. Changes both to the spec and what browsers have implemented.

How To Tell


August 7, 201240 comments


Hakim El Hattab is at it again with a simple, beautiful, three-dimensional way to handle "hidden left side navigation" that's getting so popular on small screens. …

August 5, 2012

Poll Results: How do you order your CSS properties?

Over 10,000 people have spoken: the most popular way to order CSS properties is grouped by type.

This is how the votes broke down:

Grouped by type (45%) was fairly closely followed up by Randomly (39%). Much less popular …

August 5, 201285 comments

CSS Pie Timer

Hugo Giraudel shares how he made a "pie timer" in CSS. In his words: It's basically a piece of pie getting bigger and bigger to become a whole circle.
August 5, 201227 comments

Squarespace 6

Squarespace 6 is freshly out. It's really nice and the start of what I hope is a revolution in what building content websites is like.
August 1, 201239 comments


A code syntax highlighter by Lea Verou. Small, fast, and designed to work on front end languages. And my favorite, class names that make sense. …

July 31, 2012

Responsive Email Design

A guide from Campaign Monitor on making emails better on small screens. Some downloadable code at the end.…

July 31, 2012

Giving Users a Quick Disguised Exit From a Website

A reader wrote in with a really interesting and important question. The answer might save people from harm or literally save lives.

I am redesigning a website for domestic abuse victims. The director of the program wants me to include …

July 30, 2012115 comments

Use Cases for Multiple Pseudo Elements

I used to do an entire talk on pseudo elements. One of the things I mentioned was that there used to be a CSS3 spec that included "multiple" pseudo elements, but it was removed. That was kind of a bummer, …

July 27, 201263 comments

A Discussion About CSS Reusability

How reusable is CSS, really? Should we be doing a better job of that? Or doesn't it matter?
July 23, 2012179 comments

ShopTalk Episode 26

Dave and I do a RAPIDFIRE show this week where we try and get through as many listener questions as we can in one show. Thanks very much to Crafting Type (a 5 day workshop on building your own typeface …

July 19, 2012

Upcoming Speaking

I'm speaking at a number of events through the end of the year. Come one, come all!

  • July 19-21, 2012 UXMad, Madison, Wisconsin (Speaking on Friday)
  • August 1, 2012, CSS Summit (online)
  • August 4, 2012, WordCamp San Francisco, California
July 19, 201218 comments

Seamless iframes Today

I didn't even know there was such a thing as "seamless" iframes. But there is and they are coming (literally an attribute on the iframe element). Essentially they inherit some styles from outside of them, but are otherwise sandboxed. Perfect …

July 18, 2012

Crazy Town Selectors

I recently used this selector as an example in a blog post:

.article #comments ul > li > a.button { /* Crazy town */ }

There was a few comments to the effect that this seemed perfectly reasonable. I …

July 18, 201252 comments

Sprites and Retina Displays

CSS sprites are often used for small icons. That is exactly what looks bad on retina displays. Maykel Loomans has a way to deal with that that doesn't make our CSS twice as complicated: 1) Make sprite exactly twice as …

July 17, 2012

ShopTalk Episode 25

Dave and I were joined by Dan Cederholm and we talk about retrofitting existing sites responsively, getting back into the game, charging for fonts and lots about Dribbble. Thanks to Harvest and Environments for Humans for sponsoring.…

July 16, 2012

Judging CSS / Spotting Bad Code

In a recent Q&A article on Smashing Magazine, a question was asked about how to tell if a developer has written bad CSS. Specifically:

What are the signs that the CSS is sub-optimal, or that the developer hasn’t done a …

July 16, 2012100 comments

Some things beginners might not know about Sublime Text

Some quick hits from Alain Meier on some of the cool stuff Sublime Text 2 can do. I've been using and loving Sublime as my primary code editor for a while now. His list of A. through G. are my …

July 15, 2012

Interview on Mactuts+

I was interviewed for a brand new Mac-focused Envato blog about my 18 years as a Mac user. If you just can't get enough I was also recently interviewed on 1stwebdesigner.…

July 13, 2012

Smashing Mag CSS Q&A #2

In this one I answer questions about HTML email, baseline grids, resets, opacity issues, and more.…

July 13, 2012

UI Pattern Ideas: Email Settings

Last week I asked people to participate in some group design thinking around a specific design pattern: email settings. This was the premise:

Imagine there are three events that can happen in a web app that could trigger an email. …

July 13, 20126 comments

Beefing Up Dull Text in WebKit

While doing a bit of cross-browser poking around on CodePen, I noticed that the font for the code editors was notably duller and weaker in WebKit browsers (Safari and Chrome) than it was in Firefox or Opera. I quite …

July 11, 201237 comments

Set Text on a Circle

There isn't any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We'll explore one way to do it here. But be forewarned, we're going to use some …

July 9, 201251 comments

ShopTalk Episode 24

Dave and I were joined by David DeSandro where we talk about working in this industry, JavaScript versus CSS3, accessibility, David's various projects, and more. Thanks to Harvest (use code SHOPTALK for 50% off first month) and Environments for Humans

July 8, 2012

Media Queries, Sass 3.2, and CodeKit

Media queries are already awesome. Media queries in Sass are already awesome. Media queries in Sass 3.2 are going to be really awesome. This is how you can get CodeKit to start using it.

This isn't a brand new idea. …

July 5, 201243 comments

*May or may not contain any actual "CSS" or "Tricks".