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

Article Archives

9 comments

You can copy() from the console

You can in Blink/WebKit, anyway. You can't directly in JavaScript, as I'm sure that's some security (or good taste) issue that just isn't allowed. Sites that do it tend to rely on Flash. But it works in the console, and that can be all kinds of useful!…

15 comments

Progressive Enhancement and Data Visualizations

The following is a guest post by Chris Scott. Chris has written for us before - always on the cutting edge of things. This time Chris shows us something new in the form of a new charting technique his company offers. But it's based on something old: the fundamentals of the web itself.

28 comments

Simple CSS-Only Row and Column Highlighting

Highlighting rows of a table is pretty darn easy in CSS. tr:hover { background: yellow; } does well there. But highlighting columns has always been a little trickier, because there is no single HTML element that is parent to table cells in a column. A dash of JavaScript can handle it easily, but Andrew Howe recently emailed me to share a little trick he found on StackOverflow, posted by Matt Walton.

It was a few years old, so …

Sponsor: Ironhack

Ironhack is a coding school that offers full-time, immersive 8-week courses in Web & iOS development. Founded in Madrid and Barcelona, Ironhack recently launched its third campus in Miami and is accepting applications for its March 16th Web Development cohort.

Receive instruction from experts, hailing from leading technology companies such as Spotify, Yahoo and eBay, among others. In addition to teaching relevant technologies, they impart to you their methodologies for making quality software.

Ironhack provides career support to all its …

12 comments

Fun with line-height!

The line-height property in CSS controls the space between lines of text. It is often set in a unitless value (e.g. line-height: 1.4;) so that it is proportional to the font-size. It's a vital property for typographic control. Too low and lines are awkwardly squished together; too high and lines are awkwardly far apart. Both inhibit readability. But you probably already know that.

In this article we'll focus on some trickery. If you know (or can figure out) the …

“The Escalator”

Patrick Stirling of The Guardian shows off some new ads formats they are using. The first two look like they are just using some @media queries to shuffle things around and resize them. I wasn't able to find a live one to look under the hood at though. It would be really neat to see SVG be used for these because 1) you could make it nicely accessible with real text 2) The scale-and-maintain-proportions ability (even text) would seem appealing. …

“Of” vs “On” the Web

Jeremy Keith attempts to make this distinction, using Angular and the concept of "enterprise" software as the catalyst.

"Of the web": Built of fundamental principles of the web. Universal access.

"On the web": The web as a delivery mechanism. The owners dictate use.

Jeremy, who has been banging the progressive enhancement drum since forever, is predictably an "of the web" kinda guy. He only takes issue with the fact that other folks might be forced into working against their principals …

28 comments

Tour of a Performant and Responsive CSS Only Site

The following is a guest post by Rajoshi Ghosh and Tanmai Gopal of 34 Cross. They emailed me to show me their new website and how performant it was despite having cool features, being visually rich, and responsive. I was like, hey, you should write about it! This is that. Bask in the math.

Official Responsive Images Plugin for WordPress

Remember Tim Evko's guest post on responsive images in WordPress? Here's some news on that:

  • It's now the official WordPress plugin of the Responsive Images Community Group (RICG). It's on on GitHub here and in the Plugin Directory.
  • It now uses the more appropriate srcset attribute instead of <picture>, since it just does resolution switching.
  • It's endorsed by the WordPress core team, on track to be a "featured plugin" in the next release, and may ultimately end up

Web Devvy Ways to Practice Gratitude and Empathy

Have you seen THIS IS WATER? It's great. It's about choosing to think differently, especially when frustrated. I think about it all the time. For instance, every time someone cuts me off on the road, I assume they are rushing someone to the hospital. It doesn't always work, but it's nice when it does. And it's not just a trick, it's learning to think differently. …

26 comments

The CSS at…

There was a fun little trend toward the end of last year where companies were posting their approach to CSS. The tools involved, the methodologies, the thinking, and the data and numbers behind it. Mark Otto kicked it off, best I can tell. I mostly just wanted to post a list of them here, since that's perfect fodder for CSS-Tricks. I ended up slapping it into a table with a few bits of data that are easy to compare, …

Abusing CSS3’s nth-child selector to invent new ones

Matt Mastracci on combining existing positional selectors in interesting ways to create logic you might not have thought possible. For instance, select all elements only if there are five of them, with:

span:first-child:nth-last-child(5), span:first-child:nth-last-child(5) ~ span { /* select the span if its BOTH first and 5th from the end, then all spans after it. */ }

The usefulness lies in applying special layout to accommodate unknown markup.

Reminds me of an old CSS parlor trick I saw Estelle …

40 comments

Strategies for Keeping CSS Specificity Low

Keeping CSS specificity low across all the selectors in your project is a worthy goal. It's generally a sign that things are in relative harmony. You aren't fighting against yourself and you have plenty of room to override styles when you need to. Specificity on selectors tends to creep up over time, and there is a hard ceiling to that. I'm sure we've all felt the pain of !important tags and inline styles.

So how do we keep that specificity …

35 comments

How to Back Up Your WordPress Database

