Grow your CSS skills. Land your dream job.

Article Archives

Smashing Mag CSS Q&A: Final Edition

Maybe not the last one ever ever, but the last one for now in this series of five or so we did in this round. Includes questions about CSS performance, choosing class names, getting the right line numbers in the …

January 22, 2013

Don’t Stop The Music: Links on Pages Playing Audio

Over at ShopTalk, we've gotten a number of requests from folks that wished links in our show notes would open in a new tab. They've gotten burned by clicking a link on the page while listening to a podcast …

January 22, 201326 comments

Lingering Misconceptions on CSS Preprocessors

I recently received this email from a reader who is just getting started as as front end developer and wanted to get into CSS preprocessing. It has a few common misconceptions in it that I hear quite often. So, blog …

January 21, 201364 comments

CSS for Babies: A Critical Analysis

The following is a super duper serious critical review of the book CSS for Babies. Super. Duper. Serious.


I'm afraid even the title of the book is an invalid CSS style declaration.

Are we capitalizing tag selectors now? That's…
January 20, 201354 comments

CSS-Tricks Chronicle X

Recent forthcomings are forthcame upon the page in deepest regard to the events of the fortnight and even beyond.
January 18, 201311 comments

Understand the Favicon

Jonathan T. Neal digs in. The low down: most browsers can deal with PNG, but if you specify an ICO, it will use that anyway. IE (even 10) don't support PNG, so you need ICO. So, use ICO. Apparently this

January 18, 2013

Media Fragments URI – Spatial Dimension

Fabrice Weinberg shows us a future web technology in which you can use just a part of a bit of media. In this case, a part of an image. The ability to do this will open up some new possibilities for designers.
January 17, 201314 comments

Internet Users Demand Less Interactivity

“Every time I type a web address into my browser, I don’t need to be taken to a fully immersive, cross-platform, interactive viewing experience,” said San Diego office manager Keith Boscone. “I don’t want to take a moment to provide …

January 16, 2013

An Advanced Guide to HTML & CSS

Shay Howe has started a new learning series on HTML & CSS, this time moving beyond the basics into the real nitty-gritty stuff you need to know as a front end developer. 3/10 are done, with a new one coming …

January 16, 2013

Zooming Squishes

Responsive designs can squish content inward when zooming, breaking a decent layout after just a few zooms. One reader writes in who really dislikes this on CSS-Tricks. But it's (mostly) fixable! Just make those media queries EM-based instead of pixel-based.
January 16, 201351 comments

The Accessibility Project

Dave Rupert heads up a new project:

For many web developers, accessibility is complex and somewhat difficult. [The Accessibility Project] understands that and we want to help to make web accessibility easier for front end developers to implement.…

January 15, 2013

Wireframe.cc

I'm not hugely into wireframing, but I can see the value in some workflows. This tool for it is deliciously simple. I like the UI touch where if you resize the "browser" window small enough it turns into a phone.…

January 15, 2013

HTML5 Drag and Drop Avatar Changer with Resizing and Cropping

In any app that has user avatars, users should be able to change those avatars. Anything to make that easier is desirable. Many apps start with a user's Twitter avatar, Facebook avatar, or Gravatar. That's a smart move. Avatars …

January 14, 201320 comments

How Do You Structure JavaScript? The Module Pattern Edition

JavaScript is interesting in that it enforces no particular structure upon you. "Bring Your Own Organization", if you will. As I write more and more JavaScript in web app sites, this becomes more and more interesting. How you structure your …

January 10, 201395 comments

Interview with Ian Hickson

Bruce Lawson interviews the editor of the HTML spec. A candid look into how the web evolves and its future by someone who has a lot more power in shaping it than we do. You know it's going to be …

January 8, 2013

Rethinking Dynamic Page Replacing Content

Jesse Shawl takes an old(ish) CSS-Tricks demo and updates it for today's world. Using the HTML5 history API he changes the URL and content of a page when navigation items are clicked, without refreshing the page.
January 8, 201372 comments

Workshop Notes from InControl Hawaii

In which I go over many of the important parts of a workshop I did for a small room of folks in Honolulu, Hawaii. Includes the Photoshop file we worked from (kinda) and a GitHub repo of where we ended up.
January 7, 20136 comments

“Never Having to Leave DevTools”

Speaking of workflow stuff, check out this short video by Remy Sharp showing us how you can use Chrome DevTools as a code editor. Literally edit JavaScript and save it back to disk without ever leaving the browser.…

January 5, 2013

How to Create Retina-Caliber Favicons

John Gruber shows us tools and steps for creating retina ready favicons.

When I looked into this a few months ago only Safari was even supporting them, but it appears as if Chrome is now too, so I'd say it's …

January 5, 2013

ShopTalk Episode 49

This week Dave and I were joined by David Walsh, a long time fellow blogger and now Mozilla employee. We talk about em-everywhere, analytics discrepancies, tendonitis, and more! Thanks to In Control and Lynda.com for sponsoring. …

January 5, 2013

PPK on Gradients

The problem with gradients is that they are a syntactic nightmare. The gradient spec writers and browser makers changed their mind not once but twice. Thus we have three sets of syntax, and all three occasionally crop up even today. …

January 4, 2013

Style Injection is for Winners

By "style injection", I mean being able to see styling changes immediately after authoring them without having to manually refresh your browser window. This isn't a brand new concept, I just mention it now because it's so awesome that if …

January 4, 201361 comments

In Search of the Perfect Radius

A bunch of research from Rakesh on the correct values for nested border radii. The conventional wisdom is Inner Radius = Outer Radius – Border Width. This holds true here, but what if that yield a negative value. Also see …

