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

Article Archives

Let’s <cite> People

Bruce Lawson:

Once again, I propose that the definition of <cite> be reverted to include the real-world use for marking up names of those cited, and that the spec note that cite-inside-blockquote is one way (although not the only way) to link a quotation with the work or the person being quoted.

+1

The cowpath was already paved, so we just need to stomp it down again.…

88 comments

The Use of jQuery in Tutorials

A question came up in a semi-recent ShopTalk episode about the use of jQuery in tutorials.

Lately I've begun to realize how muddled the line between jQuery and JavaScript has become when learning about the language. It's hard to find a solid tutorial that doesn't include jQuery instead of JavaScript. What's your opinion on the overuse of the library?…

45 comments

SVG Fallbacks

If you like, you may skip straight to the fallbacks.

There is a very clever technique by Alexey Ten on providing an image fallback for SVG going around the internet recently. It does just what you want in the classic no-SVG-support browsers IE 8- and Android 2.3. If we dig a little deeper we find a some pretty interesting stuff including a bit of unexpected behavior that is a bit of a bummer.…

231 comments

Job Titles in the Web Industry

There are loads of job titles in our industry. The opinion on their usefulness range from harmful (i.e. leads to “not my job” syndrome) to vital (i.e. people change companies sometimes and need common language). Since they are out there and we use them, there should be some consistency to their definition. Perhaps we can get closer to nailing that down.

Let's light this fire, shall we? This is all debatable, of course.…

Don’t Swear in Your Stylesheets

Aimee Ault from deviantART discovered that some of their stylesheets would fail to load for some users. Turns out those users were

accessing the site from computers with overly sensitive system-wide profanity filters installed. These users' browsers likely stopped parsing the stylesheet entirely upon reaching the word in the stylesheet, leading to a fairly ugly and/or broken page.

Ideally you have a build system that compresses CSS and removes comments, but if for whatever reason you ship CSS with comments …

20 comments

MetaFizzy Effect with Sass

The following post is by Hugo Giraudel, a regular contributor here. In the grand CSS-Tricks tradition, Hugo found a cool effect on the web and dug into how he could re-create it in a smart way.

18 comments

SVG Filters on Text

The following is a guest post by Chris Scott. Chris was messing around with SVG filters and how they can be applied to text. I thought this was quite interesting because SVG filters are quite a bit different than CSS filters. Arguably more powerful, as there are more of them and you can do things like bevel/emboss or stroke which you can't in CSS filters. Chris goes into detail here on how it's done including a tool to make

Emmet LiveStyle

You might have seen a workflow where you can save out of DevTools to file. But have you seen it changes made in DevTools instantly update the code in your editor in real time? And vice versa?…

38 comments

Creating a 3D Cube Image Gallery

The following is a guest post by Kushagra Gour (@chinchang457). Kushagra wrote to me to show me a fun interactive demo he made. It touches on many of the concepts of 3D transforms in CSS, a topic we haven't covered a ton here. So here's Kushagra taking the reins to explain these concepts through a demo.

83 comments

Spacing The Bottom of Modules

Ah the humble module! A good many designs these days make use of modules in the content-y and app-y sites alike. A chunk of information, an advertisement, a grouped set of functionality... could be anything. The fact that they likely have visual similarity yet can contain anything leads to an interesting CSS challenge: how do you pad the inside consistently?…

“an oddly reductive position to hold.”

