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

Article Archives

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 what a feature like this might take for the Twitter team. I don't work there or have any inside knowledge, so this is all hypothetical for the sake of understanding app development.…

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 of the web as anything transmitted using HTTP and HTTPS. Apps and websites are peers, not competitors. They’re all just clients to the same services.

Perhaps it's not HTTP and back end web that is in danger, but it's the …

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 a good example. They knew they were desired because Photoshop paved the way. They brought them to the web with a sensible syntax and they helped with both the spec and browser implementation. Now we're seeing them in stable browsers,

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

42 comments

Hassle Free Responsive Images for WordPress

Update: The plugin created in this article has moved here and now uses the more appropriate srcset attribute. It's the official WordPress plugin of the Responsive Images Community Group and is endorsed by the WordPress Core Team. It sounds likely that this will make it into WordPress core eventually. Pretty cool!

The following post is guest co-authored by Tim Evko (@tevko). WordPress has a built-in media uploading system. When you upload an image, it automatically creates and saves

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 like holy crap what kinda shop are you running over there?! I know "test, don't guess", but I'd guess that pretty close to 0% of the styles I write are unused. I'm sure HTML changes over time make a orphaned …

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 is, without a doubt, many (many) times smarter than I am and has well articulated points. Let's go wider.…

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 want to gather a bit of data on the subject, so that will be our next poll.…

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 the different levels. It's no wonder it can be such a hot topic.…

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 three years of experience than three years of study.

That being said, I’ll also point out that University is about much more than just acquiring a skill. It’s a formative experience that will shape your attitudes for the rest of …

69 comments

On CodeKit 2.0

The following is a guest post by Bryan Jones, the creator of CodeKit. I've been using CodeKit for a couple of years now and I've talked about it plenty. In my opinion it changed the game in front end development making it easy to use advanced tools that, while powerful, felt out of reach for many. Now CodeKit 2.0 it out, which has followed the landscape of front end development, bringing us more powerful tools that are tough to

Fluidity

It's a fun little soundbite to talk about how the web is responsive right out of the box. With no authored CSS at all, a website will flow to whatever screen width is available. If your site isn't responsive, you broke it.

Well that's almost true, but as Adam Morse says in this new project:

HTML is almost 100% responsive out of the box. These 115 bytes of css fix the 'almost' part.

Things like images and tables can have …

106 comments

Icon System with SVG Sprites

I've been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn fine system. However, I think assuming you're good with IE 9+, using inline SVG and the <use></use> element to reference an icon is a superior system.

First let's cover how it works.…

19 comments

Popping Out of Hidden Overflow

The following is a guest post by Agop Shirinian. Agop ran into an interesting scenario where he needed an element to be scrollable in one direction, while allowing the overflow in the other direction. You'd think that's what overflow-x and overflow-y are for, but it's not that simple. I'll let Agop explain.

17 comments

Filling the Space in the Last Row with Flexbox

Chris Albrecht posted a question on StackOverflow about grids. Essentially: imagine you have an element with an unknown number of children. Each of those children is some percentage of the width of parent such that they make equal rows, like 25% wide each for four columns, 33.33% wide each for three columns, etc. The goal is to fill the space of this "grid" evenly. There are an unknown number of children, so let's say you were going with 25% and …

Thoughts on Media Queries for Elements

Imagine something like these Transformer Tabs as a widget in a fluid column in a responsive design. Depending on the browser window width, perhaps this design is either 4, 2, or 1 column wide. When it breaks from 4 to 2, the column probably temporarily gets wider than it was, even though the screen is narrower. It would be preferable when writing the media query logic for those tabs to consider how much space the widget has available rather …

36 comments

Flexbox Bar Navigation Demo

Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general.

But I've been enjoying tinkering with flexbox, so I decided to toss it together with that, and it made for a pretty educational example I think.…

css perf

Mark Otto "derping around with measuring CSS performance". Nothing looks particularly concerning to me, to the point where I would change how I do things. The most surprising numbers were in background vs background-color, but Paul Irish debunks that a bit.

There must be something in the water as Ben Frain has dug in a little bit on CSS performance as well. I like Ben's soundbite:

With CSS, architecture is outside the braces; performance is inside

This is

srcset in Chrome

It's worth noting that the srcset attribute for the img element has landed in Chromium (Chrome will get it in 34, Opera 21). Their example: <img alt="A rad wolf." src="pic1x.jpg" srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x"> And:

Stay tuned for the <picture> element

We needed this. The fight was arduous. The solution is good. Other browsers will be on the way. This is notable as once a browser supports something, the tendency is for it to always be supported. Plus …

111 comments

CSS Gradients

This article was originally published on March 2, 2010. It was updated April 1, 2011, July 20, 2011, and again March 3, 2014, each time to clarify and correct browser prefixes and best practices.

Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance.

Gradients are …

22 comments

Basics of CSS Blend Modes

Bennett Feely has been doing a good job of showing people the glory of CSS blend modes. There are lots of designerly effects that we're used to seeing in static designs (thanks to Photoshop) that we don't see on the web much, with dynamic content. But that will change as CSS blend modes get more support. I'd like to look at the different ways of doing it, since it's not exactly cut and dry.…

Responsive Strategy

Responsive design is a pretty well defined strategy, but how you come at it can vary quite a bit. Brad Frost covers the angles. …

Confused About REM and EM?

Jeremy Church:

While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.