January 3, 2013

All You Need to Know About CSS Transitions

Alex Maccaw with a bunchload of up to date information on CSS transitions. Includes some clever stuff like a trick to avoid transitioning width (not very performant) by instead moving the element and exposing more of it underneath.

I also …

January 3, 2013

Pseudo Element Animations/Transitions Bug Fixed in WebKit

It has been a long-standing bug in WebKit that pseudo elements (like ::before and ::after) cannot be animated or transitioned. As of yesterday that bug was fixed thanks to Elliott Sprehn. You can pop open Google Chrome Canary and see

January 3, 201314 comments

Progressive JPGs: A New Best Practice

There are two kinds of JPGs in this world: baseline and progressive. Progressive is just better. Ann Robson shows us why.

Experimenting locally with a throttled bandwidth, an 80K progressive jpeg beats a 5K baseline jpeg (the same image, downsized) …

January 2, 2013

Sass and Scattered Media Queries: “It Doesn’t Matter”

Many of us using Sass are writing our media queries "inline" one way or another. There is a fairly common concern that doing this "scatters" media queries throughout our compiled CSS rather than in a combined block as we …

January 2, 2013

The Bookshelf Updated

These are all books that I own, read, liked, were helpful, and that I recommend.…

January 2, 2013

The Design Lesson

I like these thoughts by Andy Rutledge:

In graphic design, nothing is what it actually is. Everything other than content is representative of something else.

A line isn't a line, it's a boundary. Don't need a boundary? Or is that …

January 1, 2013

Thank You (2012 Edition)

The annual report: statistics, milestones, old goals and new, and a hearty thanks from me as we head into 2013.
December 31, 201269 comments

The Making of the Interactive Treehouse Ad

We go through the planning and creation of the interactive Treehouse ad on this site.
December 30, 201223 comments

Guest on Non-Breaking Space

I got to hang out with the crew at NBSP for their end of year special! …

December 28, 2012

5 Use Cases for Icon Fonts

Tim Pietrusky shares some ideas on how to use icon fonts as well as debuts his own new free service for icon font hosting.
December 27, 201237 comments

How To Deal With Vendor Prefixes

There are plenty of different ways to deal with vendor prefixes in CSS as part of your workflow. It depends on if you hand-author CSS or preprocess, and even then there are choices.
December 26, 201240 comments

ShopTalk Episode 48

#CROSSOVER time with Jen Simmons from The Web Ahead! Jen, Dave and I talk about The Web Behind, the Instagram debacle, getting better, being critical of yourself, and more. Thanks to Lynda.com and InControl for sponsoring.…

December 25, 2012

Dive Into Flexbox

Greg Smith with a deep look at new/final flexbox (display: flex).…

December 23, 2012

CodePen PRO

Big day for me and the CodePen team! Many, many months of development have given birth to CodePen PRO, a set of eight brand new features. Things like Collab Mode, where you can literally write code and chat with other …

December 20, 2012

A Tale of Animation Performance

It's all started with a tweet:

Hey @chriscoyier, do you have any source confirming translate() is better than top/right/bottom/left for moving objects please? :)— Hugo Giraudel (@HugoGiraudel) December 10, 2012

Context

So we're all on the same page, …

December 20, 201247 comments

Updated List of Icon Fonts / Flat Icons

Now 81 sets, by my count.…

December 19, 2012

Interactive Guide to Blog Typography

Super neat walkthough of making good typography choices by Tommi Kaikkonen.…

December 18, 2012

CSS Hypenation

PPK: Hyphenation works!

Eric Meyer on places to avoid it.

In my own experience in the CSS-Tricks v10 redesign, at one point I had hyphenation turned on everywhere and got loads of complaints of certain versions of Firefox over-hyphenating …

December 18, 2012

So You’re Going To Start A Huge New Web Project

I was asked this past week to consult for a company embarking on a huge new website redesign. I thought I'd write up some thoughts that I would share with anyone in that position.

You cannot neglect mobile.

Look at …

December 18, 201244 comments

Fastbook

Zuck was all like "HTML5 is too slow" and Sencha is all like "Whatever child take a peep at this."…

December 17, 2012

CSS-Tricks Chronicle IX

A tribunal on the happenings of the the passing approximate fortnight.
December 14, 201217 comments

FooTable: a jQuery Plugin for Responsive Data Tables

Brad Vincent introduces a new jQuery plugin for helping with responsive data tables with his friend Steve.
December 13, 201238 comments

Slides From Recent Presentations

As you know, slides alone pale in comparison to being there to see a talk, but I still feel they are worth sharing. I've just gotten to posting up my last three prepared talks on SpeakerDeck.

RSS readers, you'll …

December 12, 201234 comments

Do we need box-shadow or border-radius prefixes anymore?

The answer is: probably not. But maybe.
December 12, 201229 comments

Nine Ways to Improve User Experience in Mobile Design

Ben Terrill shares some "best of" excerpts from a new free e-book he co-authored with quick-hits on making UX better on small screens.
December 11, 201221 comments

BERG Cloud Buttons

The buttons at BERG Cloud are pretty sweet looking. It's not a hugely big deal, but the way they have created them uses two separate images (not sprited) and two internal spans. In this tutorial we will recreate them with …

December 10, 201232 comments

CSS Next

Divya Manian runs through many of the latest stuff coming in CSS. Including several things I'm hearing about for the first time, like specifying unicode range for an @font-face and canvas-as-background.

If you can't get enough, this talk by Tab

December 9, 2012

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