[Pitchfork Holding Web Designer #1]: All designers should learn to code!
[Pitchfork Holding Web Designer #2]: No! Worrying about implementation influences design for the worse!
[Josh Seiden]: wtf.

Most designers are comfortable starting with bad ideas and iterating until they find satisfying solutions. Along the way, we throw out lots of ideas, for lots of reasons. We should be mature enough to throw out ideas that are unduly influenced by the system model.…

The “Other” Interface

I like this sentiment by Robin Rendle:

As front-end developers and designers, we’re constantly refining two interfaces simultaneously: one for visitors who load the website, the other for developers who have to tackle the code in the future

Surprise! Preprocessors give you the organizational tools to do a good job with this.…

14 comments

Making Websites for Geezers

Let me start off by saying that if you are looking for practical applications of CSS that could apply to any website and improve usability, this isn’t the article for you. If you are looking for creative implementations of code for comedic effect, and possibly inspiration for your next ridiculous project, then welcome.
7 comments

Automatic CSS Testing

Simon Madine is leading the charge in the neglected world of CSS testing. This is the scoop so far as I understand it.…

65 comments

Website Deployment: Let Us Count The Ways!

Deployment is moving a website from a local environment to live servers. What seems like a simple thing can actually be quite complex. There are absolutely loads of ways to go about it. They range from user friendly software and services, to more complex command line tools, to full blown systems with lots of moving parts.

I'm not an expert in all this, but I've set up a few different deployment systems in my day as well as worked with …

The East Wing, Part 2

I got to be a guest on Tim Smith's The East Wing podcast. I talk about some of the stuff that's happened in my life since the last time I was on the show over a year ago, like the Kickstarter and CodePen. We also get into some random topics like freelancing and frameworks.…

CSS Day 2013 Talks

Gotta love it when conferences post all the talks online. Perfect for some weekend binge watchin'.…

29 comments

How Web Tech Concerns Change

As a beginner in any specific web tech, your first concern is "what is this and how does it work?" As you level up, those concerns change. You may still learn about about how it works as you dive deeper, but other concerns will emerge the more you know, the more you use it, and the more work of others you are exposed to.…

Sass + Dev Tools Workflow

There have been a couple of good articles lately on improving the Sass/CSS workflow by using 1) Source Maps so Chrome knows what's up with your Sass files and partials 2) Telling Dev Tools to save changes back to disk 3) Ensuring those changes get automatically re-compiled 4) Using the LiveReload browser extension to ensure those changes are injected onto the page.

Ben Frain's Faster Sass debugging and style iteration with source maps, Chrome Web Developer Tools and Grunt and …

If Kerouac wrote JavaScript

When I opened Johnson’s completed assignment, I found a short note from the good doctor, explaining why he had chosen to use CoffeeScript: “Sir, the funcktion key-word is an ALBATROSS and the curly brace is worthless FILIGREE. I desire a clean and artickulate script for the dockumenting of my varied MUSINGS”.…

35 comments

The Almanac is “Complete”

This is just a note to let ya'll know The Almanac section on CSS-Tricks is complete. Not complete as in totally done and never will be changed or anything foolish like that, but complete as in all CSS selectors and CSS properties are present and have complete informational pages about them.

It took a while! I wrote a good number of them, but then pulled in help to get it all completed. Big thanks to: Louis Lazaris, Estelle Weyl, Zachary …

38 comments

The Extend Concept

All three of the most popular CSS preprocessors support extend. I don't have any data, but in my experience this feature is confusing at first and thus a bit under used. I thought we could talk a bit about how it works, why and when to use it, some gotchas, and what it might be like in the future.…

17 comments

The Sixth Fourth

It's a tradition around here to do a State of the Union post on the Fourth of July. This is the sixth one! (1) (2) (3) (4) (5).…

73 comments

Centering Percentage Width/Height Elements

If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element. That's great if you know the width and height of the element you're trying to center, but what if they are percentages?…

49 comments

Swapping Out Text, Five Different Ways

It's a common need in web apps: you click something and the text of the thing you just clicked changes. Perhaps something simple like a "Show" button that swaps to "Hide", or "Expand Description" to "Collapse Description." This is a fairly simple thing to do, but there are various considerations to make. Let's cover a bunch of ways.…

GoodUI

16 good fundamental ideas by Jakub Linowski.…

25 comments

Making Sass talk to JavaScript with JSON

The following is a guest post by Les James. Like many of us, Les has been gunning for a solution to responsive images that works for him. In this article he shares a technique he found where he can pass "named" media queries from CSS over to the JavaScript, which uses those names to swap out the image for the appropriate one for that media query. And even automate the process with Sass.
4 comments

CSS-Tricks Chronicle XIV

I live to hail that season by gifted one foretold, when men shall live by reason, and not alone by gold.
36 comments

Replicating Some Of Google Hangouts Chat Design

I've been using Google Hangouts a bunch. It's really pretty great. One on one or group text chat, audio, or video. Text is archived, maintains history, and is searchable. Video / audio is recordable. It works great on desktop and mobile devices and keeps them in sync. It's free. Hard to beat that.

Anyway, on a whim I decided to replicate some of the look of the chat window on desktop. Turns out there is a bunch of interesting stuff …

Speaker Notes

Rebecca Murphey with tips on speaking. While posted on “Ladies in Tech,” the advice is good for anyone.

I’ve learned that my ability to give the “elevator pitch” for a talk is a great measure of my preparedness.…

Intro to Web Workers

Brian Cooksey goes from "I don't really know what Web Workers are" to "OK I totally get Web Workers." on one short article.

...they are scripts that run in their own background thread. Independence from the regular JavaScript event loop means that a worker can churn away at something for a long time and your UI will remain responsive.…

JSbooks

A big collection of books on JavaScript that are published free on the web.…