Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

298 comments

Design v10

It's been just about a year since the v9 design. You know what that means! Redesign time! This is, most definitely, the biggest overhaul yet. Not that you won't recognize it. There is a fresh coat of paint, but all the old stuff is there. …

12 comments

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.
28 comments

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.

position: sticky;

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

53 comments

Responsive Web Above The Fold

A guest post by Arley McBlain on using media queries to adjust for available vertical space.

Responsive Retrofitting

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

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

90 comments

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 on retina displays 3) my current laptop had very little RAM and a small hard drive. I was always running out of space. And finally 4) I needed the extra horsepower for exporting/converting all the video I'd be doing.

But …

19 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 to the spirit of blogging. It will give me a good home to link up interesting stuff that I didn't otherwise have a good home for. …

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 3.…

2 comments

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 ShopTalkShow.com by our own Dave and his Paravel brother Reagan Ray! Go look around. Thanks to Squarespace (use code SHOPTALK for 10% off) and the Responsive Web Design Summit (use code SHOPTALK for 20% off) for sponsoring. …

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 that probably will never be fixed, but interesting. Ryan Seddon digs in a little more. …

125 comments

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 simple grid.

If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot …

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.…

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 Web Design Summit for sponsoring. RWDSummit is an online conference and you can save 20% by using coupon code SHOPTALK.…

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 from the art of the tailor.

I totally agree that the future of good design on digital publishing is somewhere in that middle ground. Art direction "lite", perhaps. And maybe with a bit of automation.…

104 comments

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 is a part of it. Sectioning is a part of it. Commenting, indentation, overall file structure... it all makes up a complete CSS style guide.

Let's round up some existing ones.…

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().…

40 comments

“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. …

Meny

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. …

27 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.
39 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.

Prism

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. …

Responsive Email Design

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

63 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, because sometimes just ::before and ::after aren't enough. Why the seemingly arbitrary limitation? …

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 in Canada) and Environments for Humans (next upcoming confererence is the online CSS Summit) for sponsoring.…

18 comments

Upcoming Speaking

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

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 for something like Disqus eh? Front end engineer Ben Vinegar from Disqus introduces them and shows some smart ways for emulating them now. …

52 comments

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 think if we step through it backwards the craziness comes out more clearly.…

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 big 2) Swap out background in media query 3) Shrink background-size in half so coordinates are still correct.…

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.…

100 comments

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 good job? What do you look for in CSS to determine how good or bad it is?

I thought that was an interesting question and I'd expound upon my answer a bit. …

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 favorite features too.…

Smashing Mag CSS Q&A #2

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

6 comments

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. We want to allow the user to decide whether or not they receive emails when those events happen.

I looked through all the responses and these are the ones I thought were the most interesting and effective. …