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

Article Archives

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

79 comments

Thought Process of a Front End Problem

Someone graciously takes the time to write in to let me know the fonts on this site look weird in Opera Mobile. What is a poor front end developer to do?
20 comments

Single Page Refresh for Client Side Data Server Side

We recently covered how you could get client-side information and make it available server side. Do real tests on the client, like measure browser window width and do feature tests. Then save that data to a Cookie. Then next time the page is loaded, you'll have that data in a cookie.

I quite like that technique, and use it, but what if you really want to be using that info on the first page a user sees? You might …

A Dive Into Plain JavaScript

I think jQuery provides so much benefit it still makes sense to use on projects of even modest scope and up. But knowing how to do the simple stuff without it is very good to know, and getting pretty easy these days as long as you "cut the mustard" first.…

33 comments

Changing Between Spaces and Tabs in Sublime Text

Sublime Text is pretty dang good at making it easy to switch between using tabs and spaces to indent your code. More importantly, it makes it easy to adjust the indentation of code that doesn't match your preference. I thought I'd put this together for reference, as there is a particular sequence of steps for some of the transitions that needs to be followed.…

How fast is fast enough?

100ms is the ultimate goal since that feels instantaneous. 20% faster than a competitor will be noticed. 1000ms is a practical goal, which refers to "Speed Index" (visually and functionally ready) not window.onload.…

167 comments

When to use target=”_blank”

Anchor links1 may have a target attribute which controls what happens when that link is clicked. One of the possible values of that attribute is _blank, which tells the browser to open a new window (or tab, if that's the user's preference) when that link is clicked.

This used to be "invalid" in HTML (maybe only XHTML?) but people used it anyway since it worked. It's now perfectly valid in HTML5. But are there good reasons to do …

// in CSS

A lot of people, me included, wish we could use // for single line comments in CSS. Tab Atkins explains why it's probably not going to happen, but weirdly enough, you can actually use them now if you're careful.…

55 comments

The Syntax vs The Spirit

Sometimes I literally can't remember how to write a for loop. Not like funny ha-ha I can't remember how to spell "psychology" but really I can figure it out in a few seconds. Like, go to Google, type in "for loop PHP", click on a promising result, copy and paste, then alter it.

I'm mostly a front-end guy, but I'm essentially a professional programmer. Isn't that ridiculous and embarrassing? Meh.…

Front End Ops

As Alex Sexton laid out, it's a thing. More and more people will be hired to do it specifically and organizations will start thinking of it as an important piece of the pie. These slides by Ian Feather help explain what that might look like.…

97 comments

When To Use The Button Element

You use it when, uhm, you want a button on your page that users can click, right? Well, unfortunately it's a bit more complicated than that. It's not too bad though, let's figure it out.…

Web Standards Killed The HTML Star

Jeff Croft argues that because the web standards movement did such a good job, the "HTML and CSS guru" of old is a commoditized job. "Diversify or die", he says, meaning level up your abilities in other web tech to remain employed.

I agree with the sentiment. Web standards have become a thing to be thankful for, not a scrappy underdog. Not that we shouldn't keep a keen eye out for wrong turns.

But I don't think HTML/CSS people …

The Intrinsic Value of Blogging

Speaking of writing tips, Matt Mullenweg on how you should write for just two people: yourself, and

a single person who you have in mind as the perfect person to read what you write, almost like a letter, even if they never will, or a person who you’re sure will read it because of a connection you have to them (hi Mom!).…

50 comments

Words To Avoid in Educational Writing

I'm no English major, but as a writer and consumer of loads of educational (mostly tech) writing, I've come to notice a number of words and phrases that come up fairly often and don't add anything to the writing. In fact, they might detract from it.

This started as a Twitter discussion so I thought I'd write it up more clearly.…

58 comments

Thank You (2013 Edition)

GROUP HUG! It's that time of year I give ya'll the biggest warmest THANKS I can. CSS-Tricks is the foundation of my career and makes my life possible. And thus it is to you, dear reader, that I owe everything.…

42 comments

What is the DOM?

A reader recently wrote in asking me what the DOM was. They said they've heard it mentioned and alluded to, but aren't sure they really understand it.

We can fix that. …

On interviewing front-end engineers

Nicholas C. Zakas with a follow up to Philip Walton's article.

Front-end engineers are, of course, specialists. We care about things that seem insane to others: understanding differences between dozens of browsers, pixels vs. ems, PNG vs. JPEG, compatibility of JavaScript APIs, how to construct a DOM to represent a UI, and so on.

The things I look for in a front-end engineer have little to do with traditional computer science concepts.…

LICEcap

Animated GIFs, aside from being megalolfunny, can be tremendously useful in communicating an idea. Like this or this. I get asked often how I make those. There is nothing to it, just use this app.…

24 comments

