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

Article Archives

22 comments

Async Attribute and Scripts At The Bottom

A reader recently wrote in and (essentially) asked me:

Is there any reason to use the async attribute when the script is already at the bottom of the page?

I'm not a master at this stuff, but this is how I understand it...…

12 comments

Cascading SVG Fill Color

One time someone told me their biggest problem with SVG icons is that they didn't match the color of text they were by. In fact it was such a big problem for them, that despite seeing the advantages of SVG icons they were sticking with icon fonts. I didn't think of it at the time, but there is a pretty easy solution for this.…

Everything You Need to Know About the CSS will-change Property

Sara Soueidan lets us know translateZ(0); is out and will-change: transform; (et al) is in. The general tips being: use sparingly, apply before you need it, be honest about what really needs it.

There is some backlash about this, mostly centered around the idea that browsers should be handling this for us. The opposition saying it's too hard for browsers to know, so this is essentially browsers and devs meeting in the middle. Sounds a lot like the responsive images …

Sharing Data Between Sass and JavaScript with JSON

Imagine you have a set of breakpoints you have defined for your design that adjust the layout. Now you need to mimic those breakpoints in JavaScript, because you are choosing to load some dynamic content at that breakpoint. Now you're maintaining that breakpoint at two different places in your code. Inefficient and error prone.

This idea by Nate Hunzaker allows you to define those breakpoints in a JSON file that can be used by Sass as well as JavaScript. And …

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 ways we could ask it, but we're going to try this way:

How much do you value your keyboard typing skills?

Not so much "how good are you?" but "how important do you think your skill is?" It was kinda …

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 a good idea. Backend tests that process the form data and test the results. Frontend tests that test the functions there are doing what you expect.

But then there is manual testing. Like, I want to test this with my …

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 Art and I'm sure there are more of you out there that would be interested in following her work.…

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 or worrying about collapsing margins. Of course sometimes you want a different overflow behavior, but you can just set it like you would anyway.

See the comments about inheriting the value rather than setting it.

Sometimes these things catch …

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 around a little fish perhaps short and long. You probably shouldn't have to think too much about that, but unfortunately you kinda have to when you use an SVG icon system as I've described in the past, because you need …

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 go to war with HTML, CSS, and JS to get it done. And even then, the results can be weighty, hacky, and unsemantic. Shadow DOM might be able to save us from that, giving us a fresh place to use

64 comments

SVG `text` and Small, Scalable, Accessible Typographic Designs

Let's say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word.

This is something we might tell a graphic designer switching from print to web to avoid. It's too finicky. Too much touchy, unscalable absolute positioning. Too much risk from different font rendering behavior.

But with inline SVG, we …

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 define those shapes right in the HTML on every page? Nope, we can <use></use> to reference them from elsewhere. Ideally, that "elsewhere" is an external file, because that means that file can be cached by the browser, efficiency!…

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 properties, what they do, and which elements they go on.…

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 3) Use <title> and <desc>. Plus several more you should definitely read about.…

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 voted in the second round, so that's makes it a double-special thing to win.…

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 link. A quintessential example is a link to a YouTube video. Just drop the URL to a video in a blog post, and it will transform into an embedded version of that video. Flickr URL... turns into an embedded photo.…

28 comments

Reading Position Indicator

The following is a guest post by Pankaj Parashar. Pankaj has written here before, last time about the progress element. I'm happy to have Pankaj back, this time to tackle the idea of showing reading progress (or really, a scroll position indicator) on websites, which has been a mini-trend lately.

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 you can style it with CSS and script it with JS and such. But what does that mean for click events?…

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 whole charade collapses. There's a team at a Google office that hasn't slept in three days. Somewhere there's a database programmer surrounded by empty Mountain Dew bottles whose husband thinks she's dead. And if these people stop, the world burns. …

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 those new entries into an email, and send them out to a list of subscribers. MailChimp and Campaign Monitor both offer this service and I'm sure they aren't the only ones.

But how do you handle images within those email-generating …

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 and useful when swapping sources with media queries alone would suck.
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 a CSS preprocessor, maybe we can handle it in a special way. …

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 inline SVG (SVG code right inside HTML) and animating the parts right through CSS.…

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