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

Article Archives

71 comments

New Poll: Typing Skills

Reader Hendrik Maus wrote in asking me about how I value typing skills and suggested running a poll on it. Good idea, Hendrik! I love polls that unearth some interesting data around developer opinions and skills. There are lots of …

13 comments

Poll Results: Sharing Buttons

A poll has been running here regarding sharing buttons. We asked it this way:

This best describes how I share links on my social media site(s) of choice:

12.5 thousand CSS-Tricks visitors voted. …

23 comments

Prefill Your Own Forms in Dev

There is a good chance there is a bunch of forms on the websites you work on. Login and signup forms, payment forms, contact forms, comment forms, etc. It's a good idea to test these forms. Certainly automated tests are …

Inverse trigonometric functions with Sass

I link this up not because I think we all need to know trigonometry in our day to day CSS worker lives, but because: holy crap Ana Tudor does amazing stuff with Math and Sass which results in some capital-A …

Universal overflow: auto;

Greg Smith isn't advocating we start just slapping on * { overflow: auto; } into all our existing projects. But if we start a project with this, there are a number of advantages, like not needing to use a clearfix …

41 comments

SVG `symbol` a Good Choice for Icons

You could design an icon set where the icons all had the exact same aspect ratio. But that's probably not typically going to be the case. The container around a little beaker icon might be tall and narrow. The container …

8 comments

Using Encapsulation for Semantic Markup

The following is a guest article by Chris Scott. Chris takes us through a great use case for the Shadow DOM. As designers, we may want to style something in a certain way, but sometimes end up having to

Script-injected “async scripts” considered harmful

Async is still cool (<script async src="script.js">), but the one where you create a script element with a src and inject it isn't anymore. There are a few gotcha's though, so make sure to read Ilya's whole article. …

36 comments

SVG `use` with External Source

Inline SVG is an awesome way to use SVG because, among other reasons, the individual shapes that make up the graphic can be scripted and styled. The shapes are right in the DOM. But does that mean we have to …

Updated Flexbox Guide

Worth mentioning here: I updated the Complete Guide to Flexbox here on the site that Hugo Giraudel originally helped me with. The idea was to have the complete set of information there, but quickly get to the references to the …

30 comments

jQuery with CoffeeScript

I don't always write CoffeeScript, but when I do, I'm probably using jQuery too; I always forget the syntax for stuff. So I'm going to write it all down here so I can reference it until I memorize it.…

Tips for Creating Accessible SVG

Léonie Watson with a much-needed reference on how to do a good job with SVG accessibility. A couple of takeaways: 1) Use it, the sharp clarity of SVG is good for low vision folks. 2) Inline SVG offers better accessibility …

19 comments

Winner Winner

Super group hug and jumping high fives for everyone. I was honored to accept the Outstanding Contribution award for The Net Awards this year. The entire internet got to vote in the first round, then a select group of peers …

2 comments

oEmbed Bring Embedded Pens All Over

oEmbed is a neat little technology that allows for rich content to be embedded into other content very easily. You paste a link to the "thing" and, when published, that link magically transforms into something much more useful than a …

26 comments

Links with Inline SVG, Staying on Target with Events

It's pretty common to use SVG within an anchor link or otherwise "click/tappable thing" on a web page. It's also increasingly common that the SVG is inline <svg></svg>, because it's often nice having the SVG in the DOM since …

Programming Sucks

Too many great quotes in this essay by Peter Welch . I'll just pick this one:

Right now someone who works for Facebook is getting tens of thousands of error messages and frantically trying to find the problem before the …

CSS Shapes 101

A how-to with a bunch of classy examples by Sara Soueidan.…

11 comments

Dealing with Content Images in Email

Let's say you're using an RSS-to-Email service. They're pretty useful. Plenty of people like subscribing to content via email. You have a CMS that generates RSS from the content you create. An RSS-to-Email service can watch for new entries, format …

