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

Article Archives

The State of Spinners

If you need to indicate "please wait, something is happening" on a website, a spinner has long been the go-to choice. Probably an animated GIF, although there are other options like CSS animations, apng, SVG, or canvas. James Padolsey goes through each of the possibly options and explains the good and bad as well as introduces a cool new tool.…

68 comments

Slide In (as you scroll down) Boxes

I was playing with my new Nexus 7 (I really wanted to own a real Android device) and I noticed a neat little effect in the Google+ app that comes with it. As you swipe down, new modules of content slide up into place. Video is best here:…

51 comments

Let’s Say FeedBurner Shuts Down…

A lot of us around here have blogs and a lot of us use FeedBurner to "host" our RSS feeds. I thought it was worth talking about what might happen if we lose FeedBurner, which seems especially likely these days with the impending doom of Google Reader. …

Printing the Web

Hans Christian with the state of web printing. All the old classics are still important, like display: none; on irrelevant stuff (like navigation) and using pseudo elements to display the URL's of links. But there are new kids on the block like @page which helps you style individual printed pages and control printing orientation for certain elements, -webkit-print-color-adjust: exact; for printing background colors/images, printing crop marks, and preventing widows. …

Line Number Mapping for Sass in Chrom Dev Tools

I've always wanted to get this going since seeing this Lennart Schoors post, but this Lee Mallabone tutorial finally pushed me to do it. The debug settings are specific to Rails, but if you're a CodeKit users you probably just do this.

In the past I've thought: I don't need no line number mapping! My SCSS is so organized and modular I can always jump right to what I need to edit. But I could smell defensiveness and …

45 comments

Hang On Placeholders

The way that placeholder text works on inputs and textareas is either that 1) the placeholder text disappears immediately when the empty input is focused or 2) the placeholder text stays until actual text is entered. Perhaps a middle ground could also make sense.
14 comments

There’s more to the CSS rem unit than font sizing

Many web designers and developers are familiar with the CSS rem length unit. But, you may not know that it has a couple of handy alternate uses. In this post, I’ll describe how to use the CSS rem unit to scale specific page elements while leaving others unaffected. I’ll also discuss how to use it as a replacement for the under-supported vw (viewporth width) unit.
22 comments

Tricky Textarea Pulltab

In desktop Safari, Chrome, Firefox, and Opera-under-Presto, (not IE, not mobile anything) <textarea></textarea>s have a little resizer nugget in the bottom right corner. Textareas are for writing in, so if users need more space to feel more comfortable writing in there, they can have it. Clicking and dragging that resizer literally changes the box model of that textarea, pushing other things away as needed. We can use that little ability to make a trick!…

77 comments

Automatic Table of Contents

Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript. …

Finer Grained Control of Hyphenation

David Storey shows off the latest work-in-progress CSS Level 4 stuff for hyphenation. Like properties to make sure multiple subsequent lines don't hyphenate ("ladders"), how many characters need to be left on the old line and new line, and what character to hyphenate with. …

70 comments

The Lengths of CSS

There are quite a few properties in CSS that take a length as a value. The box model properties are the obvious ones: width, height, margin, padding, border. But plenty of others as well: the offset and sizing of a box-shadow or the size and spacing of fonts. What are all the accepted "length" properties in CSS? There are quite a few.…

Learn CSS Layout

Learn by seeing examples and code together in an easily digestible page-by-page format. Works on screens large or small, which we all know is darn important these days. By Greg Smith and Isaac Durazo.…

Responding to Voice

Jordan Moore experiments with talking to the browser to adjust how things look. For instance, "Make the text larger." Like in, you know, the future.…

5 comments

CSS-Tricks Chronicle XI

A brief summarization of the events that have been and events that are to be. Wherein ‘events’ refers literally to physical events as well as figuratively as in ‘some kind of thing that happened, loosely.’

Client-Hints

We all know UA sniffing sucks. But it's really common because there is a real need to know stuff about the browser on the other end when serving up content and resources. What if instead of just a UA string, we got information about the browser in the headers as well? Client-Hints aims to be that. It's in the RFC (Request for Comments) stage now and there is great discussion about what kind of information it should be making available.…

Flat UI

Really nice set of user interface elements from the folks at Design Modo. This style is hitting a real design nerve right now. I like how they went the extra mile and made all the components actually work (e.g. sliders and radio buttons and whathaveyou).