Jeremy tends to favor em, because of the ability to control an area of a design. As in, scale the type in that specific area relatively. I have tended to like rem because of the ability to scale type across the entire page easily, but I've gotten into issues where that wasn't good enough control …

58 comments

Float Labels with CSS

You've probably seen this pattern going around. It's an input that appears as if it has placeholder text in it, but when you click/tap into that input, that text moves out of the way and allows you to type there. It's rather clever, I think. Brad Frost has a really good post on it, detailing the pros and cons and such.

Many of the demos I've seen involve JavaScript. The other day I was checking out at Nest.com, saw …

35 comments

Stackicons: Doing More with Icon Fonts

The following is a guest post by Parker Bennett. While icon fonts are efficient and easy to use and scaleable and all that, one of the classic "strikes" against them is that the icon can only be one color. Parker has a brand new project that solves that issue in a simple and clever way. I'll let him introduce it for you.

30 comments

Posting Code Blocks on a WordPress Site

So you've installed WordPress and want to blog about code. Yay! You're a hero and I thank on behalf of myself an coders everywhere. Here's what you'll need to do and think about to actually get publishing blocks of code.…

42 comments

Multiple Simultaneous Ajax Requests (with one callback) in jQuery

Let's say there is a feature on your website that only gets used 5% of the time. That feature requires some HTML, CSS, and JavaScript to work. So you decide that instead of having that HTML, CSS, and JavaScript on the page directly, you're going to Ajax that stuff in when the feature is about to be used.

We'll need to make three Ajax requests. Since we don't want to show anything to the user until the feature is ready …

17 comments

Sticking Around

I'll be danged if I can find it but someone tweeted to @CodePen the other day something like: "Is it worth it for me to go PRO? Or are you going to up and shut down one day like so many startups do?" It was a hard question to answer, and not because I'm not sure what the answer is.…

12 comments

Test for Support of SVG as img

Browser support for SVG isn't quite as simple as yes or no. In addition to some quirks on how that support plays out, it depends on how that SVG is being used. One common way is right within an image tag, like <img src="image.svg" alt="description"/>.

How can you detect if a browser supports SVG use in that way?…

Getting started with Gulp

I followed this guide by Mark Goodyear to try Gulp (a Grunt competitor) out. I don't use either of them at a level where I'm qualified to have a strong opinion about betterness. They both work for me. I do enjoy the piping in Gulp how you say "take this, do this, this, and this, then put it here" - rather than configuring a source and destination on each thing like in Grunt.

One hiccup I faced: I was running …

22 comments

Draggable Elements That Push Others Out Of Way

Aside from a few esoteric tricks involving stuff like the resize handle on textareas, draggable elements is JavaScript territory on the web. E.g. click on element, hold down mouse button, drag mouse cursor, element drags with the mouse, release mouse button to release element. Or the touch equivalents. Fortunately this is well-tread territory. Time tested tools like jQuery UI offer Draggable (and other similar methods) to make this easy.

But recently in trying to achieve a certain effect (see title …

20 comments

Force Quit a Tab in Google Chrome

Normally Google Chrome is very good at allowing you to close misbehaving tabs. Each tab is like its own little universe so if it crashes it doesn't affect other tabs. That's the whole "multi process" thing that Chrome brought to the WebKit party and was part of the reason for the Blink break-up.

But let's say there is a tab that just won't close. …

61 comments

International box-sizing Awareness Day

It's February 1st today, which I've decided to declare International box-sizing Awareness Day. In honor of, you guessed it, the most humble and undersung, yet awesome and useful CSS property: box-sizing.…

CSS Regions Matter

On the heels of Håkon Wium Lie's condemning of CSS regions, Sara Soueidan writes about all their benefits. Having read both now carefully, I think Hakon is wrong on each point and CSS regions are quite useful.

Paramount to the discussion:

CSS Regions are not a layout feature — they're a fragmentation feature

Whatever any of us think, Blink is going to yank out early support for regions, mainly citing performance reasons. Weird to me: why was this reported on …

You Might Not Need jQuery

I'm of the opinion that you probably usually do need jQuery (I explain why many times in my latest course on it).

But I'm also of the opinion that reference guides like this a super cool and useful for those of us who came into the world of JavaScript through jQuery. I'll probably reference this thing a zillion times. …

veinjs

If you need to change the styles of some elements using jQuery, you might use .css(), but that applies inline styles and we generally don't like that. You could add/remove/change a class name to control the style, which is better, but then still only works on matching elements that are currently in the DOM.

This neat mini jQuery plugin by Danny Povolotski actually injects real CSS on the page so all (even future) matching elements get that style. Kinda …

23 comments

Boxes That Fill Height (Or More) (and Don’t Squish)

It's hard to sum up all the awesome that is flexbox in a little ol' blog post. Although we gave it a shot here. Here, let's just try and focus on one thing that flexbox solves very nicely: the ability to have an arbitrary set of boxes fill up all the available height of a parent box. And not only that, but expand beyond that if needed (not squish them to fit). …

38 comments

Play and Pause Buttons for YouTube and Vimeo Videos (via Their APIs)

Sometimes you just need to start a video playing by some user interaction on the page other than clicking right on that video itself. Perhaps a "Play Video" button of your own creation lives on your page and you want to start that video when that button is clicked. That's JavaScript territory. And if that video is a YouTube or Vimeo video, we'll need to make use of the APIs they provide. No problem.…