Picturefill 2

This is important because:

  1. Picturefill was a great solution already, and this brings it into the future encouraging the use of the future proper syntax.
  2. You not only can use <picture> but <img srcset> too, which is a close cousin
91 comments

Inline SVG vs Icon Fonts [CAGEMATCH]

If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more …

50 comments

Handling z-index

Managing z-index across large sites can be a pain in the butt. CSS is hard to test, so it's notoriously easy to make a change that ends up, for instance, hiding some important UI under who-knows-where.

If you use …

12 Little-Known CSS Facts

Sometimes these types of articles are cheezy and filled with fairly obvious stuff, but not when Louis Lazaris does them. All of these are pretty non-obvious. …

34 comments

Animating SVG with CSS

There isn't just one way to animate SVG. There is the <animate></animate> tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We're going to look at another way: using …

22 comments

Features Are Complicated

Why can't I edit my tweets?! Twitter should allow that.

It's so simple right? CRUD apps (Create, Read, Update, and Delete) are app-building 101! What a gross oversight. But wait. Just as a fun nerdy little exercise, let's think about

The decline of the mobile web

Chris Dixon:

Mobile is the future. What wins mobile, wins the Internet. Right now, apps are winning and the web is losing.

John Gruber:

We shouldn’t think of “the web” as only what renders in web browsers. We should think …

43 comments

Frosting Glass with CSS Filters

The following is a guest post by Bear Travis, a Web Standards Engineer at Adobe. I'm a fan of how Adobe is pushing the web forward with new design capabilities, and doing it in a responsible way. CSS filters is

16 comments

Stripes in CSS

Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place.…

Spring-cleaning Unused CSS

Addy Osmani intros a Grunt task for removing unused CSS from your stylesheet before serving it.

While this is certainly a worthy goal, I look at the quotes from people who reduced their stylesheets by 3/4 or more and I'm …

20 comments

Rotated Table Column Headers

Say you have a table header (i.e. <th></th>) of "Number of Howler Monkey Species by Country" and the data in the corresponding <td></td> is like "3". That's an awkward mismatch of width.…

39 comments

Hatin’ on Web Tech

This article "Shadow DOM" by Steven Wittens is only vaguely about the Shadow DOM. It's mostly about how awful everything is. HTML sucks, CSS sucks, the DOM sucks, SVG sucks, MathML sucks... I don't want to pick on Steven. He …

CDNify Podcast

I joined Jamie Ashbrook and Ben Briggs to talk about SVG and tooling and whatnot. …

15 comments

SVG & WordPress Custom Fields

The following is a guest post by Ian Marquette. Ian learned that SVG can have a <text></text> element, meaning that text could come from a dynamic source while still being able to do cool custom SVG-specific stuff to it.

The Web Ahead

I chatted with Jen Simmons about flexbox and the general future of the web.…

58 comments

New Poll: Sharing Buttons

Throughout the life of this site, I've flipflopped (nope, yep) on whether or not I show social sharing buttons on articles. As anything, there are arguments in either direction. We can cover that briefly, but I also …

Crafting link underlines on Medium

Quite the in-depth exploration of underlined text on the web by Marcin Wichary.

In the end, linear-gradient won the day with the most control, best look, and best performance. Some people have been playing with it on CodePen. …

24 comments

Poll Results: Command Line Usage

About 22,000 CSS-Tricks visitors voted in the last poll about command line usage, which asked:

On average, how many commands do you run from the command line each work day?

The result: there is a lot of people at all …

84 comments

Design v11

I redesigned this site a smidge. It's not a huge re-thinking or as big of an undertaking as v10 was, but it's different enough I'm going to call it v11.…

My Advice to Young Designers and Developers

Andy Budd:

Should they continue their studies or jump straight into the labour market? I usually tell them that ability trumps education and I don’t put much faith on the current raft of tech degrees. So I’d prefer to see …