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

Article Archives

Understanding Proxy Browsers

A new series of posts by Tim Kadlec on proxy browsers and why some people need them:

I'd venture to say that most developers and designers are not big fans of proxy browsers—assuming they pay attention to them at all. They don't behave in ways a typical browser does, which leads to frustration as we see our carefully created sites fall apart for seemingly no reason at all. And frankly, most of us don't really need to use them on …

Motion along path in CSS

From the "I barely knew this was a thing and you can already play with it in browsers" files:

Motion paths allow authors to animate any graphical object along an author-specified path.

I suspect Chrome jumped on this because it's something that was only otherwise doable in SMIL, which they are ditching. I believe this is the first time the full path syntax has made it into CSS? (e.g. motion-path: path('M100,250 C 100,50 400,50 400,250');).

There are some demos

On The Verge

A fun bit of #hotdrama around mobile web performance.

Apparently it's possible to be of the opinion that slow, sucky websites are the fault of browsers and not the fact that the websites are jam packed with garbage assets.…

Position an element relatively to another element

Not possible currently in CSS, but there is a discussion happening around syntax like:

.el { position: element(#target) }

Of course there are tons of details, gotchas, and edge cases, but it sounds likely.…

Scroll-to-top-then-fixed

Chrome yanked position: sticky;, but Firefox and Safari still have it. Dudley Storey shows how to do the common sidebar pattern where a chunk follows you as you scroll down, but only when there is room for it. He does it in CSS, and the demo polyfills support with stickyfill.…

Modern CSS Layout, power and responsibility

Rachel Andrew reminds us that the power new CSS layout methods gives us could be used to form new anti-patterns:

With this power comes great responsibility. For just as it will be possible for a developer to start out with a beautifully semantic, well structured document and use Grid and Flexbox to meet the design requirements, it will be possible for them to stop caring about the document structure at all. Worse, I believe there will be a strong temptation, …

Thinking Ahead: CSS Scroll Snap Points

Guil Hernandez introduces how easy sliders (with nice UX) will be with very simple HTML and CSS' brand new scroll-snap-* properties. CSS is moving fairly fast these days, with features like this moving from "never heard of it" to:

... browser support for CSS scroll snap points is limited to IE10+ and Firefox 39+. But it looks like Safari 9 will include support, and you can enable scroll snap points in Chrome Canary.

before you know it. The Chrome support …

38 comments

The Difference Between Minification and Gzipping

These are both things that you do to assets on your website (things like .css files and .js files). They are both things that reduce the size of the file, making it more efficient in crossing the network between servers and browsers. As in, good for performance. The network is the speed bottleneck of the web and reducing file size helps.

But these two things are distinctly different. If you didn't already know that, it's worth understanding.…

48 comments

Front End Development is Development

There is some sentiment out there that front end development isn't real development. It's a swaggering, trollish sentiment. Still, it's fun to puff our chests back sometimes. Let's try to put a point on why front end development is every bit as difficult and worthy of the title as any other subset.…

Sponsor: FullStory

See your site through your users' eyes.

FullStory records each customer session exactly as it rendered in their browser – unlocking pixel-perfect playback, DOM and console inspection, searchability on any page element or interaction, and more.

Watch and understand how real users are interacting with your site. Go beyond analytics to see why customers aren't taking the expected actions, or troubleshoot problem sessions exactly as they occurred without needing to re-create the bug after the fact. See what it's like …

18 comments

Animations: the Angular Way

The following is a guest post by Ben Simmons (@bdsimmons15). Ben gives us a hand here in wrapping our heads around how to think about approaching animations on a website using Angular. Angular has a helper module for animation, but doesn't actually do the animation for you. Which turns out to be pretty smart.

42 comments

The Trouble With Preprocessing Based on Future Specs

Let's say there are rumblings from the deep (read: early Editor's Drafts of potential future web tech specifications) that demonstrate some potential future code syntax. Say that syntax looks pretty awesome and we want it to be useable right now. That's the idea behind some preprocessing these days. …

4 comments

The Asset Handover

When working in teams made up of designers and front end developers, there can be a lot of frustration and confusion when it comes to handing assets over from one team member to another. These might be design mockups or icons or high fidelity imagery for banners and the like. Regardless of the content of these handovers, there can always be improvements to this process.…

Sponsor: An Event Apart

Set yourself apart. Get better at what you do today and find out how you'll be doing your job in a year or two. An Event Apart—three days of design, code, and content for people who make websites—is where ideas like responsive design and mobile first were launched, and where this year’s attendees are already learning how grid layout, CSS shapes, and other advanced techniques will fundamentally change…well, everything. Don't miss it!

At the upcoming Chicago show, Dave Rupert …

jQuery 3.0 (alpha)

Lots of great stuff in this release, like animations taking advantage of requestAnimationFrame.

You should do serious testing before upgrading though. Not just because this is alpha, but because .show() and .hide() work a lot differently now. They don't do any fancy stuff to work with the CSS or return elements to the display type they were before hidden. These are hugely used methods. Chances are you have a few in your code base.

The best practice has become: …

32 comments

Print Stylesheet Approaches: Blacklist vs Whitelist

The "blacklist" is a common approach to print stylesheets. We know that people probably don't need to see our site navigation if they print out an article on our site. So we hide it from print like we would hide it from the screen (display: none;).

Is there a way to reverse that?…

CodeNewbie

I joined Saron Yitbarek on her podcast where we had a wonderful conversation about some of my history and the projects I work on.…

I Left My System Fonts in San Francisco

A post by Craig Hockenberry that details how to use the San Francisco system font for your website if you're running El Capitan.

I especially like Craig's suggestion for a new syntax when using any operating system's font, so for example in iOS that would probably be San Francisco or Helvetica Neue whilst in Android it would be Roboto. He suggests that we declare a system keyword in the font-family rule (although this won't work in any browsers today):

body
85 comments

The Front End Developer’s Dilemma

Hello, my name is Geoff and I am a web designer. At least, that's what I tell people I do for a living, because it's what most people understand.

The truth is, I am a front end developer. If you read this blog with any sort of regularity, then I don't even need to bother explaining that job title.

Or do I?…

React.js Introduction For People Who Know Just Enough jQuery To Get By

Here's an eloquent, step-by-step intro to React.js that takes a different approach then a lot of the other tutorials out there:

Of people who have never tried out React, some are comfortable with frontend JS frameworks like Backbone, Ember, or Angular. Some know JavaScript pretty well. Some know just enough jQuery to get by. A tutorial that's effective for one group may not be optimal for the other groups.

In this tutorial, I'm targeting the third group I mentioned: people …

Sponsored: Ask Me Anything on Inbound.org

Inbound.org is a community news site of marketing professionals focused on the idea of inbound marketing. You might think of inbound marketing as the good kind of marketing. You know, blogging, podcasting, making videos, sponsoring cool sites (#wink), and stuff like that. There is always loads of interesting and useful marketing information over there.

Over on Inbound.org, Chris will be answering anything you want to know. Got questions about HTML, CSS, podcasting, the marketing of Chris' projects, or anything else? …

Atomic OOBEMITSCSS

It sounds tounge-in-cheek, but it's not. As Una Kravets says:

That sounds crazy, but it makes sense when you break it down.

You (usually) need a naming strategy, abstractions, and a plan to keep specificity in check, so these ideas all together make sense.…

YWebCA

YWeb Career Academy (YWebCA) is a training program that targets women and people of color who are underrepresented in technology careers. The goal of YWebCA is to prepare students for family-sustaining jobs while meeting a gap in the labor market for these positions.

I'm a fan. In fact I'm headed to Madison later today to stop and and see if I can be useful. It's a wonderful program, and you can help out in a variety of ways if you …

The Web’s Cruft Problem

We're in an era where web tech is absolutely amazing. Yet, most of us practitioners are absolutely shocked at how full of garbage so many websites are, especially on mobile. Intrusive, rude, sometimes dangerous ads, ill-considered layouts, "social" garbage everywhere, and the worst offense: being slow. It's very weird choice companies make. Brad Forst has a special way of putting it.

Some browsers will even be taking things into their own hands.

TJ VanToll takes a look at …

15 comments

Swapping a WordPress core meta box to speed up editing

The CSS-Tricks front end is usually pretty darn fast, because most pages are cached (and don't need to be dynamically generated when requested). However, up until recently, the CSS-Tricks WordPress admin didn't have the same luck.

In particular, the post editing screen was slow. Painfully slow. Saving a draft took several seconds, which is enough to break your flow in the middle of writing an article.

Working on a tip from Pete Sorensen, who posted a performance question on the …

Developers and Designers

Excerpt from an Andrew Norcross article on how designers and developers might understand each other (and thus work together) better:

If you remember nothing else about developers, remember this: our core nature is to streamline, automate, and basically reduce things to their smallest possible element. This ethos drives almost every decision a developer makes.

I like how Tim Brown linked to the article:

Developers are your prepress folks.

Before I was in web, I was prepress for many years. …

16 comments

What a CSS Code Review Might Look Like

Many programming languages go through a code review before deployment. Whether it's a quick once-over, in-depth peer review, or complete unit testing, code reviews help us release code into the wild with confidence.

I started to imagine what a CSS code review might look like. CSS can be written in a number of ways, and the best way is often subjective to the project. I'm definitely not trying to get dogmatic with a post like this, but instead lay the …

CSS-Tricks Chronicle XXIII

Oh ya know, just some THINGS that have been going on lately that seem to make sense to round up into a Chronicle post.
12 comments

The Eighth Fourth

It just so happens the United States birthday is the same as CSS-Tricks birthday! It was on this day, eight years ago I first launched the site. Since then, I do a bit of a commemorative post each year. …

Native CSS Scroll Snap Points

The newly-introduced CSS “snap points” properties could make it a whole lot easier to create CSS-only scroll effects (once browser support catches up). This post from Sergey Gospodarets' blog includes demos of snappy scrolling for image galleries and full-page vertical scrolling.

Scroll snapping is used widely for a better separation of the provided content (vertical full height pages) or, for example, to emulate galleries behavior... Can you imagine how easy would be creating such effects using CSS only?

The full

Accessible Footnotes with CSS

Nice demo from Hugo Giraudel where the footnotes are order-labeled with CSS counters and provide jump-down and jump-back links.…

16 comments

Working with Shapes in Web Design

When we make a new component on a website, we’re effectively creating rectangles of different sizes, whether we realise it or not. But what happens if we want to experiment a little? How many different ways are there to make shapes?

In this post I want to roughly outline some of the most common ways to make circles, triangles, and polygons, as well jot down the advantages and disadvantages for these methods so we can experiment with those that might …

HTTP 203: Progressive loading

The latest episode from HTTP 203, a series of talks about front-end development with Paul Lewis and Jake Archibald, takes a look at progressively loading assets.

Jake makes the comparison between websites and the way that video games will let users download and play the first level instead of forcing them to wait for the all the assets to finish downloading. What does your level one website look like?…

Container Queries: Once More Unto the Breach

I guess the plan is to stop with the "element queries" and start thinking and referring to them as "container queries". We've been following this saga for a while. Element queries have a serious pitfall: infinite loops.

.our-element:media(min-width: 500px) { width: 499px; }

As Responsive Issues Community Group member Mat Marquis puts it:

Well, since the query no longer matches, the new width is no longer applied. Since that new width is never applied, the element query would match again, …

New Poll: What’s your take on managing styles entirely in JavaScript?

For a primer on this, check out the post The Debate Around "Do We Even Need CSS Anymore?". That post is intended to present the idea of styling a website through inline styles as applied through JavaScript, as a way to help with some of the perceived problems in CSS. There are, of course, points to be made and opinions on both sides. I'm going to close the comments here so the conversation can be focused there.

This new …

The Last Word on Helvetica?

If you're going to co-opt an opinion on Helvetica, you'd do well to take John Boardley's.

So rather than hate a typeface, why not channel that energy into loving another.

Might as well poke around the ilovetypography.com redesign while you're there!…

Why availability matters

GIFs from Stuart Langridge demonstrating that a tiny percentage of visitors that can't view your site isn't just a static minority, it's a scattered minority.

It's not 1% of people who always can't see your site and 99% of people who always can. It's 1% of visits. Almost all the people who don't get your site correctly actually should have been able to.…

Web performance: Cache efficiency exercise

Ryan Albrecht digs into how efficient browser caching is on Facebook.com. They release code twice a day, breaking cache as they do, so they were curious if that was too often for browser cache to be efficient.

After collecting data, they are seeing 44.6% users getting an empty cache, which they determine effective:

The best practices tell us to use external styles and scripts, include Cache-Control and ETag headers, compress data on the wire, use URLs to expire cached resources, …

7 comments

Using Pinterest Data Attributes and Meta Tags

Pinterest is kind of a big deal. In the blog and e-commerce world, it's threatening to edge out Google as the most important search engine. That's the world I come from, so I've had lots of opportunity to work with Pinterest's data attributes and meta tags. These bits of markup give site owners control over how their images and site are presented on Pinterest, and what can and can't be “pinned”.

Before we get into the tag and attribute details, …

149 comments

The Debate Around “Do We Even Need CSS Anymore?”

This has become quite the hot topic lately. It's been talked about at a number of conferences and meetups I've been at personally lately. I've seen slide decks on it. I know people literally not shipping any CSS in production. Pretty wild, eh?

I thought we could have a little campfire here and talk about it as rationally as we can, covering all the relevant points. …

Contextual Styling: UI Components, Nesting, and Implementation Detail

What should you do if you need a smaller button style whenever those buttons are placed in the header? Do you make a new class or a new custom button modifier? Harry Roberts tackles this problem in the following post on modifying components when they're inside another component:

If you need to change the cosmetics of a UI component based on where it is placed, your design system is failing. It’s as simple as that. Things should be designed to …

12 comments

Poll Results on the Unsolicited Startup Idea Email

In this last poll we asked:

You get an email from someone you've never met (poor communication skills, but a decent idea) and they want to cut you in and give you control over a new web company they want to start. Do you:

And listed some potential responses. This is how you over 27,000 of you responded.…

Viewport sized typography with minimum and maximum sizes

There is no min-font-size or max-font-size, so while setting font-size in viewport units is cool, there's a good chance your font-size might get too small on small screens or too big on large screens.

Eduardo Boucas has a clever workaround though. Use media queries to force the font-size back into a set pixel value when the viewport has gotten to the breakpoints at which those min/max values would be exceeded. He's got a Sass mixin to help with the …

12 comments

So. Many. States.

"States", as in contexts or situations in which any given element might be in. Let's take a stroll.…

18 comments

What is Code “Golf”?

From the grand archives of "Things Chris was totally confused about for far too long and now half understands so might as well blog it": code golf. I would hear someone say something like "I got it down that small from my own golf." I would squint, confused, and just let it pass because it didn't seem important enough to ask about. Slang for "work", perhaps, or "tinkering".…