Articles by CSS Tricks from February 2014

Responsive design is a pretty well defined strategy, but how you come at it can vary quite a bit. Brad Frost covers the angles. Direct Link to Article — Permalink…Responsive Strategy is a ...

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

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

The following is a guest post by 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 on...

I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the technique and has a super good interactive bl...

It's been too long since I've done a Chronicle. I'm going to try and get in the habit again.It's been a pretty rough winter here in Wisconsin. Relentlessly cold and plenty of snow. It's been my first ...

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

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

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?" ...

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

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

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

The following is a guest post by Ara Abcarians (@itsMeAra). Ara is a UX Engineer at Media Temple and worked on the recent redesign of mediatemple.com. Here he shares the ideas, approach, and tech behi...

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

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

On the heels of Hkon 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...

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

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

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