The following is a guest post by Andy Adams (@andyonsoftware). Andy is writing a book on freelancing with WordPress and has some WordPress chops. This post has been on my idea list for ages, so when Andy expressed an interest in writing for the site, I was stoked to have him tackle it. This isn't one of those "a good idea for a rainy day" things, it's a "you must be doing this or you'll probably lose your

25 comments

How to Scale SVG

The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of SVG Essentials and author of the upcoming Using SVG with CSS3 and HTML5. Amelia and I both will be speaking on SVG at the upcoming RWD Summit as well! Here, she shares an epic guide to scaling SVG, covering all the ways you might want to do that. It's not nearly as straightforward as scaling raster graphics, but that

Hand-picked Tales from Æsop’s Fables with Hand-Picked Type from Google Fonts

I'd love to say I can choose a typeface based on its history, structure, form, characteristics and fancy stuff like that. But usually it's more like seeing examples like this, being all "woah that looks hot", and imagining how it would work in the project I'm working on.

Created by @femmebot, with submissions by a bunch of folks. As part of this, which is chock full of good ideas.…

10 comments

How to Roll Your Own Simple WordPress Podcast Plugin

The following is a guest post by Geoff Graham. Geoff told me: "I love WordPress plugins but sometimes feel we rely on them without really understanding what they do." Ain't that true? Here, he walks us through how you might build this functionality yourself into WordPress. This might be just the ticket for those of you who resolved to start a podcast in 2015!

30 comments

Thank You (2014 Edition)

Well-oh-well if it isn't that time of year again. Time to huddle around the virtual campfire, pass around a metaphorical jug of brandy, and bid farewell to another year. You know, that thing we do every year. (2007, 2008, 2009, 2010, 2011, and 2012, 2013).…

54 comments

Approaches to Media Queries in Sass

The following is a guest post by Eduardo Bouças (@eduardoboucas). Sass allows you to write nested media queries, which is wonderful in itself, but it's possible to abstract things a bit further. Eduardo tried a bunch of different takes on writing media queries in Sass, from the very simple to the complex. This is one of the reasons I like Sass. The language has all the stuff needed for clever folks to write complex solutions to real problems

New Lodge Course Finished: Everything You Need To Know About SVG

Fourty videos by yours truly covering everything from why and when you should be using SVG, to fun things you can do with it, to little gotchas you might encounter. We go over a variety of build tools to help with implementation of icon systems. We cover places to get your hands on SVG. We look at optimizing SVG with a variety of tools. We discuss SVG accessibility, animation techniques, and software available. There is a lot to know!…

Naming Things

Speaking of "naming things how you would name them", Paul Lloyd:

Regardless of higher-level conventions, there's no getting away from the fact that, at some point, we're still going to have to name things.

Then goes on to list a slew of considerations for a name, including things like considering industry standards, business-specific names, keeping things obvious, consistent, and extendable, and my favorite, names that you make up because they make sense to you.

... at Clearleft we coined the …

26 comments

CSS: Just Try and Do a Good Job

Have you ever worried that you're approaching CSS all wrong? That you're missing out on some new approach that makes everything easier and better? That you wish you were more confident about the state of your CSS?

I'm sure we can all empathize with Anna's sentiment here:…

20 comments

Positioning Offset Background Images

If you need to position a background-image in CSS 20px from the left and 10px from the top, that's easy. You can do background-position: 20px 10px;. But what if you wanted to position it 20px from the right and 10px from the bottom?

Let's also assume we don't know the exact width and height of the element, which is likely, because fluid layouts and dynamic content. If we did, we could just do a little scratchpad math and …

47 comments

Link in Header? Or Header in Link?

Eric Range wrote in with this blog post idea. Is it better to wrap a header tag in an anchor link, or the other way around? Assuming HTML5, both of these are completely valid. …

36 comments

How to Redirect a Web Page

The following is a guest post by Robin Rendle. I've always wanted a post here that rounds up the different ways to redirect a site. So I commissioned Robin to do it and he did a fine job!

Sponsor: MyFonts – Subscription-Free Webfonts

MyFonts is the best place to find, try, and buy fonts for your website. Their webfonts are flexible, easy to use, and don't require any monthly fees. Not only that, but you can try any font on your own site free for 30 days.

One thing that you may find appealing about MyFonts is that you host the fonts. That frees you up to use your own CDN, or use your own font loader, or integrate the fonts in whatever …

17 comments

Relating to “Designing for Performance” by Lara Hogan

I picked me up a copy of Lara Hogan's new book Designing for Performance (Amazon), as it's a subject I've very interested in these days. As I write this, I'm just off the heels of doing quite a bit of performance related work here on CSS-Tricks as well as on CodePen.

I thought I'd give the book a read, learn some more, and be inspired to do some more. Here's some choice quotes and how they relate to …

Capability Reporting with Service Worker

We've heard 1,000 times: User Agent sniffing is bad news. We largely do it on the server because we want to know stuff about the client before we even send anything to the client. A worthy goal!