Make Sure Your Columns Don’t Collapse Horizontally

You might be familiar with elements collapsing vertically. If an element only contains other elements that are floated, the parent element will collapse to zero height. We often employ the clear fix for that. But if an element doesn't contain anything, it can collapse horizontally as well, which can be quite awkward for layout.…

CSS is 17

Some nice history on the birth of CSS by John Allsopp.…

The Growth of CSS Repos on GitHub

Interesting statistic uncovered by Donnie Berkholz: the number of repos that GitHub classifies as "CSS" (has more CSS in it than any other language) grew 13.6x in 2013. Doubling would be crazy, this is something else entirely. Assuming this isn't a fluke in how GitHub classifies this kind of thing.…

Myth

I thought I'd weigh in here...

  1. Calling it a "postprocessor" is weird. It gets parsed into CSS before the browser sees it, so it's a preprocessor. If something parses the CSS out from the browser, it can be a postprocessor, ala -prefix-free.
  2. I really love the idea of authoring as if vendor prefixes never existed and letting software fix it up for you. This is what Autoprefixer does. It might just use that internally?
  3. The whole point of calc()
29 comments

About Variables in CSS and Abstractions in Web Languages

Variables are coming to CSS. They already have implementations, so there is no stopping it now. Firefox has them in version 29 and Chrome has them unprefixed in 29+ if you have the "Enable experimental Web Platform features" flag turned on.

To be clear, no amount of arguing on whether this is good or bad is going to change things at this point. But I still think it's interesting, so let's talk about it anyway.…

42 comments

Line Menu Icon… That Is A Menu

I had a dumb little idea the other night so I just coded it up (as you do). You know those little icons that have come represent navigation? We've called them Three Line Menu icons around here, but otherwise known as Navicon (clever) or Hamburger (dumb). The point of that icon is that it looks like a little menu, so hopefully it's obvious you click it to reveal a real menu. But what if that icon wasn't an icon at …

What You May Not Know About Z-Index

It controls which element is "on top" visually when they happen to overlap, right? Right. But there is more to the stacking order, much of which you can't control. You can control stacking contexts though, which kind of reset the playing field within them, but themselves can be stacked. Steven Bradley explains.

Related: Jake Archibald also encountered this and has a little more info. Paul Lewis explains how this (kinda sucky) situation is unique to the web. Philip …

59 comments

New Poll: Command Line Usage

I have a feeling the readers of CSS-Tricks represent a fairly wide range of job types and skill levels. It would be interesting to know how frequently used command line usage is amongst the general web worker population.…

14 comments

Why You Should Use Continuous Integration and Continuous Deployment

The following is a guest post by Florian Motlik. Florian is CTO of Codeship, a hosted Continuous Integration and Continuous Deployment platform. What the heck is that, you might ask? It's kind of a philosophy and toolset for working on websites. That is perhaps a bit too simplified, so I'll let Florian explain.

Animated SVGs

Mike Fortress explains animation with <svg> with a specific example involving charts on Sprout.

It's funny how SVG has all these great features like gradients and filters and animations that we have in CSS, but the syntax is so different. I think it would be cool if there was some kind of converter that would let us target SVG parts with CSS selectors, apply things like gradients, filters, and animations, and it would convert it into the SVG format that …

Chrome DevTools for Mobile

Emulate mobile devices directly through DevTools, simulating touch events, mimicking screen size, and spoofing user agent.

Plug in a mobile device over USB and use Chrome DevTools on the actual mobile browser. Push your local site to the mobile device with port forwarding.

This is excellent stuff, not only because it's very powerful, but because it's easy.…

26 comments

SVG Tabs (Using an SVG Shape as Template)

An excellent feature of SVG is that you can define a shape (or set of shapes) once, and then use it multiple times throughout a page. You can even apply different fills and filters and whatnot to the different versions. SVG templating, if you will.

Let's see if we can put that to good use by creating some tabs.…

20 comments

Colorpeek: A Simple Way to See and Share CSS Colors

The following is a guest post by Tyler Sticka Tyler created a tool called Colorpeek. In this article, he'll introduce you to what the web app does and why, and then how the Chrome Extension works to extend that. Then tomorrow, stay tuned, as Tyler will show us how he built the Chrome Extension.…

58 comments

A Blue Box

A little meme went around CodePen the other night. A Blue Box. I'm not sure how it started, but lots of people started posting code of different ways to draw a blue box. It's weird, it's funny, but it's also rather amazing there is as many ways as there are for doing something so simple. …

Turn Off Hovers on Scroll

Sometimes hover effects can cause redraws and repaints and whatnot that take time and reduce performance. As you scroll down a page, you're likely inadvertently triggering hover events that have no meaning while you scroll. Turning them off (via CSS's pointer-events) is a clever way to reclaim some scrolling performance.…