The JavaScript is a bit hodge-podge though, using bits of jQuery UI, Twitter Bootstrap, Video.js, and many more. It's open source, so it would be neat to see people chip in and remove some of …

Quotes & Accents

Reminders about what keys to press to get curly quotes and accented characters by Jessica Hische. I'm a major offender (SEE?!). I should be writing in Markdown which automatically fixes it. …

151 comments

Using SVG

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.…

35 comments

Mixing Responsive Design and Mobile Templates

You need a mobile strategy for your site. You have to pick Responsive Design or a dedicated mobile site, right? Maybe not. Maybe you can mix and match a variety of strategies.…

54 comments

Uniqlo Stripe Hovers

For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It's kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers as possible, they used an animated GIF to produce the effect. It's fairly small at 4K, but as we know around here, it is also another HTTP request. Let's reproduce the effect in a progressive enhancement style: less browser support …

13 comments

Search with Filters Responsive Design Pattern

Some design patterns have been explored fairly thoroughly as we've moved into an era of responsive design. Others not so much. There are plenty of complex patterns that are still worth exploring, like this one.

Setting a Performance Budget

I read this Tim Kadlec article a while ago but the more I think about it the more I like it.

If you are going to take performance seriously (instead of just paying lip service to it or chipping away at it) set hard limits that your site will not cross. Say something like 300k total page weight, 25 requests, and 100ms response time. Nothing may exceed that. If something does, it's all-hands-on deck to fix it. Treat it like …

Using WAI-ARIA Landmarks

I need to do a better job at at using the role attribute. It's so easy and has so many benefits. Important note: all content should be within a landmark role. Steve Faulkner shows the way.…

58 comments

Using Flexbox: Mixing Old and New for the Best Browser Support

Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids …

22 comments

Notes from My Workshop at Webstock ’13

I thought my trip to New Zealand for Webstock warranted a special workshop. In honor of their unique national bird, I created a little one-pager website The Kiwis of New Zealand. The site started life as a simple Photoshop document and during the workshop we turned it into a complete finished website. Below is a list of everything we covered in that process.…

The Amazing Web Interview

Martin Wolf interviews yours truly on his blog, which is a very good mostly-link-blog-with-commentary you should subscribe to.…

80 comments

Group Advice: Working on an Anti-RWD Team

A reader (let's leave them anonymous) writes in:

The agency where I work has never produced a responsive design. As a developer I'm handed fixed-width designs in the form of static PSD comps. I'm then expected to slice these up, run some browser tests, and push them live. …

66 comments

REMux: An Experimental Approach to Responsive Web Design

In which Dirk Lüth shows an experimental RWD technique where layouts (and just about everything) is controlled with rem units and the base font size is adjusted based on screen width available.
57 comments

Wrapup of Navigation in Lists

The recent post about marking up navigation in lists (or not) generated nearly 200 comments of mostly-great discussion on this topic. I thought it would be of benefit to wrap up up the important points.…

82 comments

New Poll: alt Text Usage

Alt text has come up a bunch of times for me recently. One reader wrote to me asking if people really use them anymore. He does and said "I feel alone in carrying out the good fight." ALA posted a reminder about when using alt text is unnecessarily repetitive. I ran across this flowchart in the comments there. The A11Y Project has a tip page on them. So I figured it would make for a good poll this round. …

Credit Card Info in One Field

Credit card numbers, expiration dates, and CVV's are all numbers, so why not collect them all in one field and leave the number keypad open the whole time? Good idea, Zachary Forrest. via Luke.

Related: if you use Stripe, that might be literally all you need to collect payment. But other payment processors often require more info (like address) so not collecting that info is dangerous (should you need to switch someday).

And speaking of UI experiments, this is …

218 comments

Navigation in Lists: To Be or Not To Be

If you Google around on whether or not you should use lists as the markup for navigation on websites, you'll find no debate. Every article suggest that yes you should. The vast majority of tutorials you read will use lists for navigation. The vast majority of templates you see will use lists for navigation. But is this ubiquitous markup pattern absolutely correct? Let's see.

Note: make sure to check out the wrapup post of what we learned about all this…
142 comments

2013 CSS Wishlist

In which we look at some things that I think would be pretty nice to have in CSS. And also some things that are actually likely to happen. And why that's probably better.

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 dev tools when using preprocessors, how to think about @extend, and more!…

26 comments

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 via our embedded player. When the browser leaves our page and goes to the link, the audio stops playing. We can do something about that.…

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