We've talked about this before. Perhaps you serve a little different JavaScript for a different approach to navigation. Or you set a cookie with client side data and use that to serve different image formats depending on support. Maybe you even refresh the

More Elegant Fix for Jumping Scrollbar Issue

If you move from one page of a site without a scrollbar to another with a scrollbar, you'll see a slight layout shift as things squeeze inward a bit to make room for the scrollbar.

A classic fix was html { overflow-y: scroll; } to force the scrollbar all the time. Ayke van Laëthem has found a more elegant solution in html { margin-left: calc(100vw - 100%); } which works because vw accounts for the scrollbar and % doesn't, and... …

9 comments

SMACSS-Press

The following is a guest post by Scott Fennell. Scott saw a recent post here on CSS-Tricks about class names in WordPress and had some of his own ideas about exerting control, rather than leaving things as they are. His idea is to enforce a more SMACSS style philosophy where possible.

Sponsor: Treehouse

Treehouse has been a long time sponsor here on CSS-Tricks. You know them. They do online training for web and mobile design and development. Here's a couple of things that I think are especially cool about Treehouse:

  • There are conference videos in there you won't find anywhere else. I was just poking around and found three videos of me at conferences I was recently at!
  • There are of course tons of courses, but they are very well organized into tracks
19 comments

Exposing Additional Form Fields via Checked Radio Buttons

There is a :checked pseudo class in CSS. I often think of it in connection with the "checkbox hack", in which you use it on a hidden checkbox with the ~ general sibling combinator to do simulate toggling behavior without any JavaScript. It's a hack because now you have these stray form elements on the page that really aren't for a form. Not a huge deal, as I'm sure you can work around it accessibility wise, but there is …

The CodePen Job Board

We just launched it! It's a niche job board (of course) targeted at front end developers and designers.

Not only is it the CodePen Job Board, but it's also the official job board here on CSS-Tricks and on ShopTalk as well.

We hope it's both useful to those of you looking for jobs in this field and companies looking to hire.…

8 comments

What is bookkeeping for a freelance front end developer?

The following is a guest post by my friend Allan Branch. Allan runs Less Accounting, web software for accounting. True story for me: it's only been this last year where I've gotten my stuff together and taken accounting seriously. (With a lot of help, of course, thanks Dee!) The advantages are significant. Not worrying about tax time and owing huge unknown amounts of money. Not scrambling to do everything at the last minute. But my favorite thing is

16 comments

OS Specific Fonts in CSS

I'm not sure what the exact use case was, but Sam Stephenson recently asked me:

@chriscoyier What's the best way to reference the OS X system font in CSS (to get Lucida Grande or Helvetica, as appropriate)?

— Sam Stephenson (@sstephenson) November 20, 2014

15 comments

Back to Basics With WordPress CSS: Understanding the Native Classes

The following is a guest post by Karol K. Karol is writing on behalf of ThemeIsle.com, a WordPress theme seller. He pitched me this post and I was into the idea. I'm the kind of front end developer that likes to do things my way and force whatever tool I'm using into it. There is something to be said for that, but only to a point. Burning hours on a philosophical difference on naming typically isn't worth it.

Sponsor: See how your visitors are really using your website

Hotjar is a new and easy way to truly understand your web and mobile site visitors. Now you can improve your site user experience and conversion rates by using Heatmaps, Session Playback, Proactive Chat, Polls, Funnel Analysis, Polls and Surveys — all in one central interface. Get free early access now!

Hotjar is changing the way small and medium businesses can improve their sites' user experience.

– CreativeBloq

(Advertising on CSS-Tricks)

WOFF2

I just learned that this is a thing. Sergej Müller has a really succinct page explaining what it is (it's an extra-compressed version of WOFF, the font file format) and how to use it.

And speaking of web type, check out Bram Stein's The State of Web Type (beta) for support of the loads of related browser features.…

21 comments

Clipping and Masking in CSS

Both of these things are used to hide some parts of elements and show other parts. But there are, of course, differences between the two. Differences in what they can do, differences in syntaxes, different technologies involved, the new and the deprecated, and browser support differences.

And sadly there is quite a bit of outdated information out there. Let's see if we can sort it out.…

19 comments

Automating CSS Regression Testing

The following is a guest post by Garris Shipon. We've touched on the four types of CSS testing here before. Regression testing is the hardest. It's the type where you're trying to test if a change you made to CSS resulted in any unexpected visual problems. This is made more difficult with responsive designs. Garris built a tool for doing this as he embarked upon a new responsive design for a large scale site. Here, he'll walk you through

4 comments

Watch Dogs

It's Blue Beanie Day! A day celebrating and showing support for web standards. I'm a little biased perhaps, since it's my field, but I believe the web is among the most important things human beings have ever done. For starters, it enables international commerce, it enables connection and collaboration between people who may never have had that opportunity, it can make news more instant and honest, and it's a knowledge base bigger than we can even comprehend. #deepthoughts.

The …

32 comments

What’s So Great About Bower?

The following is a guest post by Dan Sundy from Helios Design Labs. Dan is both going to explain how to use Bower and make a case for doing so, from the perspective of someone who resisted the idea at first.